Zustand原始碼中的useBoundStoreWithEqualityFn有解釋。

在本文中，我們將了解 Zustand 原始碼中如何使用 useBoundStoreWithEqualityFn 函數。

以上程式碼摘自https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80

useBoundStoreWithEqualityFn 在 createWithEqualityFnImpl 函數中被調用，並傳回另一個名為 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 Hook，可讓您訂閱外部存儲，並導入 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 使用「api」更新 useBoundStoreWithEqualityFn 傳回的切片。

下面的螢幕截圖透過範例示範了 Object.assign 如何進行更新

最後 useBoundStoreWithEqualityFn 由 createWithEqualityFnImpl 傳回。

關於我們：

在 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中文網其他相關文章！