在本文中,我們將了解 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 與我們聯繫以了解更多資訊!
https://github.com/search?q=useBoundStore&type=code
https://github.com/churichard/notabase
以上是Zustand原始碼中的useBoundStoreWithEqualityFn有解釋。的詳細內容。更多資訊請關注PHP中文網其他相關文章!