useSyncExternalStoreExports在狀態原始碼中有解釋。-js教程-PHP中文網

useSyncExternalStoreExports在狀態原始碼中有解釋。

WBOY

發布： 2024-09-10 11:06:34

原創

811 人瀏覽過

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

useSyncExternalStoreExports in Zustand source code explained.

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 從外部儲存讀取一個值，該值可以是：

在 React 之外保存狀態的第三方狀態管理庫。
公開可變值和事件以訂閱其更改的瀏覽器 API。

用法範例：

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

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

登入後複製

上面的範例摘自React文件。

useSyncExternalStore 在 Zustand 的用法：

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<TState, StateSlice>(
  api: ReadonlyStoreApi<TState>,
  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。