条形宽度在反应分析器中没有意义

Question

我在看反应分析器，这似乎是一个非常好的工具。 看看这两个屏幕：

和

让我感到困惑的是以下。 从工具提示的左上角开始的第一个屏幕截图中查看div的宽度（这表明该组件总共花费了 17.7 毫秒来渲染），现在查看第二个屏幕截图上Row的宽度（其中的工具提示在该组件总共花费了 12.9 毫秒来渲染）。 为什么Row的宽度大于div左边的宽度？ 什么时候div总共需要更多时间来渲染？ 根据文档，不应该是其他方式吗？ 我错过了什么吗？

Answer 1

火焰图中的每个条都需要足够宽以包含它的所有子项——甚至是那些甚至没有在当前提交中呈现的子项（上面屏幕截图中以TextField开头的灰色子树）。 这就是为什么Row比div更宽。 每个节点的宽度让您了解如果全部渲染该子树的总成本是多少。 在这种情况下，以及大多数情况下，颜色是更重要的信息。

React Profiler 文档中的这个注释提到了颜色和宽度之间的区别：

条的宽度表示在组件（及其子组件）最后一次渲染时渲染它们所用的时间。 如果组件没有作为此提交的一部分重新渲染，则时间表示先前的渲染。 组件越宽，渲染时间越长。

条形图的颜色表示组件（及其子组件）在所选提交中呈现的时间。 黄色组件花费更多时间，蓝色组件花费更少时间，而灰色组件在此提交期间根本没有渲染。

关于注释的关键部分是“它们上次渲染的时间”。

希望这有助于消除混乱。