使用 Profiler 标签页
记录渲染过程、阅读火焰图，并找出运行缓慢的组件。
使用 Profiler 标签页 是 CoddyKit 上的免费 React Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
欢迎
本课将教您使用 React DevTools Profiler 记录渲染过程、读取火焰图，并确定哪些组件造成了性能瓶颈。
打开 Profiler
点击 React DevTools 中的 **Profiler** 标签页（位于 Components 旁边）。您会看到一个 Record 按钮（圆形）和一个 Reload and Profile 按钮。Profiler 仅在开发模式下运行。
记录会话
点击 **Record**（圆形按钮），与您的应用交互（例如点击按钮、在输入框中输入内容），然后点击 **Stop**（方形按钮）。DevTools 会捕获会话期间发生的每次渲染。
读取火焰图
火焰图会为每次提交中的每个组件显示一个条形图。宽度表示渲染耗时。堆叠越高表示组件树越深。将鼠标悬停在条形图上，可以查看组件名称和精确的渲染时长。
提交时间线
在 Profiler 顶部，您会看到一排小条形图，每个 React 提交对应一个条形图。条形图越高，表示提交越慢。点击某个条形图即可跳转到该次提交的火焰图。
组件为什么会渲染
在火焰图中选择一个组件，然后查看 **为什么会发生此次渲染？** 部分。这里会显示组件发生渲染的原因：属性发生了变化、状态发生了变化，或父组件重新渲染了。
灰色条与彩色条
灰色条表示该组件没有在本次提交中渲染（React 重用了之前的输出）。彩色条表示组件确实重新渲染了——颜色越深，渲染耗时越长。
排名图视图
从火焰图切换到 **排名** 图表（使用顶部的切换按钮）。该视图会按渲染耗时排序，列出所有已渲染的组件，让您可以立即找到最慢的组件。
录制并重新加载
点击 **重新加载并进行性能分析**，而不是点击“录制”，这样可以捕获包含初始渲染在内的页面加载过程。这有助于您找出首次挂载时速度较慢的组件。
在生产环境中启用性能分析
生产构建默认会禁用性能分析器。要对生产环境进行性能分析，请使用 `react-dom/profiling` 作为别名，并使用 `scheduler/tracing-profiling` 构建。大多数团队会先在开发环境中进行性能分析。
快速检查
在 React DevTools 性能分析器的火焰图中，条形的宽度表示什么？
回顾
现在您已经可以录制性能分析会话、阅读火焰图和排名图表、检查组件重新渲染的原因，并使用提交时间线在不同渲染之间导航。
接下来
下一课：**调试常见 React 错误**——您将使用 DevTools 和浏览器控制台诊断缺少键警告、未定义状态错误以及水合不匹配问题。
常见问题解答
「使用 Profiler 标签页」课时是免费的吗？
是的 — 「使用 Profiler 标签页」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「使用 Profiler 标签页」这节课中我会学到什么？
记录渲染过程、阅读火焰图，并找出运行缓慢的组件。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「使用 Profiler 标签页」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 安装并打开 React DevTools
- 检查组件树与 Props
- 使用 Profiler 标签页
- 调试常见 React 错误