type
status
date
slug
summary
tags
category
icon
password
React 性能优化总结
React 是一个强大的 UI 库，但在构建复杂应用时，性能问题可能会悄悄出现。本文将系统性地总结 React 性能优化的常见手段和最佳实践，帮助你打造更加流畅高效的前端应用。
一、使用 React.memo 避免不必要的重新渲染
React.memo 是一个高阶组件，用于缓存函数组件的渲染结果。只有当 props 改变时组件才会重新渲染。注意事项
- 对于复杂 props（对象、数组、函数），应结合
useCallback/useMemo避免引用变化导致重新渲染。
二、使用 useCallback 和 useMemo
useCallback
缓存函数引用，避免子组件因 props 变化重新渲染。
useMemo
缓存计算结果，避免重复执行开销大的计算。
三、合理拆分组件 + 懒加载
- 将页面拆成多个小组件，配合
React.lazy和Suspense实现懒加载：
- 避免一次性加载过多内容。
四、列表渲染优化：key 的使用和虚拟化
key 的正确使用
使用稳定、唯一的 key 避免 diff 误判导致重排：
虚拟列表
对于长列表，使用如
react-window / react-virtualized 等库实现只渲染可见部分：五、避免不必要的 context 更新
React 的 Context 在 value 变化时会重新渲染所有消费它的组件。可用如下方式优化：
- 使用
useMemo包裹传递的 value：
- 拆分多个 Context，按需更新。
六、性能监测工具推荐
- React DevTools Profiler：分析组件渲染时间和频率。
- Why Did You Render：识别组件是否发生了不必要的重新渲染。
七、其他优化建议
- 使用生产环境构建（React 会移除开发警告和额外逻辑）。
- 减少 Refs 的使用，避免绕过 React 的响应式机制。
- 拆分状态管理逻辑到外部库（如 Redux）减轻组件负担。
总结
React 性能优化没有银弹，更多是通过细节和工程手段累积而来的。建议从性能瓶颈处入手，结合实际场景使用 memo、lazy、虚拟列表、useCallback 等技术，才能真正让应用跑得更快。
- 作者:wdkang
- 链接:https://blog.wdkang.com/article/react-optimization
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
.png?table=block&id=1ee896c5-9558-8082-9649-e66950102aad&t=1ee896c5-9558-8082-9649-e66950102aad)
