react性能优化

---

性能检测工具

安装react性能检测工具:

npm i react-addons-perf --save-dev

然后在./app/index.js中加入参数:

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

• 运行程序,在操作之前在console中先运行Perf.start()开始检测;
• 然后进行若干操作，运行Perf.stop停止检测，
• 然后再运行Perf.printWasted()即可打印出浪费性能的组件列表。
  在项目开发过程中，要经常使用检测工具来看看性能
  是否正常。如果性能的影响不是很大，例如每次操作多浪费几毫秒、十几毫秒，个人以为没必要深究，但是如果浪费过多影响了用户体验，就必须去搞定它。

优化方法

推荐使用官方的优化方法：
优化shouldComponentUpdate,使用官网的优化插件 react-addons-pure-render-mixin

安装：npm i -save react-addons-pure-render-mixin;
使用:

import PureRenderMixin from 'react-addons-pure-render-mixin';
class XXX extends Compoennt{
    constructor(props, context){
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate;
    }
    ....
}

每个组件都可以这样写。