useSyncExternalStoreExports の状態のソース コードを説明します。

この記事では、Zustand が [ソース コード] で useSyncExternalStoreExports をどのように使用するかを見ていきます。

useSyncExternalStoreExports は use-sync-external-store/shim/with-selector からインポートされます。 use-sync-external-store は、React.useSyncExternalStore の下位互換性のある shim です。フックをサポートするあらゆる React で動作します。

上の文を読むと、useSyncExternalStore とは何なのか疑問に思うかもしれません。

useSyncExternalStore

useSyncExternalStore は、外部ストアをサブスクライブできるようにする React フックです。

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<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、equalityFn があります。

私たちについて:

Think Throo では、オープンソース プロジェクトからインスピレーションを得たベスト プラクティスを教えるという使命を担っています。

Next.js/React の高度なアーキテクチャ概念を実践してコーディング スキルを 10 倍にし、ベスト プラクティスを学び、実稼働レベルのプロジェクトを構築します。

私たちはオープンソースです — https://github.com/thinkthroo/thinkthroo (スターを付けてください!)

コードベース アーキテクチャに基づいた高度なコースでチームのスキルを向上させます。詳細については、hello@thinkthroo.com までお問い合わせください!

参考文献:

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

以上がuseSyncExternalStoreExports の状態のソース コードを説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。