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)