React 组件渲染变慢或频繁重渲染时…

当需要分析或优化 React 组件性能（渲染慢、重渲染抖动、列表卡顿、计算昂贵）时使用。

适用场景

解决思路

1. 复现或描述变慢的现象。
2. 找出触发重渲染的原因（state 更新、props 频繁变化、effects）。
3. 把快速变化的状态从重型子树中隔离出去。
4. 稳定 props 和事件处理器；在收益明显的地方做 memo 化。
5. 减少昂贵工作（计算、DOM 体积、列表长度）。
6. 验证：打开 React DevTools Profiler → 录制交互 → 在 Flamegraph 中检查渲染超过约 16 ms 的组件 → 与优化前的基线录制对比。
7. 测量：使用 React DevTools Profiler 或打印渲染日志，先采集基线。
8. 找出频繁变化：识别由定时器、滚动、输入或动画触发的 state 更新。
9. 拆分：把不断跳动的 state 移入子组件；让重型列表保持静态。
10. memo 化：仅当 props 稳定时，用 `memo` 包裹叶子行组件。
11. 稳定 props：用 `useCallback`/`useMemo` 处理事件处理器和派生值。
12. 避免在 render 中做派生计算：预计算，或在 memo 化的辅助函数中计算。
13. 控制列表大小：对长列表做窗口化/虚拟化；避免渲染隐藏项。
14. Keys：确保 key 稳定；当顺序可能变化时避免使用 index。
15. Effects：检查依赖数组；避免每次渲染都会重新运行的 effect。
16. 样式/布局：留意昂贵的布局抖动或大型 Markdown/diff 渲染。
17. 隔离跳动状态：把定时器或动画计数器移入子组件，使父列表不会每次 tick 都重渲染。
18. 用 `useCallback` + `memo` 稳定回调：让事件处理器引用稳定，使行组件只在自身 item 变化时重渲染。
19. 把派生数据移出 render：用 `useMemo` 让派生值只在依赖变化时重新计算。
20. 拆分行组件：把列表行抽成 memo 化的组件，并只传窄 props。
21. 延迟重型渲染：惰性渲染或折叠昂贵内容，直到展开时再渲染。
22. Profiling 验证步骤：打开 React DevTools → Profiler 标签。
23. 点击 Record，执行慢交互，然后 Stop。
24. 切换到 Flamegraph 视图；任何标注组件且时间 > 约 16 ms 的条都是候选。
25. 用 Ranked chart 按自身渲染时间排序，锁定最耗时的组件。
26. 一次只应用一个优化，重新录制，并与基线对比渲染次数和耗时。
27. 当用户想要具体重构示例时，加载 `references/examples.md`。