在React应用中跟踪呈现？

Question

在仍然使用普通组件的情况下，有什么方法可以跟踪应用中的呈现？我想用它来进行性能监视和测试，以确保渲染在更新期间处于正确的位置。

Answer 1

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

要在Chrome做到这一点：

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

• 打开Chrome DevTools性能选项卡并按下记录。

• 执行您想要进行配置文件的操作。不要记录超过20秒的时间或Chrome可能会挂起。

• 停止录音。

• 反应事件将被分组在User Timing标签下。

注意，编号相对于这样的组件将呈现更快的生产 。不过，这应该可以帮助您了解何时不相关的用户界面更新错误，以及用户界面更新发生的频率和频率。