我以前曾使用react-addons- perf包来测量各种东西,例如via浪费了渲染Perf.printWasted()。不幸的是,该软件包已在React 16中淘汰,取而代之的是Chrome的“性能”标签,该标签没有等效的工具。
Perf.printWasted()
我知道您为什么要更新,但这并不完全相同。
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中显示。
希望这可以帮助!