Reactjs Dev工具中的钩子编号对应什么?

cer*_*vin 167 reactjs react-devtools

我有一个 React.js 应用程序,我想对其进行性能问题分析。

我在 Firefox 中使用 React 开发工具分析器。

我分析了特定的交互并在开发工具中获取火焰图和排名时间图。

然后这条消息出现在开发工具中:

在此输入图像描述

开发工具的这一部分不是交互式的,我找不到有关钩子如何编号的任何信息。

我如何解释这些数字?它们对应什么?我在哪里可以找到有关它们所指的钩子的信息?

die*_*edu 265

这是他们添加这一壮举的公关。由于一些性能限制,他们没有提供更好的用户界面。但是,如果您转到开发工具中的组件选项卡并检查所述组件,您可以找到这些索引对应的挂钩;在钩子部分,您将有一棵被调用钩子的树,对于每个钩子,左侧都有一个小数字,即索引。您可能需要展开钩子树才能找到它们。

这是链接 PR 的屏幕截图

在此输入图像描述

  • 例如,当它显示“Reducer:12”时,我如何找出reducer 12是什么? (12认同)
  • 我试图遵循这个建议…不幸的是,钩子不存在,我应该搜索钩子 18,但最大钩子是 15,即使在展开所有内容之后…我在这里创建了一个问题 /sf/ 76313295/reactjs-dev-tool-hook-number-不存在 (4认同)