在这篇文章中，我们将了解Zustand源码中如何使用useDebugValue。

useDebugValue 在名为 useStoreWithEquality 的函数中使用。 useDebugValue 是一个 React Hook，可让您在 React DevTools 中向自定义 Hook 添加标签。

在自定义 Hook 的顶层调用 useDebugValue 以显示可读的调试值：

// Pulled from https://react.dev/reference/react/useDebugValue
import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}

在 Zustand 中，useDebugValue 用于切片对象，如下所示：

const slice = useSyncExternalStoreWithSelector(
  api.subscribe,
  api.getState,
  api.getInitialState,
  selector,
  equalityFn,
)

useDebugValue 也用于 src/react.ts

关于我们：

在 Think Throo，我们的使命是教授受开源项目启发的最佳实践。

通过在 Next.js/React 中练习高级架构概念，提高您的编码技能，学习最佳实践并构建生产级项目。

我们是开源的 — https://github.com/thinkthroo/thinkthroo （请给我们一颗星！）

通过我们基于代码库架构的高级课程来提高您的团队技能。请通过 [email protected] 联系我们以了解更多信息！

参考：

1. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L51

2. https://react.dev/reference/react/useDebugValue

3. https://github.com/pmndrs/zustand/blob/0a4f9d0f71477c5ef399191acc19e25674d0d3c4/src/react.ts#L42