import Perf from 'react-addons-perf'
var Perf = require('react-addons-perf')
var Perf = React.addons.Perf;
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 工具
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|