在本文中，我們將了解 Zustand 如何在其[原始碼]中使用 useSyncExternalStoreExports。

useSyncExternalStoreExports 是從 use-sync-external-store/shim/with-selector 匯入的。 use-sync-external-store 是 React.useSyncExternalStore 的向後相容墊片，適用於任何支援 Hooks 的 React。

讀完上面這句話，你可能會想知道什麼是useSyncExternalStore。

useSyncExternalStore

useSyncExternalStore 是一個 React Hook，可讓您訂閱外部儲存。

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

使用 useSyncExternalStore 從外部儲存中讀取一個值，該值可以是：

1. 在 React 之外保存狀態的第三方狀態管理庫。

2. 公開可變值和事件以訂閱其更改的瀏覽器 API。

用法範例：

import { useSyncExternalStore } from 'react';
import { todosStore } from './todoStore.js';

function TodosApp() {
  const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot);
  // ...
}

上面的範例摘自React文件。

Zustand 中的useSyncExternalStore 使用：

Zustand 在 src/traditional.ts 中使用 useSyncExternalStore。

import ReactExports from 'react'
// eslint-disable-next-line import/extensions
import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
import { createStore } from './vanilla.ts'
import type {
  Mutate,
  StateCreator,
  StoreApi,
  StoreMutatorIdentifier,
} from './vanilla.ts'

const { useDebugValue } = ReactExports
const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports

useSyncExternalStoreWithSelector 是從 useSyncExternalStoreExports 解構出來的，它在 useStoreWithEqualityFn 中使用。

export function useStoreWithEqualityFn(
  api: ReadonlyStoreApi,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
  const slice = useSyncExternalStoreWithSelector(
    api.subscribe,
    api.getState,
    api.getInitialState,
    selector,
    equalityFn,
  )
  useDebugValue(slice)
  return slice
}

useSyncExternalStoreWithSelector 有 api.subscribe、api.getState、api.getInitialState、selector 和 equalFn。

關於我們：

在 Think Throo，我們的使命是教導受開源專案啟發的最佳實踐。

透過在 Next.js/React 中練習高階架構概念，提升您的程式設計技能，學習最佳實踐並建立生產級專案。

我們是開源的 — https://github.com/thinkthroo/thinkthroo （請給我們一顆星！）

透過我們基於程式碼庫架構的高階課程來提升您的團隊技能。請透過 [email protected] 與我們聯繫以了解更多資訊！

參考：

1. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L44

2. https://www.npmjs.com/package/use-sync-external-store

3. https://legacy.reactjs.org/docs/hooks-reference.html#usesyncexternalstore

4. https://react.dev/reference/react/useSyncExternalStore

5. https://github.com/reactwg/react-18/discussions/86