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

问题描述 投票:11回答:1

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

我知道why-did-you-update,但这不完全一样。

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

javascript performance reactjs google-chrome-devtools
1个回答
4
投票

是的,react-addons-perf退役了,你不会让他们参加React 16并进一步(进入Fiber),如Dan Abramov在this issue所述。

编辑09-2018:最近宣布有一个React DevTools的分析器,现在您可以使用此工具进行渲染优化和分析。有关此工具的更多信息以及如何在this official react blog post中使用它

另一个选择是使用why-did-you-update,你提到它,但与react-perf-addons“不完全相同”的区别在于后一种工具使用内部协调分析,而不是依赖于重新渲染的事实。通过更新状态或父母触发,比如为什么做了更新。对我来说,当我们接近React不必要的渲染性能分析时,这些工具之间没有太大区别。

或者,您可以使用在this issue中链接的性能表插件。在我看来,article by Ben Schwarz中概述的性能分析原则将对您和您的应用程序性能最有帮助,因为React在内部使用Timing API,它将在性能选项卡中的“用户计时”下的Chrome DevTools中显示。

希望这可以帮助!

© www.soinside.com 2019 - 2024. All rights reserved.