通常来讲，React已经很快了，但是呢它也常常会有一些小错误会导致性能方面的问题。慢速组件安装，深层组件树和不必要的渲染循环都可能导致你的app变得很慢。
呐，天无绝人之路，有很多工具包括React中内置的工具都可以帮助解决性能方面的问题。在这篇文章中，我会为大家介绍几款工具和技术。每个部分还有一个互动的，（我希望是）有趣的演示！
工具＃1：性能时间表
React 15.4.0引入了一个新的性能时间轴功能，可以让你准确了解组件的挂载，更新和卸载。它还可以让你可视化相关的组件生命周期。
注意：现在，此功能仅适用于Chrome，Edge和IE，因为它利用了尚未在所有浏览器中实施的User Timing API。
怎么运行的
- 打开你的应用程序并附加查询参数：react_perf。例如，http://localhost:3000?react_perf
- 打开Chrome DevTools Performance选项卡，然后按Record。
- 执行你要分析的操作。
- 停止录音
- 在User Timing下检查可视化。
理解输出
每个彩色条显示组件正在做“运行”的时间。由于JavaScript是单线程的，每当组件正在加载或呈现时，它会阻止主线程，并阻止其他代码运行。
括号中的文字[update]描述了组件生命周期的哪个部分正在发生。时间轴会分解每一步，因此你可以在[componentDidMount] [componentWillReceiveProps] [ctor]（构造函数）和（）方法上看到细粒度的时序[render].
堆叠的条表示组件树。虽然在React中具有相当深的组件树是一件很典型的事情，但如果要优化经常安装的组件，则可以帮助减少包装器组件的数量，因为每个组件都会增加小的性能和内存损失。
这里需要注意的一点是，时间表中的timeline是用于开发构建“React”的，它比产品慢得多。事实上，性能时间表本身就会减慢你的应用程序。虽然这些数字不能代表真实时间，但是不同组件之间的相对定时是准确的。此外，组件是否更新完全不依赖于prod构建。
演示＃1
为了让你能够操作一下，我操纵了TodoMVC应用程序，出现了一些严重的性能问题。你可以在这里尝试一下。
要查看timeline，请打开Chrome开发工具，转到“Performance”选项卡，然后单击记录。然后在应用程序中添加一些TODO，停止录制并检查时间轴。看看是否可以发现哪些组件导致性能问题:)
工具＃2：为什么没有更新
影响React中性能的最常见问题之一是不必要的渲染循环。默认情况下，React组件将在父级呈现时重新呈现，即使他们的props没有改变。
例如，我有一个这样的简单组件：
class DumbComponent extends Component {
render() {
return <div> {this.props.value} </div>;
}
}
使用父组件：
class Parent extends Component {
render() {
return <div>
<DumbComponent value={3} />
</div>;
}
}
无论何时父组件呈现，DumbComponent将重新呈现，尽管其props没有更改。
通常，如果render运行，并且没有对虚拟DOM的更改，那么这是一个浪费的渲染循环，因为该render方法应该是纯的，并且没有任何副作用。在一个大规模的React应用程序中，检测发生这种情况的地方可能很棘手，但幸运的是，有一个可以帮助的工具！
使用 why-did-you-update
why-did-you-update是一个库，它挂钩到React并可以检测到潜在不必要的组件渲染。它检测组件的render方法何时被调用，尽管它的props没有改变。
建立
1.安装npm： npm i --save-dev why-did-you-update
2.在你的应用程式中的任何位置新增这个片段：
更多请详见这里：http://www.igeekbar.com/igeekbar/post/262.htm