在React应用中跟踪渲染？

Question

有没有办法在使用普通组件时跟踪应用中的渲染？我想将它用于性能监视和测试，以确保在更新期间渲染处于正确的范围内。

Answer 1

在开发模式下，您可以使用支持的浏览器中的性能工具来可视化组件的安装，更新和卸载方式。例如：

要在Chrome中执行此操作：

• 在查询字符串中使用？react_perf加载您的应用程序（例如， http://localhost:3000/?react_perf）。

• 打开Chrome DevTools性能标签，然后按记录。

• 执行您要分析的操作。不要记录20多个    秒或Chrome可能会挂起。

• 停止录制。

• React事件将在User Timing标签下分组。

  

请注意，这些数字是相对的，因此组件渲染速度会更快       在生产中。不过，这应该可以帮助您实现无关的UI       错误地更新，以及您的UI更新的深度和频率       发生。