useRecoilSnapshot()

此掛勾會在渲染期間同步傳回一個 快照 物件，並訂閱呼叫元件的所有 Recoil 狀態變更。您可能想要在偵錯工具或伺服器端渲染中使用此掛勾，因為您需要在初始化渲染期間取得這個狀態。

function useRecoilSnapshot(): Snapshot

小心使用此掛勾，因為它會使元件重新渲染以得知所有 Recoil 狀態變更。使用 useRecoilSnapshot() 取得的快照至少會保留在使用該快照的元件 mount 的時間。

偵錯範例

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>;
}

這是簡化的範例。我們提供了一個像這樣的輔助工具來建立連結，它即將出現在我們的瀏覽器記錄持續性資料庫中，更具可擴充性和最佳化。例如，它將劫持 click 處理程式以用本地狀態取代瀏覽器記錄。