React Profiler：时间是什么意思？

Question

我正在使用 React Profiler 来提高我的应用程序的效率。它通常会吐出这样的图表：

我很困惑，因为时间没有加起来。例如，如果“Shell”的总提交时间为 0.3ms，那么“Main”的总提交时间为“0.3ms 的 0.2ms”。但事实并非如此。

这些时间究竟意味着什么，它们是如何加起来的？

（注意：我已经阅读了“React Profiler 简介”，但从本节看来，这个时间报告约定自那篇文章以来是新的。）

Answer 1

第一个数字 (0.2ms) 是自身持续时间，第二个数字 (0.3ms) 是实际持续时间。大多数情况下，自我持续时间是实际持续时间减去花在孩子身上的时间。我注意到这些数字并不总是完美地相加，我猜这要么是一个四舍五入的神器，要么是因为一些时间花在了隐藏的工作上。例如，在您的情况下，Shell 的实际时间为 3.1ms，自身持续时间为 0.3ms，这意味着 2 个孩子（Navbar 和 Main）应该加起来为 3.1ms - 0.3ms 或 2.8ms。然而，我们看到 Navbar 没有重新渲染，所以它是 0ms，但 Main 的实际持续时间只有 2.7ms，而不是 2.8ms。当您进行性能调整时，它不会在实际中产生任何影响，但它确实有点违反预期。