useRecoilSnapshot()

此 Hook 在渲染过程中同步返回一个 Snapshot 对象，并订阅调用组件的所有 Recoil 状态更改。您可能希望将此 Hook 用于调试工具，或用于需要在初始渲染期间同步获取状态的服务器端渲染。

function useRecoilSnapshot(): Snapshot

请谨慎使用此 Hook，因为它会导致组件针对所有 Recoil 状态更改重新渲染。从 useRecoilSnapshot() 获取的快照至少会在使用它们的组件挂载期间保留。

调试示例

function DebugObserver() {
  const snapshot = useRecoilSnapshot();
  const previousSnapshot = usePrevious(snapshot);
  useEffect(() => {
    console.debug('Changed Atoms:');
    for (const node of snapshot.getNodes_UNSTABLE({isModified: true})) {
      console.debug(node.key, snapshot.getLoadable(node));
    }
  }, [snapshot]);
  return null;
}

function MyApp() {
  return (
    <RecoilRoot>
      <DebugObserver />
      ...
    </RecoilRoot>
  );
}

错误边界示例

一个 有趣的示例，它在错误边界中使用快照来查找、显示和重试抛出错误的选择器。

链接示例

定义一个 <LinkToNewView> 组件，该组件渲染一个 <a> 锚点，其 href 基于应用了突变的当前状态。在此示例中，uriFromSnapshot() 是某个用户定义的函数，它将当前状态编码到 URI 中，该 URI 在加载页面时可以恢复。

function LinkToNewView() {
  const snapshot = useRecoilSnapshot();
  const newSnapshot = snapshot.map(({set}) => set(viewState, 'New View'));
  return <a href={uriFromSnapshot(newSnapshot)}>Click Me!</a>;
}

这是一个简化的示例。我们在即将推出的浏览器历史记录持久化库中提供了类似的助手来生成链接，该库更具可扩展性和优化性。例如，它将劫持点击处理程序以更新本地状态，从而替换浏览器历史记录。