ReactJS - useDebugValue Hook

useDebugValue hook 是一个 React 工具，可在 React DevTools 中显示自定义 hook 的自定义标签和值。这对于调试和提供有关我们自己的 hook 的更多信息非常方便。

语法

useDebugValue(value, formatFn);

参数

value − 这是我们想要显示的值。它可以是任何 JavaScript 值，如文本、整数或对象，也可以是函数。
formatFn − 这是一个将值作为参数并返回表示项目标签或描述的字符串的函数。我们还可以向值添加自定义标签。

返回值

Hooks(钩子)"useDebugValue"不返回任何内容。

参考

要显示可读的调试值，我们可以在自定义Hooks(钩子)的顶层调用"useDebugValue" −

import { useDebugValue, useState } from 'react';
function useCounter() {
   const [count, setCount] = useState(0);
   
   // 显示计数和状态消息
   useDebugValue(count, (count) => `Count: ${count}, Status: ${count === 0 ? 'Empty' : 'Not Empty'}`);
   
   const increment = () => setCount(count + 1);
   const decrement = () => setCount(count - 1);
   return { count, increment, decrement };
}

示例

我们可以通过两种不同的方式使用此Hooks(钩子)。首先，我们可以通过向自定义Hooks(钩子)添加标签来使用它，其次，我们可以通过推迟调试值的格式化来使用它。所以我们将逐一看到这两个选项。

示例 − 向自定义Hooks(钩子)添加标签

要显示可读的调试值，我们将在自定义Hooks(钩子)的顶层调用 useDebugValue。

import { useDebugValue } from 'react';

function signInStatus() {
   // ...  
   useDebugValue(isSignIn ? 'SignIn' : 'Signout');
}

在此示例中，我们将根据用户的身份验证状态使用 useDebugValue Hooks(钩子)显示自定义标签。

useAuthStatus.js

import { useDebugValue } from "react";

export function useAuthStatus() {
   const isAuthenticated = checkAuthentication();
   
   // 使用 useDebugValue hook
   useDebugValue(isAuthenticated ? "Authenticated" : "Not Authenticated");
   
   return isAuthenticated;
}
function checkAuthentication() {
    // 检查用户的身份验证状态
    return Math.random() < 0.5; // 身份验证状态将为 False
    // return Math.random() > 0.5; // 身份验证状态将为 True
}

App.js

 import { useAuthStatus } from "./useAuthStatus.js";

function AuthStatusComponent() {
   const isAuthenticated = useAuthStatus();   
   return (
      <div>
         <h1>{isAuthenticated ? "Authenticated" : "Not Authenticated"}</h1>
      </div>
   );
}

export default function App() {
   return <AuthStatusComponent />;
}

输出

示例 − 推迟调试值格式化

作为 useDebugValue Hooks(钩子)的第二个参数，我们还可以指定格式化函数。

以下示例中的 useDateValue 自定义Hooks(钩子)将 useDebugValue Hooks(钩子)与 formatDateString 格式化方法相结合。这样就无需在每次渲染时对 Date 变量使用 toDateString()。这种技术使代码更高效。由于 useDebugValue Hooks(钩子)的存在，只有在检查组件时才会调用 formatDateString 方法。

useDateValue.js

import { useDebugValue } from 'react';

export function useDateValue(date) {
    // 定义格式化日期值的格式化函数
    const formatDateString = (date) => date.toDateString();
    
    // 将 useDebugValue Hooks(钩子)与格式化函数一起使用
    useDebugValue(date, formatDateString);
    return date;
}

App.js

import { useDateValue } from './useDateValue.js';

function DateComponent() {
   const currentDate = useDateValue(new Date());   
   return (
      <div>
         <h1>Current Date: {currentDate.toDateString()}</h1>
      </div>
   );
}

export default function App() {
   return <DateComponent />;
}

输出

当前日期:2023 年 10 月 11 日星期三

示例 − 计数器应用

因此，我们可以添加 useDebugValue 以在调试时以更具信息量的方式显示计数。 useDebugValue Hooks(钩子)可用于在调试期间提供有关自定义Hooks(钩子)或组件的值的其他信息。

import React, { useState, useDebugValue } from 'react';

function App() {
   const [count, setCount] = useState(0);   
   const increment = () => {
      setCount(count + 1);
   };   
   const decrement = () => {
      setCount(count - 1);
   };
   
   // 以更具信息量的方式显示计数值，以便于调试
   useDebugValue(`Count: ${count}`);
   
   return (
      <div>
         <h1>Counter App</h1>
         <p>Count: {count}</p>
         <button onClick={increment}>Increment</button>
         <button onClick={decrement}>Decrement</button>
      </div>
   );
}
export default App;