<Profiler>

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

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

参考

¥Reference

<Profiler>

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

¥Wrap a component tree in a <Profiler> to measure its rendering performance.

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

属性

¥Props

• id：标识你正在测量的 UI 部分的字符串。

  ¥id: A string identifying the part of the UI you are measuring.

• onRender：每次分析树中的组件更新时 React 调用的 onRender 回调。它接收有关渲染内容和花费时间的信息。

  ¥onRender: An onRender callback that React calls every time components within the profiled tree update. It receives information about what was rendered and how much time it took.

注意事项

¥Caveats

• 分析会增加一些额外的开销，因此默认情况下在生产版本中禁用它。要选择生产分析，你需要启用 启用分析的特殊生产构建。

  ¥Profiling adds some additional overhead, so it is disabled in the production build by default. To opt into production profiling, you need to enable a special production build with profiling enabled.

onRender 回调

¥onRender callback

React 将调用你的 onRender 回调，其中包含有关渲染内容的信息。

¥React will call your onRender callback with information about what was rendered.

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

参数

¥Parameters

• id：刚刚提交的 <Profiler> 树的字符串 id 属性。如果你使用多个分析器，这可以让你确定提交的是树的哪一部分。

  ¥id: The string id prop of the <Profiler> tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers.

• phase："mount"、"update" 或 "nested-update"。这让你知道树是刚刚首次挂载还是由于属性、state 或钩子的变化而重新渲染。

  ¥phase: "mount", "update" or "nested-update". This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or Hooks.

• actualDuration：为当前更新渲染 <Profiler> 及其后代所花费的毫秒数。这表明子树使用记忆化的程度（例如 memo 和 useMemo）。理想情况下，此值应在初始挂载后显着降低，因为许多后代仅在其特定属性发生变化时才需要重新渲染。

  ¥actualDuration: The number of milliseconds spent rendering the <Profiler> and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. memo and useMemo). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.

• baseDuration：估计在没有任何优化的情况下重新渲染整个 <Profiler> 子树需要多少时间的毫秒数。它是通过总结树中每个组件的最近渲染持续时间来计算的。该值估计了最坏情况下的渲染成本（例如初始挂载或没有记忆化的树）。将 actualDuration 与它进行比较以查看记忆化是否有效。

  ¥baseDuration: The number of milliseconds estimating how much time it would take to re-render the entire <Profiler> subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare actualDuration against it to see if memoization is working.

• startTime：React 开始渲染当前更新时的数字时间戳。

  ¥startTime: A numeric timestamp for when React began rendering the current update.

• commitTime：React 提交当前更新时的数字时间戳。此值在一次提交中的所有分析器之间共享，使它们能够根据需要进行分组。

  ¥commitTime: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.

用法

¥Usage

以编程方式测量渲染性能

¥Measuring rendering performance programmatically

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

¥Wrap the <Profiler> component around a React tree to measure its rendering performance.

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

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

¥It requires two props: an id (string) and an onRender callback (function) which React calls any time a component within the tree “commits” an update.

测量应用的不同部分

¥Measuring different parts of the application

你可以使用多个 <Profiler> 组件来测量应用的不同部分：

¥You can use multiple <Profiler> components to measure different parts of your application:

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

你还可以嵌套 <Profiler> 组件：

¥You can also nest <Profiler> components:

<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 和内存开销。

¥Although <Profiler> is a lightweight component, it should be used only when necessary. Each use adds some CPU and memory overhead to an application.