首頁 > web前端 > js教程 > 主體

Zustand原始碼中的useBoundStoreWithEqualityFn有解釋。

王林
發布: 2024-09-11 06:37:35
原創
489 人瀏覽過

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

useBoundStoreWithEqualityFn in Zustand’s source code explained.

以上程式碼摘自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 in Zustand’s source code explained.

最後 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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板