1. 性能问题的根源
React 应用的性能问题主要来自以下几个方面：
- 不必要的重新渲染：组件在 props 或 state 未变化时仍然重新渲染。
- 昂贵的计算：在渲染过程中进行复杂计算，阻塞主线程。
- 大型列表渲染：一次性渲染大量 DOM 节点，导致页面卡顿。
- 包体积过大：初始加载时间过长，影响首屏体验。
2. 减少不必要的重新渲染
这是 React 性能优化中最常见的问题。React 默认会在父组件更新时重新渲染所有子组件， 即使子组件的 props 没有变化。
2.1 React.memo
React.memo 是一个高阶组件，用于对函数组件进行浅比较：
- 只有当 props 发生变化时，组件才会重新渲染。
- 适用于 props 变化不频繁的组件。
- 注意：如果 props 是对象或数组，需要确保引用稳定。
2.2 useMemo 和 useCallback
这两个 Hook 用于缓存计算结果和函数引用：
- useMemo：缓存计算结果，避免每次渲染都重新计算。
- useCallback：缓存函数引用，避免子组件因为函数引用变化而重新渲染。
使用原则：不要过度使用，只在确实有性能问题时使用。过度使用反而会增加内存开销。
3. 列表渲染优化
渲染大量列表项是性能问题的重灾区。
3.1 虚拟滚动（Virtual Scrolling）
虚拟滚动只渲染可见区域的列表项，大幅减少 DOM 节点数量：
- 使用
react-window或react-virtualized等库。 - 适用于列表项数量超过 100 的场景。
- 注意处理滚动位置、选中状态等交互逻辑。
3.2 分页和懒加载
对于超长列表，分页和懒加载是更简单的方案：
- 初始只加载第一页数据。
- 滚动到底部时加载更多。
- 使用
Intersection Observer检测滚动位置。
4. 代码分割与懒加载
减少初始包体积可以显著提升首屏加载速度。
4.1 路由级别的代码分割
使用 React.lazy 和 Suspense 实现路由级别的代码分割：
- 每个路由对应一个独立的 chunk。
- 用户访问时才加载对应的代码。
- 可以显著减少初始包体积。
4.2 组件级别的懒加载
对于大型组件，也可以使用懒加载：
- 图表组件、编辑器组件等重型组件。
- 只在需要时才加载，减少初始包体积。
- 注意处理加载状态和错误处理。
5. 状态管理优化
状态管理的选择和使用方式也会影响性能。
5.1 状态提升 vs 状态下沉
状态应该放在哪里？原则是：
- 状态只被一个组件使用 → 放在该组件内部。
- 状态被多个组件共享 → 提升到最近的公共父组件。
- 全局状态 → 使用 Context 或状态管理库（Redux、Zustand 等）。
5.2 Context 优化
Context 的使用需要注意：
- 避免将频繁变化的状态放在 Context 中，会导致所有消费者重新渲染。
- 将 Context 拆分为多个，按功能域划分。
- 使用
useMemo缓存 Context 的值。
6. 性能监控与分析
优化之前，先要知道问题在哪里。
6.1 React DevTools Profiler
React DevTools 的 Profiler 工具可以：
- 记录组件渲染时间。
- 识别渲染慢的组件。
- 分析重新渲染的原因。
6.2 性能指标
关注以下性能指标：
- FCP（First Contentful Paint）：首屏内容渲染时间。
- LCP（Largest Contentful Paint）：最大内容渲染时间。
- TTI（Time to Interactive）：可交互时间。
- FPS：帧率，保持在 60fps 以上。
7. 实际案例：优化一个数据表格
假设你有一个包含 1000 行数据的表格，每行有 10 列，初始渲染很慢。优化步骤：
- 使用虚拟滚动：只渲染可见的 20-30 行，减少 DOM 节点。
- Memo 化行组件：使用
React.memo避免行组件不必要的重新渲染。 - 优化单元格渲染：使用
useMemo缓存单元格内容。 - 防抖搜索：搜索输入使用防抖，减少过滤计算次数。
- 分页加载：如果数据量更大，考虑分页加载。
8. 小结
React 性能优化是一个系统性的工作，需要从多个维度入手：
- 减少渲染：使用 memo、useMemo、useCallback 等。
- 优化列表：虚拟滚动、分页、懒加载。
- 代码分割：路由和组件级别的懒加载。
- 状态管理：合理设计状态结构，避免不必要的更新。
- 性能监控：使用工具识别瓶颈，数据驱动优化。
最重要的是：不要过早优化。先确保功能正确，再考虑性能。 使用性能分析工具找到真正的瓶颈，有针对性地优化，而不是盲目地添加 memo 和 useMemo。
评论区