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

Posted 2023-03-07

【中文标题】如何测量 React 16 中浪费的渲染？

【英文标题】：How can I measure wasted renders in React 16?

【发布时间】：2018-04-29 08:57:26

【问题描述】：

我之前使用react-addons-perf 包来测量各种东西，例如通过Perf.printWasted() 浪费的渲染。不幸的是，这个包在 React 16 中被淘汰，取而代之的是 Chrome 的 Performance 标签，它没有等效的工具。

我知道why-did-you-update，但这并不完全相同。

React 16 中是否有任何方法可以测量浪费的渲染？

【参考方案1】：

是的，react-addons-perf 已退役，您将无法将它们用于 React 16 及进一步（进入 Fiber），如 Dan Abramov 在this issue 中所述。

Edit 09-2018：最近发布了一个用于 React DevTools 的分析器，现在您可以使用此工具进行渲染优化和分析。更多关于这个工具以及如何使用它的信息this official react blog post

编辑 09-2019：React 开发工具收到了重大更新，现在您可以测量渲染，并且有一个设置可以在RDT 设置。

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

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

希望这会有所帮助！