ReactJS - useDebugValue 钩子

---

---

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

语法

useDebugValue(value, formatFn);

参数

• value − 这是我们想要显示的值。它可以是任何 JavaScript 值，例如文本、整数或对象，也可以是函数。

• formatFn − 这是一个函数，它接收一个值作为参数，并返回一个表示项目标签或描述的字符串。我们还可以向值添加自定义标签。

返回值

钩子 'useDebugValue' 不返回任何值。

参考

为了显示可读的调试值，我们可以在自定义 Hook 的顶层调用 'useDebugValue' −

import { useDebugValue, useState } from 'react';
function useCounter() {
   const [count, setCount] = useState(0);
   
   // Display the count and a status message
   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 };
}

示例

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

示例 - 向自定义 Hook 添加标签

为了显示可读的调试值，我们将在自定义 Hook 的顶层调用 useDebugValue。

import { useDebugValue } from 'react';

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

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

useAuthStatus.js

import { useDebugValue } from "react";

export function useAuthStatus() {
   const isAuthenticated = checkAuthentication();
   
   // Use the useDebugValue hook
   useDebugValue(isAuthenticated ? "Authenticated" : "Not Authenticated");
   
   return isAuthenticated;
}
function checkAuthentication() {
   // Checking authentication status of the user
   return Math.random() < 0.5; // Authentication status will be False
   // return Math.random() > 0.5; // Authentication status will be 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 钩子的第二个参数，我们还可以指定一个格式化函数。

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

useDateValue.js

import { useDebugValue } from 'react';

export function useDateValue(date) {
   // Define a formatting function that formats the Date value
   const formatDateString = (date) => date.toDateString();
   
   // Use the useDebugValue hook with the formatting function
   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 />;
}

输出

Current Date: Wed Oct 11 2023

示例 - 计数器应用

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

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

function App() {
   const [count, setCount] = useState(0);   
   const increment = () => {
      setCount(count + 1);
   };   
   const decrement = () => {
      setCount(count - 1);
   };
   
   // Display the count value in a more informative way for debugging
   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;

输出

注意

useDebugValue 钩子是帮助开发人员理解和调试自身代码的有用工具。但是，务必谨慎使用它并了解其局限性。它是我们工具箱中的一个工具，我们应该谨慎使用它以避免问题并使我们的代码更易于处理。