关于react性能优化的一些技巧（持续更新）

react组件渲染性能监控

在进行性能优化前，我们先来了解如何对React组件渲染性能进行监控。React官方提供了Performance Tools，其使用起来也很简单，通过Perf.start启动一次性能分析，并通过Perf.stop结束一次性能分析。

import Perf from 'react-addons-perf'
Perf.start();
....your react code
Perf.stop();

调用Perf.stop后，我们就可以通过Perf提供的API来获取本次性能分析的数据指标。其中最有用的API是

Perf.printWasted()

，其结果给出你在哪些组件上进行了无意义的(没有引起真实DOM的改变)虚拟DOM比较，比如如下结果表明我们在TodoItem组件上浪费了4ms进行无意义的虚拟DOM比较，我们可以从这里入手，进行性能优化。

而

Perf.printInclusive()

的结果则给出渲染各个组件的总体时间，通过它的结果我们可以找出哪个组件是页面渲染的性能瓶颈。

和

Perf.printInclusive()

相似的API还有

Perf.printExclusive()

，只是其结果是组件渲染的独占时间，即不包括花费于加载组件的时间： 处理 props, getInitialState, 调用 componentWillMount 及 componentDidMount, 等等。

阅读更多