第二章前置知识：2.10 useDebugValue 基础知识

Wandra
84 阅读2分钟

本专栏致力于每周分享一个项目，如果本文对你有帮助的话，欢迎点赞或者关注☘️

React18 源码系列会随着学习 React 源码的实时进度而实时更新：约，两天一小改，五天一大改。

useDebugValue是一个React Hook，允许您在React DevTools中添加标签(label)到自定义Hook

useDebugValue(value, format?)

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

import { useDebugValue } from 'react';

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

参数：

  • 值：您想要在React DevTools中显示的值。它可以有任何类型。
  • optionalformat：一个格式化函数。当组件被检查时，React DevTools将以值作为参数调用格式化函数，然后显示返回的格式化值（可以是任何类型）。如果不指定格式化函数，则将显示原始值本身。

return:

  • useDebugValue不返回任何内容。

使用

将标签(label)添加到自定义Hook

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

import { useDebugValue } from 'react';

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

这会在检查调用useOnlineStatus的组件时为它们提供一个类似OnlineStatus：“Online”的标签：

image.png

如果没有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);
  };
}

import { useOnlineStatus } from './useOnlineStatus.js';

function StatusBar() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}

export default function App() {
  return <StatusBar />;
}

不要为每个自定义Hook添加调试值(debug value)。它对于作为共享库的一部分的自定义Hooks最有价值，这些Hooks具有复杂的内部数据结构，难以检查。

延迟调试值（debug value）的格式设置

您也可以将格式化函数作为第二个参数传递给useDebugValue：

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

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

这使您可以避免运行潜在的昂贵的格式化逻辑，除非实际检查组件。例如，如果date是一个Date值，这将避免在每次渲染时对其调用toDateString（）。

参考链接

关于作者

作者：Wandra

内容：算法 | 趋势 ｜源码｜Vue | React | CSS | Typescript | Webpack | Vite | GithubAction | GraphQL | Uniqpp。

专栏：欢迎关注呀🌹

本专栏致力于每周分享一个项目，如果本文对你有帮助的话，欢迎点赞或者关注☘️

avatar
文章
阅读
粉丝