React DevTools性能分析提示的Hooks编号对应的含义是什么？

编号规则 #

React Dev Tools中的Hook编号完全遵循组件内Hook的调用顺序，从1开始递增计数：

• 组件函数中第一个调用的Hook（不管是useState/useEffect/自定义Hook等所有类型的Hook）编号为1，第二个为2，后续依次类推
• 自定义Hook内部调用的Hook不会占用父组件的编号序列，仅父组件作用域内直接调用的Hook会参与编号计数

定位对应Hook的方法 #

1. 首先在Profiler的火焰图/耗时排名图中点击触发意外重渲染的组件条目，会自动跳转至Components面板的该组件详情页
2. Components面板中展示的Hook列表就是按调用顺序排列的，列表的顺序和Profiler提示的编号一一对应，直接按序号数就能找到发生变更的Hook，查看其当前值和变更前的差值即可定位重渲染原因
3. 如果是生产环境打包后代码被压缩，Hook名显示异常，可本地启动Next.js开发服务，在开发模式下复现相同交互采样，开发环境下所有Hook名称不会被压缩，可直接匹配对应

快速验证技巧 #

如果需要快速确认Hook变更情况，可在目标组件内加入临时调试代码，按顺序打印Hook的依赖值变化：

// 示例：按顺序打印对应编号Hook的相关值，匹配你收到的1、7、15编号提示
useEffect(() => {
  console.log('Hook1值：', 第一个Hook的返回值)
  console.log('Hook7值：', 第七个Hook的返回值)
  console.log('Hook15值：', 第十五个Hook的返回值)
}, [/* 把对应Hook的返回值放入依赖数组 */])

内容的提问来源于stack exchange，提问作者Никита Пахомов