useDebugValue

useDebugValue 是一个 React Hook，它允许您在 React 开发者工具中为自定义 Hook 添加标签。

useDebugValue(value, format?)

参考
- useDebugValue(value, format?)
用法
- 为自定义 Hook 添加标签
- 延迟格式化调试值

参考

`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: "在线"

A screenshot of React DevTools showing the debug value

如果没有调用 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()。

上一页useContext

下一页useDeferredValue