在本文中，我們將透過記錄其一些值來分析 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 來更好地控制重新渲染。
const createWithEqualityFnImpl = <T>(
createState: StateCreator<T, [], []>,
defaultEqualityFn?: <U>(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
}
export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>>(
api: S,
): ExtractState<S>
export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>, U>(
api: S,
selector: (state: ExtractState<S>) => U,
equalityFn?: (a: U, b: U) => boolean,
): U
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
}
這是一個重載函數。 useStoreWithEqualityFn 有 3 個定義：
export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>>(
api: S,
): ExtractState<S>
export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>, U>(
api: S,
selector: (state: ExtractState<S>) => U,
equalityFn?: (a: U, b: U) => boolean,
): U
export function useStoreWithEqualityFn<TState, StateSlice>(
api: ReadonlyStoreApi<TState>,
selector: (state: TState) => StateSlice = identity as any,
equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
讓我們看看切片值是什麼樣的：
value: 1 被跳過，因為我們設定了程式碼以避免值為 1 時重新渲染，如下所示：
在 Think Throo，我們的使命是教授受開源專案啟發的最佳實踐。
透過在 Next.js/React 中練習高階架構概念，將您的編碼技能提高 10 倍，學習最佳實踐並建立生產級專案。
我們是開源的 — https://github.com/thinkthroo/thinkthroo （請給我們一顆星！）
透過我們基於程式碼庫架構的高階課程來提升您的團隊的技能。請透過 hello@thinkthroo.com 與我們聯繫以了解更多資訊！
https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L74
https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L39
以上是Zustand原始碼中的createWithEqualityFnImpl有解釋。的詳細內容。更多資訊請關注PHP中文網其他相關文章！
