reactjs - react 分析器 : What do the timings mean?

Question

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

我很困惑，因为时间不对。例如，如果“Shell”的总提交时间是 0.3ms，那么“Main”的总提交时间是“0.3ms 的 0.2ms”，这是有意义的。但事实并非如此。

这些时间的确切含义是什么以及它们如何相加？

(注意:我已阅读 "Introducing the React Profiler"，但从 section 看来，自该文章以来，此时间报告约定是新的。)

Answer 1

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