React Profiler API

Question

目的

Profiler 测量渲染一个 React 应用多久渲染一次以及渲染一次的 代价。

目的是识别出应用中渲染较慢的部分

Profiling 增加了额外的开支，所以它在生产构建中会被禁用。

用法

需要 id 和 onRender (组件树中的组件 提交 更新的时候被 React 调用的回调函数)

分析 Navigation 组件和它的子代

render(
<App>
 <Profiler id="Navigation" onRender={callback}>
   <Navigation {...props} />
 </Profiler>
 <Main {...props} />
</App>
);

多个 Profiler

render(
<App>
 <Profiler id="Navigation" onRender={callback}>
   <Navigation {...props} />
 </Profiler>
 <Profiler id="Main" onRender={callback}>
   <Main {...props} />
 </Profiler>
</App>
);

嵌套使用 Profiler

render(
<App>
 <Profiler id="Panel" onRender={callback}>
   <Panel {...props}>
     <Profiler id="Content" onRender={callback}>
       <Content {...props} />
     </Profiler>
     <Profiler id="PreviewPane" onRender={callback}>
       <PreviewPane {...props} />
     </Profiler>
   </Panel>
 </Profiler>
</App>
);

onRender 回调

React 会在 profile 包含的组件树中任何组件 提交 一个更新的时候调用这个函数

function onRenderCallback(
id, // 发生提交的 Profiler 树的 “id”
phase, // "mount" （如果组件树刚加载） 或者 "update" （如果它重渲染了）之一
actualDuration, // 本次更新 committed 花费的渲染时间
baseDuration, // 估计不使用 memoization 的情况下渲染整颗子树需要的时间
startTime, // 本次更新中 React 开始渲染的时间
commitTime, // 本次更新中 React committed 的时间
interactions // 属于本次更新的 interactions 的集合
) {
// 合计或记录渲染时间。。。
}

1. id: string - 发生提交的 Profiler 树的 id。 如果有多个 profiler，它能用来分辨树的哪一部分发生了 提交。
2. phase: "mount" | "update" - 判断是组件树的第一次装载引起的重渲染，还是由 props、state 或是 hooks 改变引起的重渲染。
3. actualDuration: number - 本次更新在渲染 Profiler 和它的子代上花费的时间。 这个数值表明使用 memoization 之后能表现得多好。（例如 React.memo，useMemo，shouldComponentUpdate）。 理想情况下，由于子代只会因特定的 prop 改变而重渲染，因此这个值应该在第一次装载之后显著下降。
4. baseDuration: number - 在 Profiler 树中最近一次每一个组件 render 的持续时间。 这个值估计了最差的渲染时间。（例如当它是第一次加载或者组件树没有使用 memoization）。
5. startTime: number - 本次更新中 React 开始渲染的时间戳。
6. commitTime: number - 本次更新中 React commit 阶段结束的时间戳。 在一次 commit 中这个值在所有的 profiler 之间是共享的，可以将它们按需分组。
7. interactions: Set - “interactions” 的集合用来追踪已经列出的更新。（例如当 render 或者 setState 被调用时）。