React学习之扩展性能分析工具-Perf二十八

import Perf from 'react-addons-perf' // ES6语法
var Perf = require('react-addons-perf') // ES5语法针对nodejs
var Perf = React.addons.Perf; // ES5语法，针对浏览器，增加react-with-addons.js在script标签中

1.概要

React本身就非常快速了，然而，如果你想进一步提升你的应用的性能的话，可以通过shouldComponentUpdate()来优化你的DOM diff算法，这是我们之前就已经接触或者是非常了解的优化方式。
除此之外，你还可以概述你的应用程序的总体性能，而Perf就是这样一个工具，它会告诉你哪里需要设置shouldComponentUpdate去减少优化你视图的更新变更次数等等。

如果你已经确定你的React应用存在性能上面的问题，可以使用这个工具来进行检测，它会给出一些帮助性的警告，让你能够了解到一些东西。

然而，Perf工具只能用来处理React应用，同时它只会显示性能最差的部分。

2.使用Perf

Perf对象是用于React的开发阶段的，你不应该将这个包放在最终的应用程序包中。

获得测试结果的方法

start() stop() getLastMeasurements()

打印结果方法

下面的方式是通过 Perf.getLastMeasurements()处理后进行打印的。

printInclusive() printExclusive() printWasted() printOperations() printDOM()

3.函数详解

start()，stop()

调用方式

Perf.start()
// ...
Perf.stop()

start/stop这两个方法，放在你要测试性能的代码的两端，如果操作消耗一些时间，但是这些时间是微不足道的，会被直接忽略(所以在小型的项目中，这个工具可能并不会有结果)。

在stop函数调用，停止测试后，你需要用Perf.getLastMeasurements()去得到测试的结果。

getLastMeasurements()

Perf.getLastMeasurements()

这个函数会得到一个关于之前测试数据结果的结构体，你可以保存它或者通过打印函数将结果打印出来，从而去分析测试的结果。

注意

请不要依赖于返回的数据格式，也就是说尽可能用打印函数打印返回的结构体，因为这个格式可能在以后的版本中发生较大的变更，如果返回的格式已经被加入到公共的API中，那么官方文档会进行更新。

printInclusive()

Perf.printInclusive(measurements)

这个函数会打印测试的总时间以及一些相关信息，如果没有什么参数的话，函数会打印出所有的测试记录，它同时会在控制台直接以table的格式良好的进行显示(在console中用console.table()函数可以进行table格式的显示)

printExclusive()

Perf.printExclusive(measurements)

Exclusive单词的意思是独立，跟printInclusive有点类似，但是不会包括装载组件的时间：处理props，componentwillMount和componentDidMount这些东西的时间都不会算进去。

printWasted()

Perf.printWasted(measurements)

这是Perf性能分析工具最有用的部分，”Wasted“浪费的时间：时间浪费在组件上但是又没有用于去更新组件。

printOperations()

Perf.printOperations(measurements)

打印底层的一些操作

printDOM()

Perf.printDOM(measurements)

它是printOperations的别名，最终会被弃用。

下一篇将讲React中的Test工具