React 性能评估工具

应用的性能表现是开发人员十分关心的。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

1. 安装 React 的谷歌开发插件
2. 打开控制台就可以点击 Profiler 就可录制 React 应用的工作表现，结果展示会根据耗时情况由大到小排列。
   

Chrome Performance

在 Chrome 开发模式下，你可以通过支持的浏览器可视化地了解组件是如何挂载、更新以及卸载的。例如：

在 Chrome 中进行如下操作：

1. 临时禁用所有的 Chrome 扩展，尤其是 React 开发者工具。他们会严重干扰度量结果！
2. 确保你是在 React 的开发模式下运行应用。
3. 打开 Chrome 开发者工具的 Performance 标签并按下 Record。
4. 对你想分析的行为进行复现。尽量在 20 秒内完成以避免 Chrome 卡住。
5. 停止记录。
6. 在 User Timing 标签下会显示 React 归类好的事件。

参考资料

react-addons-perf
react-addons-perf 使用
React 官网