type
status
date
slug
summary
category
tags
password
icon
useDebugValue 是一个专为开发者调试自定义 hook 而设计的 React hook。对于大多数应用开发者来说,可能不会直接使用它,但对于那些需要创建和维护自定义 hooks 的开发者来说,useDebugValue 可以提供一个更加友好的显示,帮助开发者更容易地理解该 Hook 的当前状态。

useDebugValue的使用

这是 useDebugValue 的用法定义:
  • value 是你想在 React 开发工具中显示的值,可以是任何类型
  • format 是一个可选参数,它接受一个格式化函数。这个参数的用途是:某些情况下,会存在开销较大的格式化逻辑,为了避免不必要的计算,把格式化逻辑放在 format,就可以让这个格式化逻辑只在 DevTools 需要显示这个值的时候才执行。

用法示例

在《精读React hook(十三):使用useSyncExternalStore获取实时数据》中,我们有一个监听网络状态的演示案例,现在我为了调试更科学,想把网络状态也显示在 React 开发工具上面,我在原来的 hook 里添加 useDebugValue 就可以:
现在我打开 React 开发工具,可以看到 useOnlineStatus 的返回值显示出来了:
notion image
useDebugValue 为开发者做的事就是这么简单。你也可以到<👉我的演示站>验证。

useDebugValue的价值

初看 useDebugValue 你会觉得它并没有带来什么价值,其实不然,例如在大型项目中可能会有很多自定义 Hooks,为这些 Hooks 提供清晰的 debug 值可以帮助团队更容易地识别和解决问题;而对于开源的自定义 Hooks,提供这样的 debug 值更是对使用者的友好提示。
总结一下 useDebugValue 的主要价值点:
  1. 提供清晰的调试信息:当你在 React 开发工具中查看一个组件,如果该组件使用了多个自定义 Hooks,useDebugValue 可以帮助你更清晰地理解每个 Hook 的当前状态。这对于追踪和理解组件的行为非常有帮助。
  1. 增强自定义 Hooks 的可用性:如果你创建了一个自定义 Hook 并计划与团队或社区共享,使用 useDebugValue 可以使其他开发者更容易地理解和调试使用了你的 Hook 的组件。
  1. 按需计算useDebugValue 可以接受一个格式化函数,这意味着你可以按需计算调试值,避免不必要的计算开销。

专栏资源

专栏博客地址:精读React Hooks
专栏演示站:React Hooks Demos
专栏源码仓库:👉Github - Source Code
国内镜像仓库:👉Gitee — Source Code
 
专栏文章列表:
 
精读React hooks(十六):一个为代码优雅而生的hook——use精读React hooks(十四):总有一天你会需要useId为你生成唯一id