<Profiler>

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

• 参考
  • <Profiler>
  • onRender 回调
• 用法
  • 以编程方式衡量渲染性能
  • 衡量应用程序的不同部分

参考

<Profiler>

将组件树封装在 <Profiler> 中以衡量其呈现性能。

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

道具

• id：用于标识希望衡量 UI 中的一部分的字符串。
• onRender：onRender 回调，每次组件内的信息更新时，React 都会调用。它会接收有关渲染了哪些内容以及花费了多长时间的信息。

注意事项

• 性能分析会带来一些额外的开销，因此，在生产版本中，默认情况下会禁用此功能。 要选择加入生产性能分析，您需要启用一个已启用性能分析的特殊生产版本。

onRender 回调

React 会使用有关所渲染内容的信息来调用您的 onRender 回调。

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

参数

• id：<Profiler> 树的字符串 id 属性，该树刚刚提交。如果您使用多个 Profiler，这能帮助您识别哪些树部分已经提交。
• phase："mount"、"update" 或 "nested-update"。该参数能帮助您了解该树是否已首次挂载，或者因为道具、状态或 Hook 发生更改而重新渲染。
• actualDuration：<Profiler>及其后代在当前更新中的渲染所消耗毫秒数。这反映了此子树如何充分利用记忆化（例如，memo 和 useMemo）。理想情况下，经过初始化挂载后，该值应该显着降低，因为后代组件中的许多仅在所用特定支撑发生变化时才需要重新渲染。
• baseDuration：估算重新渲染整个<Profiler>子树（不包含任何优化）需要多长时间的毫秒数。它通过汇总该树中每一组件的最新渲染时间而计算得出。此值估算出最糟糕的渲染成本（比如初始挂载或没有记忆化的树）。将其与actualDuration进行对比，以查看记忆化是否有效。
• startTime：一个数字时间戳，表示 React 何时开始渲染当前更新。
• commitTime：一个数字时间戳，表示 React 何时提交当前更新。此值在提交中的所有分析器之间共享，因此，如果需要，可以将它们分组。

用法

以编程方式衡量渲染性能

使用 <Profiler> 组件包装 React 树，以衡量它的渲染性能。

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

它需要两个属性：一个 id（字符串）和一个 onRender 回调（函数）。React 会在树中的组件“提交”更新时调用它。

测量应用程序的不同部分

你可以使用多个 <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 和内存开销。