React Hooks之useDebugValue - 代替console.log来调试Hook

适用范围

useDebugValue适用于：调试（输出）自定义Hook中用到的状态值。

大家通常使用console.log来输出一些中间变量，并在浏览器的console面板中查看。

而useDebugValue的优势在于，用useDebugValue输出的值，是和DevTools中的Hook状态一起动态显示的，不需要在DevTools和Console面板中切换查看Hook状态和console.log输出。

示例

比如下图的RunJS编辑器界面，左侧的css/js编辑器，都可以上下拖动，其高度比例在每次拖动开始时（onDragStart），需要临时做一下存储（设为current变量）。

其实现过程用到一个自定义的useEditorHeight的Hook，拖动过程中会改变current的值。当我给useEditorHeight添加以下代码：

function useEditorHeight() {
  const [current, setCurrent] = {html: 1/3, css: 1/3, js: 1/3}
  // onDragStart，更新current
  useEditorHeight(current)
}

此时，临时变量（current），就会和其他State一起，显式地以DebugValue为名称，显示在DevTools面板中。而其他变量，都是统一以State/Effect来命名。当Hook中的变量较多时，不一定容易分辨出哪一个变量是你关心的。

总结

可见，useDebugValue的作用是，将你需要关心的变量动态地与其他同域变量一起显示在DevTools面板中，其体验，明显优于console.log。

拓展

本文章来自《重学React》。