跳至主要内容

<RecoilRoot>

提供原子具有值的上下文。必须是任何使用任何 Recoil 钩子的组件的祖先。


Props

  • initializeState?: (MutableSnapshot => void)
    • 一个可选函数,它接受一个 MutableSnapshot初始化 <RecoilRoot> 原子状态。这为初始渲染设置状态,不适用于后续状态更改或异步初始化。对于异步状态更改,请使用诸如 useSetRecoilState()useRecoilCallback() 之类的钩子。 原子效果 可用于更轻松地初始化动态原子并将初始化逻辑与原子定义一起定位。原子效果初始化优先于 initializeState
  • override?: boolean
    • 默认为 true。此道具仅在该 <RecoilRoot> 嵌套在另一个 <RecoilRoot> 内时才重要。如果 overridetrue,则此根将创建一个新的 Recoil 范围。如果 overridefalse,则此 <RecoilRoot> 除了渲染其子组件之外不会执行任何功能,因此此根的子组件将访问最近的祖先 RecoilRoot 的 Recoil 值。

使用多个 <RecoilRoot>

多个 <RecoilRoot> 可以共存,并且代表原子状态的独立提供程序/存储;原子在每个根中将具有不同的值。当您将一个根嵌套在另一个根内时,此行为保持不变(内部根将屏蔽外部根),除非您将 override 指定为 false(请参阅“Props”)。

请注意,缓存(例如选择器缓存)可能在根之间共享。选择器评估必须是幂等的,除了缓存或记录之外,因此这通常不会成为问题,但它可以观察到,并且可能导致冗余查询在根之间缓存。可以使用 useRecoilRefresher_UNSTABLE() 清除缓存。

示例

import {RecoilRoot} from 'recoil';

function AppRoot() {
return (
<RecoilRoot>
<ComponentThatUsesRecoil />
</RecoilRoot>
);
}