我之前用过反应插件性能 https://reactjs.org/docs/perf.html#printwasted包来测量各种东西，例如浪费的渲染通过Perf.printWasted()。不幸的是，这个包在 React 16 中被淘汰，取而代之的是 Chrome 的 Performance 选项卡，而 Chrome 没有等效的工具。
我知道你为什么更新 https://github.com/maicki/why-did-you-update，但这并不完全相同。
React 16 有什么方法可以测量浪费的渲染吗？
Yes, 反应插件性能 https://reactjs.org/docs/perf.html#printwasted已退休，您将无法将它们用于 React 16 及进一步（进入 Fiber），如 Dan Abramov 在这个问题 https://github.com/facebook/react/issues/11326#issuecomment-338657337.
编辑 09-2018：最近发布了 React DevTools 的分析器，现在您可以使用该工具进行渲染优化和分析。有关此工具以及如何使用它的更多信息这篇官方反应博客文章 https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html
编辑 09-2019：React Dev Tools 收到了重大更新，现在您可以测量渲染，并且有一个设置可以在 RDT 设置中获取“为什么更新”之类的功能。
另一种选择是使用你为什么更新 https://github.com/maicki/why-did-you-update，你提到了它，但与react-perf-addons“不完全相同”的区别在于，后一个工具使用内部协调分析，而不是依赖于更新状态或父项触发重新渲染的事实，比如你为什么更新。对我来说，当我们进行 React 不必要的渲染性能分析时，这些工具之间没有太大区别。
或者，您可以使用链接的性能表插件这个问题 https://github.com/facebook/react-devtools/issues/801#issuecomment-352993011。在我看来，性能分析原则概述于本·施瓦茨的文章 https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad这对您和您的应用程序性能最有帮助，因为 React 在内部使用 Timing API，并且它将显示在 Chrome DevTools 的“性能”选项卡中的“用户计时”下。
希望这可以帮助！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
