useDebugValue

useDebugValue 是一个 React Hook，它允许你在 React DevTools 中为自定义 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 DevTools 中显示的值。它可以是任何类型。
可选 format：格式化函数。当组件被检查时，React DevTools 将使用 value 作为参数调用格式化函数，然后显示返回的格式化值（可以是任何类型）。如果你没有指定格式化函数，则会显示原始 value 本身。

返回值

useDebugValue 不返回任何值。

用法

为自定义 Hook 添加标签

在自定义 Hook 的顶层调用 useDebugValue 以显示可读的调试值，用于自定义 Hook 的 React 开发者工具。

import { useDebugValue } from 'react';

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

这使得调用 useOnlineStatus 的组件在检查时显示类似 OnlineStatus: "Online" 的标签。

A screenshot of React DevTools showing the debug value

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

Fork

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 是一个 Date 值，则这避免了在每次渲染时都调用 toDateString()。

上一页useContext

下一页useDeferredValue