小编典典

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

reactjs

我以前曾使用react-addons-
perf
包来测量各种东西,例如via浪费了渲染Perf.printWasted()。不幸的是,该软件包已在React
16中淘汰,取而代之的是Chrome的“性能”标签,该标签没有等效的工具。

我知道您为什么要更新,但这并不完全相同。

React 16中有什么方法可以测量浪费的渲染?


阅读 221

收藏
2020-07-22

共1个答案

小编典典

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

希望这可以帮助!

2020-07-22