React DevTools中的hook编号对应什么？如何定位关联的hook？

编号规则 #

• 这些数字是React为单个组件内调用的Hook分配的顺序编号，从组件函数体第一行Hook调用开始，从0位开始递增计数，完全匹配你编写组件时的Hook调用顺序，和React要求的「Hook调用顺序不可变」规则对齐。

对应内容 #

• 编号直接对应组件内Hook的调用顺位：比如你的组件函数里Hook调用顺序为useState → useEffect → 自定义useRequest → useMemo，那么Hook 0对应第一个useState，Hook 1对应useEffect，Hook 2对应自定义useRequest，Hook 3对应useMemo。
• 注意自定义Hook内部嵌套的Hook不会占用外层组件的编号顺位，外层组件的编号仅统计直接写在组件函数体第一层的Hook调用。

定位对应Hook的方法 #

• 最直接的方式是打开对应组件的源码，从上往下数第一层的Hook调用，顺位和编号完全对应。
• 也可以在React DevTools的「组件树面板」选中该组件，右侧属性面板会按调用顺序列出所有Hook的类型、当前值，排序和Profiler里的编号完全一致，可直接一一匹配。
• 若你是在生产环境打包后的页面做采样，会因为缺少sourcemap导致Hook信息不全，建议在本地开发环境复现性能问题后再分析，能直接看到完整的Hook对应信息。

内容的提问来源于stack exchange，提问作者cervyvin