ReactJS – useDebugValue钩子

在本文中,我们将看到如何使用ReactJS中的useDebugValue钩子来调试自定义钩子。

该挂钩为自定义挂钩提供了自定义标签,从而使调试过程更加轻松有效。仅在启用React Developer工具时调用它。

语法

useDebugValue(value,()=>{})

参数

  • -自定义挂钩的标签。

  • ()=> {} -格式化标签的功能。

示例

在此示例中,我们将构建一个React应用程序,该应用程序显示React应用程序的自定义钩子的自定义标签。

App.jsx

function useCustomHook(val) {
   const [value, setValue] = useState(null);
   useDebugValue(value ? Not Empty : Empty);
   return value;
}
输出结果

它会在React开发人员工具的useCustomHook旁边显示标签。例如,如果值状态为“空”,则标签的值为“空”。