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 />;
}

输出

示例 - 计数器应用程序

因此，我们可以添加 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;

输出

注意