关于react.js:React-Hooks之useDebugValue-代替consolelog来调试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》。