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

Question

我之前使用react-addons-perf软件包来测量各种内容，例如通过Perf.printWasted()浪费的渲染。不幸的是，这个软件包在React 16中已经退役，而不是Chrome的性能标签，它没有相应的工具。

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

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

Answer 1

是的，react-addons-perf已经退役了，你不会按照this issue中的Dan Abramov所说的那样将它们送到React 16并进一步（到Fiber）。

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

中使用它

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

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

希望这有帮助！