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'))