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

この記事では、useBoundStoreWithEqualityFn 関数が Zustand のソース コードでどのように使用されているかを理解します。

上記のコードは https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80 から抜粋したものです

useBoundStoreWithEqualityFn は createWithEqualityFnImplfunction で呼び出され、useStoreWithEqualityFn という名前の別の関数を返します。

useStoreWithEqualityFn の内容を見てみましょう。

// Pulled from https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80
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
}

useSyncExternalStore は、外部ストアをサブスクライブできるようにする React フックであり、以下に示すように useSyncExternalStoreWithSelector がインポートされます。

import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'

この関数によって返されるスライス。 useStoreWithEqualityFn はさらに createWithEqualityFnImpl で使用されます。

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

Object.assign(useBoundStoreWithEqualityFn, api)

return useBoundStoreWithEqualityFn

Object.assign は、useBoundStoreWithEqualityFn によって返されたスライスを「api」で更新します。

以下のスクリーンショットは、Object.assign が更新を行う方法を例とともに示しています

そして最後に、createWithEqualityFnImpl によって useBoundStoreWithEqualityFn が返されます。

私たちについて:

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

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

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

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

参考文献:

1. https://github.com/search?q=useBoundStore&type=code

2. https://github.com/churichard/notabase

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