JotaiJotai

Jotai
React 原始而灵活的状态管理

Provider

Provider

Provider组件的作用是为组件子树提供状态。 可以使用多个Provider为多个子树提供状态，它们甚至可以嵌套。 这就像React Context一样。

如果在没有Provider的树中使用了一个原子，它将使用默认状态。这就是所谓的无Provider模式。

Provider有三个用途：

  1. 为每个子树提供不同的状态。
  2. 接受原子的初始值。
  3. 通过重新挂载来清除所有原子。
const SubTree = () => (
  <Provider>
    <Child />
  </Provider>
)

签名

const Provider: React.FC<{
  store?: Store
}>

原子配置不包含值。原子值存在于独立的存储中。Provider是一个包含存储并在组件树下提供原子值的组件。Provider的工作方式类似于React context provider。如果你不使用Provider，它将以默认存储的无Provider模式工作。如果我们需要为不同的组件树保存不同的原子值，那么Provider将是必需的。Provider可以接受一个可选的prop store。

const Root = () => (
  <Provider>
    <App />
  </Provider>
)

store 属性

Provider接受一个可选的store属性，你可以在Provider子树中使用它。

示例

const myStore = createStore()


const Root = () => (
  <Provider store={myStore}>
    <App />
  </Provider>
)

useStore

这个钩子在组件树中返回一个存储。

const Component = () => {
  const store = useStore()
  // ...
}
GitHubnpm