如何在React 16中测量浪费的渲染?

Bre*_*aut 14 javascript performance google-chrome-devtools reactjs

我之前使用react-addons-perf软件包测量各种事情,比如浪费渲染Perf.printWasted().不幸的是,这个软件包在React 16中已经退役,而不是Chrome的Performance选项卡,它没有相应的工具.

我知道为什么你做了更新,但这不完全相同.

React 16有没有办法测量浪费的渲染?

And*_*eos 5

是的,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中显示。

希望这可以帮助!