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
工具