<Profiler> 允许您以编程方式测量 React 树的渲染性能。

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

参考

<Profiler>

将组件树包装在 <Profiler> 中以测量其渲染性能。

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

属性

  • id: 用于标识您正在测量的 UI 部分的字符串。
  • onRender: React 每次更新已分析树中的组件时都会调用的 onRender 回调函数。它会接收有关渲染内容及其所需时间的信息。

注意事项

onRender 回调函数

React 将使用有关渲染内容的信息来调用您的 onRender 回调函数。

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // Aggregate or log render timings...
}

参数

  • id: 刚刚提交的 <Profiler> 树的字符串 id 属性。如果您使用多个分析器，这可以帮助您识别哪个部分的树被提交了。
  • phase: "mount", "update" 或 "nested-update"。这可以帮助您了解树是第一次挂载，还是由于 props、状态或 Hooks 的变化而重新渲染。
  • actualDuration: 以毫秒为单位表示渲染 <Profiler> 及其子代所花费的时间（当前更新）。这表明子树如何更好地利用记忆化（例如 memo 和 useMemo）。理想情况下，在初始挂载之后，此值应该显著下降，因为许多子代只需要在其特定 props 发生更改时才需要重新渲染。
  • baseDuration: 以毫秒为单位估算重新渲染整个 <Profiler> 子树（没有任何优化）所需的时间。它是通过将树中每个组件的最新渲染持续时间相加来计算的。此值估算渲染的最坏情况成本（例如，初始挂载或没有记忆化的树）。将 actualDuration 与它进行比较，以查看记忆化是否有效。
  • startTime: React 开始渲染当前更新时的数字时间戳。
  • commitTime: React 提交当前更新时的数字时间戳。此值在一次提交中的所有分析器之间共享，从而可以根据需要对它们进行分组。

用法

以编程方式测量渲染性能

将 <Profiler> 组件包装在 React 树周围以测量其渲染性能。

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <PageContent />
</App>

它需要两个 props：一个 id（字符串）和一个 onRender 回调（函数），React 在树中任何组件“提交”更新时都会调用此回调。

陷阱

分析会增加一些额外的开销，因此默认情况下，它在生产版本中被禁用。要启用生产分析，您需要启用一个具有启用分析功能的特殊生产版本。

注意

<Profiler> 允许您以编程方式收集测量数据。如果您正在寻找交互式分析器，请尝试 React 开发者工具 中的“Profiler”选项卡。它作为浏览器扩展程序公开了类似的功能。

测量应用程序的不同部分

您可以使用多个 <Profiler> 组件来测量应用程序的不同部分。

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content />
  </Profiler>
</App>

您还可以嵌套 <Profiler> 组件。

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content>
      <Profiler id="Editor" onRender={onRender}>
        <Editor />
      </Profiler>
      <Preview />
    </Content>
  </Profiler>
</App>

虽然 <Profiler> 是一个轻量级组件，但应仅在必要时使用。每次使用都会增加应用程序的一些 CPU 和内存开销。

上一页<Fragment> (<>)
下一页<StrictMode>