javascript - 在 React 应用程序中跟踪渲染？

Question

有什么方法可以在您的应用程序中跟踪渲染，同时仍然使用普通组件吗？我想用它来进行性能监控和测试，以确保在更新期间渲染处于正确的范围内。

Answer 1

在开发模式下，您可以使用支持的浏览器中的性能工具可视化组件如何挂载、更新和卸载。例如:

要在 Chrome 中执行此操作:

• 在查询字符串中使用 ?react_perf 加载您的应用程序(例如， http://localhost:3000/?react_perf ).

• 打开 Chrome DevTools Performance 选项卡并按 Record。

• 执行您要分析的操作。不要记录超过20 秒，否则 Chrome 可能会挂起。

• 停止录制。

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

Note that the numbers are relative so components will render faster in production. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur.