API 参考
Hooks

useDebugValue

useDebugValue 是一个 React Hook，它让你可以在 React DevTools. 中为自定义 Hook 添加一个标签

useDebugValue(value, format?)

Reference

useDebugValue(value, format?)

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

import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? '在线' : '离线');
  // ...
}

查看更多示例。

Parameters

  • value：你想在 React DevTools 中显示的值。它可以是任意类型。
  • 可选 format：一个格式化函数。当组件被检查时，React DevTools 会以 value 作为参数调用该格式化函数，然后显示返回的格式化值（该值也可以是任意类型）。如果你不指定格式化函数，则会直接显示原始的 value。

Returns

useDebugValue 不返回任何内容。

Usage

为自定义 Hook 添加标签

在你的 自定义 Hook 的顶层调用 useDebugValue，为 React DevTools. 显示一个可读的 调试值

import { useDebugValue } from 'react';

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

当你检查这些组件时，这会给调用 useOnlineStatus 的组件显示一个类似 OnlineStatus: "Online" 的标签：

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

Note

不要给每个自定义 Hook 都添加调试值。它对共享库中的自定义 Hook 最有价值，尤其是那些具有复杂内部数据结构、难以检查的 Hook。

延迟格式化调试值

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

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

你的格式化函数将接收 调试值 作为参数，并且应该返回一个 格式化后的显示值。当组件被检查时，React DevTools 会调用这个函数并显示其结果。

这样你就可以避免运行可能代价高昂的格式化逻辑，除非组件真的被检查。例如，如果 date 是一个 Date 值，这样可以避免在每次渲染时都对它调用 toDateString()。

PrevioususeContext
NextuseDeferredValue