API 参考
Hook

useDebugValue

useDebugValue 是一个 React Hook，可以让你在 React 开发工具 中为自定义 Hook 添加标签。

useDebugValue(value, format?)

参考

useDebugValue(value, format?)

在你的 自定义 Hook 的顶层调用 useDebugValue，以显示可读的调试值：

import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}

请看下方更多示例。

参数

  • value：你想在 React 开发工具中显示的值。可以是任何类型。
  • 可选 format：它接受一个格式化函数。当组件被检查时，React 开发工具将用 value 作为参数来调用格式化函数，然后显示返回的格式化值（可以是任何类型）。如果不指定格式化函数，则会显示 value。

返回值

useDebugValue 没有返回值。

用法

为自定义 Hook 添加标签

在 自定义 Hook 中调用 useDebugValue，可以让 React 开发工具 显示可读的 调试值。

import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}

这样一来，当你检查调用 useOnlineStatus 的组件时，它们会显示一个标签，例如 OnlineStatus: "Online"。

在 React 开发工具中显示调试值的截图

如果没有使用 useDebugValue，则只会显示底层数据（在此示例中为 true）。

import { useSyncExternalStore, useDebugValue } from 'react';

export function useOnlineStatus() {
  const isOnline = useSyncExternalStore(subscribe, () => navigator.onLine, () => true);
  useDebugValue(isOnline ? 'Online' : 'Offline');
  return isOnline;
}

function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

注意

不必为每个自定义 Hook 添加调试值。这对于那些作为共享库一部分、具有复杂的内部数据结构并且难以检查的自定义 Hook 更有价值。

延迟格式化调试值

你也可以将一个格式化函数作为 useDebugValue 的第二个参数传入：

useDebugValue(date, date => date.toDateString());

格式化函数将接收 调试值 作为参数，返回 格式化后的显示值。当你的组件被检查时，React 开发工具将调用此函数并显示其返回值。

使用格式化函数，可以避免在组件没有被检查时运行可能开销较大的格式化逻辑。例如，如果 date 是一个日期值，则可以避免在每次渲染时都调用 toDateString() 方法。

PrevioususeContext
NextuseDeferredValue