React DevTools 作为Chrome的扩展程序安装，安装之后重启浏览器，在 Chrome 开发者工具中将新增 Components 和 Profiler 这两个tabs，Components tab 会显示页面上 React 组件树，组件的 state、props 以及组件的源代码，使用 Profiler tab 能收集与性能相关的信息，本文主要介绍Profiler tab。
下面通过一个计数器组件演示 Profiler tab 的功能，它在浏览器中的呈现效果如下图所示：
Profiler tab的初始内容如下图
根据上图中的提示点击 start profiling 按钮开始性能审查，再在浏览器界面上进行操作，例如：减1或加1，操作结束后，在 start profiling 按钮相同的位置点击 stop profiling 按钮结束性能审查，这时 Profiler tab 会呈现审查过程中收集到的性能数据。
将组件显示在界面上 React 的工作分为 render 阶段和 commit 阶段，render 阶段用于确定需要做哪些变更，commit 阶段用于执行变更，如果在 render 阶段确定不需要有任何变更，那么就不会产生一个 commit。Profiler 只收集 commit 阶段的信息。在 commit 阶段要执行的变更不止 DOM 变更，还包括 componentDidMount 和 componentDidUpdate 等生命周期函数。下图是计数器组件点击一次【加1】按钮得到的性能数据。
为了方便描述，将上图中的内容进行分区，区域1展示在 commit 中被分析的所有组件，组件条形图的长度和颜色反映了执行组件及其子组件变更所消耗的时间。切换区域2中的Tab可以查看不同的统计视图。区域3显示收集到的 commit 概况，图3-3中一共有两次 commit。区域4显示某特定 commit 的信息，从上图可以看出第一个 commit 发生在点击 start profiling 之后1.3s的时候，它执行变更用了0.8ms。
在审查性能时只点击了一次【加1】按钮，却发生了两次 commit，这不合理。选中区域1的 ProfilerTab 组件，再切换到 Components tab，React DevTools 能自动定位到组件树中的ProfilerTab 组件，这时点击 Components tab 右上方的 View source for this element 按钮能查看 ProfilerTab 组件的源码。ProfilerTab 组件有如下一段代码：
componentDidUpdate(prevProps: {}, prevState: ProfilerTabState) {
if (prevState.count !== this.state.count) {
this.setState({
useless: Math.random()
})
}
}
上述代码在 componentDidUpdate 生命周期函数中判断 count 是否发生变化，如果是，则修改 useless 的值。查看 ProfilerTab 组件的完整代码可以发现组件使用 useless，所以应该将componentDidUpdate 删除，删除之后再做性能审查，得到的性能数据如下图所示：
上图显示点击一次【加1】按钮只有一次commit，本次commit执行ProfilerTab组件及其子组件的变更一共花了0.7ms，ProfilerTab组件本身花了0.4ms。
本文提到了 React 的 render 阶段和 commit 阶段，访问讲清楚 React 的重新渲染查看细节
本文正在参加「金石计划」
