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'

该函数返回的切片，在 createWithEqualityFnImpl 中进一步使用 useStoreWithEqualityFn 。

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中文网其他相关文章！