ZustandのソースコードのcreateWithEqualityFnImplについて説明しました。

この記事では、理解を深めるために値の一部をログに記録することで、createWithEqualityFnImpl がどのように実装されるかを分析します。

上の画像からわかるように、createWithEqualityFn は関数 createWithEqualityFnImpl を呼び出します。このパターンは vanilla.ts でも使用されており、以下に示します:

export const createStore = ((createState) =>
  createState ? createStoreImpl(createState) : createStoreImpl) as CreateStore

createStore は createStoreImpl を呼び出し、createWithEqualityFn は createWithhEqualityFnImpl を呼び出します。

createWithEqualityFn の実行に入る前に、まず createWithEqualityFn を使用する目的を理解しましょう。

上記のスクリーンショットは https://github.com/pmndrs/zustand/tree/main からのものです

createWithEqualityFn を使用すると、再レンダリングをより詳細に制御できます。

createWithEqualityFn

const createWithEqualityFnImpl = <T>(
  createState: StateCreator<T, [], []>,
  defaultEqualityFn?: <U>(a: U, b: U) => boolean,
) => {
  const api = createStore(createState)

  const useBoundStoreWithEqualityFn: any = (
    selector?: any,
    equalityFn = defaultEqualityFn,
  ) => useStoreWithEqualityFn(api, selector, equalityFn)

  Object.assign(useBoundStoreWithEqualityFn, api)

  return useBoundStoreWithEqualityFn
}

useStoreWithEqualityFn

export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>>(
  api: S,
): ExtractState<S>

export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>, U>(
  api: S,
  selector: (state: ExtractState<S>) => U,
  equalityFn?: (a: U, b: U) => boolean,
): U

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
}

これはオーバーロード関数です。 useStoreWithEqualityFn には 3 つの定義があります:

export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>>(
  api: S,
): ExtractState<S>

export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>, U>(
  api: S,
  selector: (state: ExtractState<S>) => U,
  equalityFn?: (a: U, b: U) => boolean,
): U

export function useStoreWithEqualityFn<TState, StateSlice>(
  api: ReadonlyStoreApi<TState>,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {

スライス値がどのように見えるかを見てみましょう:

値: 1 はスキップされます。これは、以下に示すように、値が 1 の場合に再レンダリングを避けるようにコードを設定しているためです。

私たちについて:

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#L74

2. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L39

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