在本文中，我们将了解 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