原文作者：Brian Vaughn

译者：UC 国际研发 PPP

---

React 16.5 新增了对开发工具（DevTools）性能分析插件（profiler plugin）的支持。该插件通过 React Profiler API（实验中）收集每个组件渲染的耗时，用于分析识别出 React 应用中的性能瓶颈。它与我们即将推出的 time slicing 和 suspense 这两个功能将完全兼容。

使用性能分析插件

DevTools 将为支持 Profiler API 的应用展示“Profiler”选项卡：

注意：react-dom 16.5+ 在 DEV 模式下默认支持性能分析。如果生产包需要支持可以用 react-dom/profiling。 可以在 fb.me/react-profiling 中了解有关如何使用该包的更多信息。

“Profiler”面板默认打开是空的。单击“录制”按钮开始录制：

一旦开始录制，DevTools 将在每次应用渲染时自动收集性能信息。然后正常使用你的应用。单击“停止”按钮停止录制并分析。

假设你的应用在分析过程中至少渲染过一次，那么 DevTools 将通过多种方式为你展现性能数据。我们将在下面一一说明。

查看性能报告

Commits(提交)报告

理论上，React 的工作分为两个阶段：

• render（渲染）阶段，将决定是否需要更新 DOM。此时 React 调用render函数，然后将本次 render 函数的结果与上一次的结果进行比较。
• commit（提交）阶段，当 React 做出更新 DOM 的操作（DOM 节点的增加，删除，修改等）时，此阶段还会调用componentDidMount，componentDidUpdate等与生命周期相关的函数。

译者注：可阅读 React virtual DOM 相关资料

DevTools Profiler 通过“commits(提交)”对性能信息进行分组。commits (提交) 显示在 Profiler 顶部附近的条形图中：

图表中的每个竖条表示一次 commit(提交)，当前选中的 commit(提交)颜色为黑色。可以通过单击竖条（或左/右箭头按钮）来选择其它的commit (提交)。

每个竖条的颜色和高度对应了本次 commit(提交)的渲染所需的时间（较高的黄色竖条比较短的蓝色竖条耗时更长）。

过滤 Commits
录制的时间越长，应用 render 的次数就越多。有时候你可能会记录很多次的 commits。为了能让分析起来更方便，Profiler 提供了过滤功能。可以通过设定一个阈值，让 Profiler 隐藏所有比该值小的 commits。

火焰图
火焰图表示某次特定 commits 对应的应用的状态。图中的每个横条代表一个 React 的组件（例如 App，Nav）。横条的大小和颜色表示渲染组件及其子组件所需的时间。（横条的宽度表示组件最后一次渲染时花费的时间，颜色表示作为本次 commit 的一部分所花费的时间。）

注意：

横条的宽度表示在最后一次渲染时渲染组件（及其子组件）所需的时间。如果组件未作为此次 commit 的一部分重新更新，则表示先前的时间。组件越宽，渲染耗时越长。

横条的颜色表示组件（及其子组件）在所选 commit 中渲染的耗时。黄色的组件耗时更多，蓝色的组件耗时较少，灰色组件表示在本次 commit 期间不需要渲染。

例如，上面显示的 commit 总共需要 18.4 毫秒进行渲染。该 Router 组件的渲染耗时是最多的（耗时 18.4 毫秒）。其中大部分时间消耗在它的两个子组件，Nav（8.4ms）和 Route（7.9ms）上。剩下的时间消耗在剩余的子节点，或者在它自己的渲染方法中。

你可以通过单击组件放大或缩小火焰图：

点选组件时，在右侧面板中还会显示其 props 和 state 在 commit 时的信息。你可以了解更详细的信息，帮你更好的分析组件在 commit 期间实际呈现的内容：

通常，在切换不同的 commit 时，右侧面板还会对触发本次 commit 的属性高亮显示：

上图显示了 state.scrollOffset 在两次 commits 之间的变化。这可能是导致 List 组件重新渲染的原因。

排序图
排序图用于分析单次的 commit。图表中的每个横条代表一个 React 组件（例如App，Nav）。对渲染耗时进行了降序排序。

注意：

组件的渲染的耗时包括渲染其子组件所花费的时间，因此这类组件通常排在图标的顶部。

与火焰图一样，你可以通过单击组件来放大或缩小。

组件图
有时，可能需要查看某个特定组件在本次分析中一共渲染了多少次。组件图以柱状图的的形式呈现这个信息。图表中的每个竖条展示了组件每次渲染的耗时。颜色和高度表示组件相对于本次 commit 中的其他组件渲染的时间。

上图显示该 List 组件渲染了 11 次。它还表明，每次渲染时，它都是 commits 中最“昂贵”的组件（意味着它的耗时最长）。

要查看某次渲染的详细情况，可以双击组件或选择组件，然后单击右侧详细信息窗格中的蓝色条形图图标。并可以通过单击右侧详细信息窗格中的“x”按钮返回。双击详细中的内容可以查看有关本次 commit 的更多信息。

如果在本次分析会话期间所选组件根本未呈现，则将显示以下消息：

Interactions（理解为触发更新的动作）
React 最近添加了另一个用于记录触发更新动作的API(实验中)。使用此 API 记录的 interactions 也将显示在 Profiler 中：

上图显示了在一个分析会话中记录的四个 interactions。每行代表一次 interaction。每行中的彩色圆点代表着与该 interaction 相关的 commit。

你还可以从火焰图和排名图中查看为某次 commit 记录的 interaction：

你可以通过单击它们，在 interaction 和 commits 之间互相切换：

这是一个新的 API，我们将在以后的博客文章中更详细地介绍它。

故障排除

选中的 root 节点没有分析数据
如果你的应用有多个 root 节点，那么在分析时可能会看到以下界面：

此消息表示选中的 root 节点没有分析数据。在这种情况下，尝试在该面板中选择不同的 root 节点以查看该 root 节点的分析信息：

选中的 commit 没有显示计时数据
有时可能会因为 commits 太快，以至于 performance.now() 还没有把相关有意义的时序信息传递给 DevTools。在这种情况下，将显示以下界面：

英文原文：

https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html