React Profiler 性能分析

学习使用 React Profiler API 测量组件渲染性能，识别性能瓶颈。 · 难度：入门 · +15XP

React Profiler 是什么？

React Profiler 是一个用于测量渲染性能的组件。它可以记录组件渲染的次数、每次渲染花费的时间以及是什么原因触发了更新。它有助于识别应用中性能较慢的部分。

1. 基本用法

使用 <Profiler> 包裹需要分析的组件树，并提供一个 onRender 回调函数。

import { Profiler } from 'react';
function onRenderCallback(
  id, // 标识符
  phase, // 'mount' 或 'update'
  actualDuration, // 本次渲染花费的时间
  baseDuration, // 子组件未缓存时估计的渲染时间
  startTime,
  commitTime
) {
  console.log(组件 ${id} 在 ${phase} 阶段花费了 ${actualDuration}ms);
}
<Profiler id='MyComponent' onRender={onRenderCallback}>
  <MyComponent />
</Profiler>

2. 何时使用

• 应用感觉卡顿或掉帧
• 组件不必要地重新渲染
• 优化列表或其他大型组件

3. 注意

Profiler 会增加额外的性能开销，因此只在开发环境或需要分析时使用。生产环境中应移除。

练习提示

在下方代码中，点击按钮会强制组件重新渲染。观察控制台输出的 Profiler 日志，分析每次渲染的时间。