我以前使用react-addons-perf包来衡量各种事情，比如通过Perf.printWasted(). 不幸的是，这个包在 React 16 中被淘汰，取而代之的是 Chrome 的 Performance 选项卡，它没有等效的工具。
我知道为什么-did-you-update，但这并不完全相同。
React 16 中是否有任何方法可以测量浪费的渲染？
我如何测量 React 16 中浪费的渲染？
IT技术
javascript
performance
reactjs
google-chrome-devtools
2021-05-11 17:25:47
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 “不完全相同”的区别在于后一种工具使用内部对帐分析，而不是依赖于事实上，重新渲染是由更新状态或父级触发的，比如你为什么更新。对我而言，当我们进行 React 不必要的渲染性能分析时，这些工具之间没有太大区别。
或者，您可以使用在此问题中链接的性能表插件。在我看来，Ben Schwarz 的文章中概述的性能分析原则对您和您的应用程序性能最有帮助，因为 React 在内部使用 Timing API，它将显示在 Chrome DevTools 中的“性能”选项卡中的“用户计时”下。
希望这可以帮助！