在這篇文章中，我們將透過記錄它的一些值來分析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 = (
  createState: StateCreator,
  defaultEqualityFn?: (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>(
  api: S,
): ExtractState

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

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
}

這是一個重載函數。 useStoreWithEqualityFn 有 3 個定義：

export function useStoreWithEqualityFn>(
  api: S,
): ExtractState

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

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

讓我們來看看切片值是什麼樣的：

value: 1 被跳過，因為我們設定了程式碼以避免值為 1 時重新渲染，如下所示：

關於我們：

在 Think Throo，我們的使命是教導受開源專案啟發的最佳實踐。

透過在 Next.js/React 中練習高階架構概念，提升您的程式設計技能，學習最佳實踐並建立生產級專案。

我們是開源的 — https://github.com/thinkthroo/thinkthroo （請給我們一顆星！）

透過我們基於程式碼庫架構的高階課程來提升您的團隊技能。請透過 [email protected] 與我們聯繫以了解更多資訊！

參考：

1. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L74

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