适用范围useDebugValue适用于：调试（输出）自定义Hook中使用的状态值。您通常使用console.log输出一些中间变量，并在浏览器的控制台面板中查看它们。useDebugValue的好处在于，useDebugValue输出的值在DevTools中是和Hook状态一起动态显示的，不需要在DevTools和Console面板中切换查看Hook状态和console.log输出。比如下图的RunJS编辑器界面和左边的css/js编辑器可以上下拖动，每次拖动开始时需要暂存高度比例（设置为当前变量）（onDragStart）。.实现过程使用了自定义的useEditorHeightHook，在拖动过程中会改变当前值。当我将以下代码添加到useEditorHeight时：functionuseEditorHeight(){const[current,setCurrent]={html:1/3,css:1/3,js:1/3}//onDragStart,updatecurrentuseEditorHeight(current)这个时候，临时变量（current）会和其他状态一起显示在DevTools面板中，名称为DebugValue。其他变量统一以State/Effect命名。当Hook中的变量很多时，可能不太容易分辨出你关心的是哪个变量。综上所述，useDebugValue的作用是将你需要关心的变量和同域的其他变量一起动态显示在DevTools面板中，其体验明显优于console.log。展开本文来自《重学React》。
