Bre*_*aut 14 javascript performance google-chrome-devtools reactjs
我之前使用react-addons-perf软件包测量各种事情,比如浪费渲染Perf.printWasted().不幸的是,这个软件包在React 16中已经退役,而不是Chrome的Performance选项卡,它没有相应的工具.
我知道为什么你做了更新,但这不完全相同.
React 16有没有办法测量浪费的渲染?
是的,react-addons-perf已淘汰,您将无法像Dan Abramov在本期中所说的那样将它们用于React 16及以后(进入Fiber)。
编辑09-2018:最近宣布了一个针对React DevTools的探查器,现在您可以使用此工具进行渲染优化和分析。有关此工具的更多信息以及如何在此官方的React博客文章中使用它
编辑09-2019:React Dev Tools进行了重大更新,现在您可以测量渲染了,并且有一个设置可以在RDT设置中获得类似“为什么要更新”的功能。
另一个选择是使用您提到过的why-did-you-update,但与react-perf-addons“并不完全相同”的区别在于,后者使用内部协调分析,而不是依赖于重新渲染是由更新状态或父项触发的,例如您为什么更新。对我来说,当我们进行不必要的渲染性能分析时,这两个工具之间没有太大区别。
或者,您可以使用在本期中链接的性能表插件。在我看来,Ben Schwarz在文章中概述的性能分析原则对您和您的应用程序性能将是最有用的,因为React在内部使用Timing API,并且将在Performance选项卡中“用户时序”下的Chrome DevTools中显示。
希望这可以帮助!
| 归档时间: |
|
| 查看次数: |
1087 次 |
| 最近记录: |