react性能优化

react 官方给出了一个检测优化的方案，使用react-addons-perf
直接npm install react-addons-perf --save

现在在代码中这么引用

import Perf from 'react-addons-perf'
if(__DEV__){
  window.Perf=Perf
}

然后在控制台使用

perf.star()
perf.stop()
perf.printWasted()

进行检测。

image.png

image.png

image.png

image.png

his.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);

这句话是一个起一个性能优化的作用，如果没有这句话，this.shouldComponentUpdate会永远返回一个true，那么这个函数就没意思，没有起到优化的作用

尽量每个组件都使用PureRenderMixin

immutable.js优化

image.png

image.png