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

Question

I was looking at react profiler which seems a really nice tool. Have a look at these two screens:

and

What confuses me is following. Look at the width of the div from first screenshot on which the left top corner of the tooltip starts (which says in total that component took 17.7 ms to render), now look at width of the Row on second screenshot (tooltip of which says in total that component took 12.9 ms to render). Why is the width of Row larger than the width of div left to it? When div in total took more time to render? According to the docs, should not it be other way around? Am I missing something?

Answer 1

Each bar in the flame graph needs to be wide enough to contain all of its children- even the ones that weren't even rendered in the current commit (the gray subtree starting with TextField in your screenshot above). that's why Row is wider than div . The width of each node gives you some idea of what the overall cost of that subtree would be if it were all to be rendered. In this case, and most cases, color is the more important bit of information .

This note in the React Profiler docs mentions the distinction between color and width:

The width of a bar indicates how long it took to render the component (and its children) when they last rendered . If the component did not re-render as part of this commit, the time represents a previous render. The wider a component is, the longer it took to render.

The color of a bar indicates how long the component (and its children) took to render in the selected commit. Yellow components took more time, blue components took less time, and gray components did not render at all during this commit.

The key part of the note about is "when they last rendered".

Hope this helps clear up the confusion.