应用的性能表现是开发人员十分关心的。React 常见的评估方法有如下几种:
- react-addons-perf(React 15.x)
- React Developer Tools(React 16.5+)
- Chrome Performance
以上方法均只适用于开发环境下的 React
React-addons-perf
导入
import Perf from 'react-addons-perf' // ES6语法
var Perf = require('react-addons-perf') // ES5语法
API
获取测量
- start()
- stop()
- getLastMeasurements():获取最近一次测试结果
打印结果
下列方法使用返回的测量值 Perf.getLastMeasurements() 打印结果。
printInclusive()
打印花费的总时间。如果未传递任何参数,则printInclusive
默认为上一次记录的所有测量。这将在控制台中打印格式正确的表,如下所示:
printExclusive()
“排他”时间不包括安装组件所花费的时间:如调用componentWillMount
和componentDidMount
等。
在这里插入图片描述
printWasted()
“浪费”的时间花费在实际上没有渲染任何东西的组件上,例如,渲染保持不变,因此DOM没有被触及。
printOperations()
打印底层的DOM操作
使用
通过 start() 和 stop() 去包裹代码,通过 getLastMeasurements()
去获取测试结果
import Perf from 'react-addons-perf' // ES6语法
Perf.start()
// 目标代码
Perf.stop()
var measurements = Perf.getLastMeasurements();
console.log("@@@@getLastMeasurements", measurements);
console.log("@@@@printInclusive", Perf.printInclusive(measurements));
console.log("@@@@printExclusive", Perf.printExclusive(measurements));
console.log("@@@@printWasted", Perf.printWasted(measurements));
console.log("@@@@printOperations", Perf.printOperations(measurements));
React Developer Tools
- 安装 React 的谷歌开发插件
- 打开控制台就可以点击 Profiler 就可录制 React 应用的工作表现,结果展示会根据耗时情况由大到小排列。
Chrome Performance
在 Chrome 开发模式下,你可以通过支持的浏览器可视化地了解组件是如何挂载、更新以及卸载的。例如:
在 Chrome 中进行如下操作:
- 临时禁用所有的 Chrome 扩展,尤其是 React 开发者工具。他们会严重干扰度量结果!
- 确保你是在 React 的开发模式下运行应用。
- 打开 Chrome 开发者工具的 Performance 标签并按下 Record。
- 对你想分析的行为进行复现。尽量在 20 秒内完成以避免 Chrome 卡住。
- 停止记录。
- 在 User Timing 标签下会显示 React 归类好的事件。