当海风翻页时

它只影响调试面板#

1
import { useSyncExternalStore, useDebugValue } from 'react'
2

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

在 React DevTools 里展开用到它的组件，会看到 OnlineStatus: "Online" 这一行。不写这句，那里显示的是底层的 true，得自己猜它是什么意思。

它不改变组件行为，也没有返回值。

第二个参数把格式化推后#

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

格式化函数只在你在 DevTools 里查看这个组件时才被调用，入参是第一个参数。这样 toDateString() 不会每次渲染都跑一遍。

官方不建议每个 Hook 都加#

官方原话是：不要给每个自定义 Hook 都加调试值。它最能帮上忙的地方是共享库里的 Hook，以及内部结构复杂、直接看很难看懂的那些。

业务里只包了一层 useState 的简单 Hook 加它，只会让面板变成噪音。

几条边界#

它只在自定义 Hook 的顶层调用。写在普通组件里不会报错，但也没有效果。

别把密码、token 之类的值放进去，调试面板会原样显示。

别拿它的值做逻辑判断。它只负责显示，不参与渲染。

格式化函数的入参是第一个参数，不是这个 Hook 的返回值，别接错。