性能檢測工具

安裝react性能檢測工具:

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

然后在./app/index.js中加入?yún)?shù):

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

• 運(yùn)行程序,在操作之前在console中先運(yùn)行Perf.start()開始檢測;
• 然后進(jìn)行若干操作，運(yùn)行Perf.stop停止檢測，
• 然后再運(yùn)行Perf.printWasted()即可打印出浪費(fèi)性能的組件列表。
  在項目開發(fā)過程中，要經(jīng)常使用檢測工具來看看性能
  是否正常。如果性能的影響不是很大，例如每次操作多浪費(fèi)幾毫秒、十幾毫秒，個人以為沒必要深究，但是如果浪費(fèi)過多影響了用戶體驗，就必須去搞定它。

優(yōu)化方法

推薦使用官方的優(yōu)化方法：
優(yōu)化shouldComponentUpdate,使用官網(wǎng)的優(yōu)化插件 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;
    }
    ....
}

每個組件都可以這樣寫。