react-addons-perf 性能优化工具使用

首先安装插件

npm install react-addons-perf –save-dev

webpack.config.js

require('react-addons-perf');
loaders:[
     {
test: require.resolve("react-addons-perf"),
loader: "expose-loader?Perf"
     }
    ]

在组件中
点击删除时触发的函数

delHandle(index){
   Perf.start();
   let list = this.state.list;
list.splice(index,1);  //splice方法的使用
this.setState();   //触发重新渲染，让list 的编辑效果在点击会车后，立即变成文本形式
 }

  componentDidUpdate(){
    Perf.stop();
    var measurements = Perf.getLastMeasurements()
    Perf.printInclusive(measurements);
    Perf.printExclusive(measurements);
    Perf.printWasted(measurements);
    Perf.printOperations(measurements);
    // Perf.printDOM(measurements)
  }

具体函数

Perf.start()
Perf.stop()
Perf.getLastMeasurements()
Perf.printInclusive(measurements)
Perf.printExclusive(measurements)
Perf.printWasted(measurements)
Perf.printOperations(measurements)