react Performance Tools 入门

参考文档：https://facebook.github.io/react/docs/perf.html

1.安装并引入
npm install react-addons-perf
import Perf from ‘react-addons-perf’

2.监控

   Perf.start()
xxxx页面代码逻辑
   Perf.stop()

3.打印结果

// 获取监控结果
var measure = Perf.getLastMeasurements();
// 打印总时间
Perf.printInclusive(measure);
// 打印独占时间（不包括组件挂载时间）
Perf.printExclusive(measure);
// 打印浪费的时间（最有用的函数，例如render 了但是DOM没有变化）
Perf.printWasted(measure);
//操作真实dom的情况
Perf.printOperations(measure);


DEMO：点击按钮，数量加1 ，但是奇数的时候，数字不变（模拟wastTime）


import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import Perf from 'react-addons-perf' // ES6
class AddBtn extends Component {
constructor(props) {
super(props)
this.state = {
count: 1
}
}
add() {
if (this.state.count == 1) {
Perf.start()
}
if (this.state.count == 10) {
Perf.stop();
var measure = Perf.getLastMeasurements();
Perf.printInclusive(measure);
Perf.printExclusive(measure);
Perf.printWasted(measure);
Perf.printOperations(measure);
}
var nowCount = this.state.count;
this.setState({
count: nowCount + 1
})
}
render() {
let text = this.state.count;
if (this.state.count % 2) {
text = this.state.count - 1;
}
return <div>
{text}
<div onClick={this.add.bind(this)}>点击我添加数字</div>
</div>
}
}
ReactDOM.render(
(
<div>
<AddBtn />
</div>
)
, document.getElementById('J_contentContainer'))