React 性能追踪

使用方法 {/usage/}

React 性能追踪仅适用于 React 的开发构建（development）和性能分析构建（profiling）：

• 开发构建：默认启用。
• 性能分析构建：默认仅启用 Scheduler 轨道。Components 轨道仅列出包裹了 <Profiler> 的子树中的组件。如果已启用 React 开发者工具扩展，即使在 Components 轨道中没有使用 <Profiler> 包裹的组件也会全部包含在内。Server 轨道在性能分析构建中不可用。

如果已启用，这些追踪应自动出现在您通过提供扩展性 API 的浏览器的 Performance 面板所记录的跟踪中。

使用性能分析构建 {/using-profiling-builds/}

除了生产构建和开发构建之外，React 还提供特殊的性能分析构建。要使用性能分析构建，您需要使用 react-dom/profiling 代替 react-dom/client。我们建议您通过打包器的别名功能在构建时将 react-dom/client 指向 react-dom/profiling，而不是手动更新每个 react-dom/client 导入。您的框架可能内置了对启用 React 性能分析构建的支持。

轨道 {/tracks/}

Scheduler {/scheduler/}

Scheduler 是 React 内部用于管理不同优先级任务的概念。此轨道由 4 个子轨道组成，每个子轨道代表特定优先级的工作：

• Blocking — 同步更新，可能由用户交互触发。
• Transition — 在后台发生的非阻塞工作，通常通过 startTransition 发起。
• Suspense — 与 Suspense 边界相关的工作，例如显示 fallback 或揭示内容。
• Idle — 当没有更高优先级任务时执行的最低优先级工作。

渲染（Renders） {/renders/}

每次渲染过程都由多个阶段组成，您可以在时间轴上看到：

• Update — 这是触发新渲染过程的原因。
• Render — React 通过调用组件的渲染函数来渲染更新的子树。您可以在 Components 轨道 上查看渲染的组件子树，其颜色方案与之对应。
• Commit — 渲染组件后，React 会将更改提交到 DOM 并运行布局副作用（layout effects），例如 useLayoutEffect。
• Remaining Effects — React 运行渲染子树的被动副作用（passive effects）。这通常发生在绘制（paint）之后，此时 React 会运行诸如 useEffect 之类的 Hook。一个已知的例外是用户交互（如点击或其他离散事件），在此场景下，此阶段可能会在绘制之前运行。

了解更多关于渲染和提交的信息。

级联更新（Cascading updates） {/cascading-updates/}

级联更新是导致性能回退的常见模式之一。如果在一次渲染过程中安排了新的更新，React 可能会丢弃已完成的工作并开始新的渲染过程。

在开发构建中，React 可以显示哪个组件安排了新的更新。这包括一般更新和级联更新。您可以通过点击“Cascading update”条目来查看增强的堆栈跟踪，其中还会显示安排更新的方法名称。

了解更多关于 Effect 的信息。

Components {/components/}

Components 轨道可视化 React 组件的耗时。它们以火焰图（flamegraph）的形式显示，其中每个条目代表对应组件渲染及其所有后代子组件的持续时间。

与渲染耗时类似，副作用耗时也以火焰图表示，但使用与 Scheduler 轨道上对应阶段一致的不同配色方案。

在渲染和副作用阶段可能会显示其他事件：

• <span style={{padding: '0.125rem 0.25rem', backgroundColor: '#facc15', color: '#1f1f1fff'}}>Mount — 对应的组件渲染或副作用子树已挂载。
• <span style={{padding: '0.125rem 0.25rem', backgroundColor: '#facc15', color: '#1f1f1fff'}}>Unmount — 对应的组件渲染或副作用子树已卸载。
• <span style={{padding: '0.125rem 0.25rem', backgroundColor: '#facc15', color: '#1f1f1fff'}}>Reconnect — 类似于 Mount，但仅限于使用 <Activity> 的情况。
• <span style={{padding: '0.125rem 0.25rem', backgroundColor: '#facc15', color: '#1f1f1fff'}}>Disconnect — 类似于 Unmount，但仅限于使用 <Activity> 的情况。

变更的 Props（Changed props） {/changed-props/}

在开发构建中，当您点击组件渲染条目时，可以检查 props 中可能的变化。您可以使用此信息来识别不必要的渲染。

Server {/server/}

Server Requests {/server-requests/}

Server Requests 轨道可视化所有最终进入 React Server Component 的 Promise。这包括任何 async 操作，例如调用 fetch 或异步的 Node.js 文件操作。

React 会尝试将从第三方代码内部发起的 Promise 合并为单个 span，以表示阻塞第一方代码的整个操作的持续时间。例如，一个名为 getUser 的第三方库方法在内部多次调用 fetch，将显示为名为 getUser 的单个 span，而不是显示多个 fetch span。

点击 span 将显示 Promise 创建位置的堆栈跟踪，以及 Promise 解析到的值（如果可用）。

被拒绝的 Promise 以红色显示，并显示其拒绝值。

Server Components {/server-components/}

Server Components 轨道可视化 React Server Components 所等待的 Promise 的持续时间。时间以火焰图形式显示，其中每个条目代表对应组件渲染及其所有后代子组件的持续时间。

如果您等待一个 Promise，React 将显示该 Promise 的持续时间。要查看所有 I/O 操作，请使用 Server Requests 轨道。

不同的颜色用于表示组件渲染的持续时间。颜色越深，持续时间越长。

Server Components 轨道组将始终包含一个“Primary”轨道。如果 React 能够并发渲染 Server Components，它将显示额外的“Parallel”轨道。如果并发渲染的 Server Components 超过 8 个，React 会将它们关联到最后一个“Parallel”轨道，而不再添加更多轨道。