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变量)。

React Hooks之useDebugValue - 代替console.log来调试Hook_第1张图片

其实现过程用到一个自定义的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》

你可能感兴趣的