系统化的性能优化离不开监控、代码策略与渲染流程分析。

核心概念

• React Profiler 可以记录渲染时间线，定位多次渲染。
• memo、useMemo、useCallback 控制引用稳定性。
• 避免在渲染中创建新对象，减少 diff 成本。

实战步骤

• 使用 why-did-you-render 检测不必要的更新。
• 将大型列表交由虚拟滚动，仅渲染可视区域。
• 利用 Web Vitals 捕捉实际用户的交互指标。