Marico's space
React 性能优化：让网站更快的实用技巧
最近折腾了一个数据密集型的 React 项目，上线后被用户吐槽卡顿，排查了一圈发现踩了不少坑。这篇把 React 性能优化的实战经验整理出来，都是实打实能落地的东西。
性能对现代 Web 应用的重要性不用多说。页面加载慢、频繁卡顿、JS 体积臃肿，这些都会直接影响用户体验、搜索排名和转化率。React 本身提供了不少性能优化工具，但真正用好它们需要一些实战技巧。
下面这些方法都是经过线上验证的，从减少无效渲染到减小包体积，覆盖了主要的性能瓶颈点。
为什么 React 性能值得关注
一个性能良好的 React 应用能带来：
更好的用户体验
更高的 SEO 排名
更低的跳出率
更好的 Core Web Vitals 指标
更快的首屏渲染
更高的转化率
减轻服务器和浏览器的负担
哪怕是一点点的性能提升，对用户满意度的影响都是实打实的。
先找瓶颈再优化
优化之前先摸清楚问题在哪，别瞎优化。
这几把利器可以用起来：
React Developer Tools（React 开发者工具）
React Profiler（性能分析器）
Chrome DevTools（浏览器调试工具）
Lighthouse
PageSpeed Insights
Web Vitals Extension（Web 指标浏览器扩展）
找到真正的瓶颈点再动手，不要为了优化而优化。
避免无效渲染
React 应用卡顿最常见的原因就是组件被无效渲染。
用 React.memo() 给组件加缓存
React.memo() 可以让函数组件在 props 没变化时不重新渲染。
收益很明显：
渲染更快
CPU 占用更低
界面响应更流畅
适合用在可复用的 UI 组件上，比如商品卡片、按钮、导航菜单这类。
缓存开销大的计算
那些耗时的计算逻辑，不应该在每次渲染时都跑一遍。
用 useMemo() 缓存计算结果。
典型场景：
商品筛选
价格计算
搜索结果处理
仪表盘数据聚合
大数据量处理
Memoization（记忆化）能省掉大量不必要的计算，体感提升明显。
稳住事件处理函数
组件每次渲染，函数都会被重新创建一遍。
用 useCallback() 缓存传递给子组件的事件处理函数。
常见场景：
加入购物车
删除商品
搜索触发
表单提交
按钮点击处理
函数引用稳定了，子组件的无效更新自然就少了。
代码分割别偷懒
JS 体积太大，首屏加载必然慢。
用 React 自带的 lazy loading（懒加载）特性，把代码拆成小块按需加载。
好处：
首屏加载更快
单个体积更小
用户体验更好
节省带宽
用户访问到哪个页面再加载那个页面的代码，而不是一股脑全塞给浏览器。
组件懒加载安排上
不是每个组件都需要第一时间加载。
这些模块可以考虑懒加载：
商品详情页
仪表盘模块
图表组件
报表页面
设置页面
图片画廊
首屏需要的 JS 少了，加载速度自然就上去了。
图片优化是重头戏
页面体重灾区往往是图片。
最佳实践：
压缩图片体积
用 WebP 或 AVIF 这种现代格式
提供响应式图片
开启懒加载
避免使用过大的素材
图片小了，加载速度和 Core Web Vitals 都会好看很多。
大列表必须虚拟化
一次渲染几千个 DOM 节点，再好的机器也扛不住。
比如这些场景：
商品目录
订单历史
客户列表
库存表格
用列表虚拟化库，只渲染屏幕上可见的那部分数据。
搜索输入要防抖
搜索框每次按键都发请求，服务器压力山大，用户体验也差。
加上防抖可以：
减少无效 API 调用
提升界面响应速度
降低服务器负载
用户体验更顺滑
等用户停笔几百毫秒再发请求，避免了大量冗余的网络开销。
状态管理要克制
别什么都往 state 里塞。
几个原则：
状态尽量保持本地化。
避免深层嵌套的状态对象。
不相关的状态拆成独立的 hook。
更新时只动需要改的数据。
Context（上下文）用于频繁变化的值时要谨慎。
状态管理做得好，无效渲染自然就少了。
API 请求优化
网络层面的优化手段：
缓存 API 响应
使用分页
渐进式加载数据
只请求需要的字段
取消不再需要的请求
数据获取效率上去了，加载时间和响应速度都会有明显改善。
分页和无限滚动
一次加载几千条商品数据，渲染时间爆炸。
正确做法：
商品列表走分页。
滚动到底部再加载更多。
小批量获取数据。
这些方式能显著降低内存占用，提升整体性能。
包体积能压就压
减小 JS 体积的方法：
清理没用到的依赖
只引入需要的模块
去重重复的包
压缩生产环境构建产物
开启 tree shaking（摇树优化）
包小了，所有设备的加载速度都会受益。
静态资源要缓存
浏览器缓存设置起来，针对这些：
图片
CSS
JavaScript
字体
图标
缓存好了，用户二次访问时就不用重新下载，加载速度直接起飞。
紧盯 Core Web Vitals
这几个指标要持续关注：
LCP（Largest Contentful Paint，最大内容绘制）
FID（First Input Delay，首次输入延迟）
INP（Interaction to Next Paint，交互到下次绘制）
CLS（Cumulative Layout Shift，累计布局偏移）
这些指标做好了，用户体验和搜索排名都会上一个台阶。
生产构建要做的事
部署之前：
跑生产环境构建。
清理掉调试代码。
压缩 JS 和 CSS。
用 Gzip 或 Brotli 压缩资源。
按需开启 source maps。
生产环境优化到位了，交付速度和运行效率才有保障。
常见的坑别踩
这几个问题在实际项目中出现频率很高：
渲染了不需要渲染的组件
全局状态对象过于庞大
一次拉取了过多数据
有 memoization（记忆化）机会却没利用
所有路由一股脑全加载
依赖里留了没用的包
在 render 方法里写了低效循环
避开这些坑，性能表现会有质的飞跃。
实战检查清单
可复用组件加上 React.memo()。
耗时计算用 useMemo() 缓存。
事件处理函数用 useCallback() 稳住。
懒加载和代码分割安排上。
图片上线前压缩好。
大列表记得虚拟化。
适度缓存 API 响应。
大数据集走分页。
Core Web Vitals 定期盯。
持续做性能分析和优化。
写在最后
React 开箱即用的性能已经不错了，但要做到真正丝滑的体验，还是得在细节上下功夫。把无效渲染控制住、包体积压下来、图片优化到位、懒加载用起来、Core Web Vitals 盯紧，这样做出来的应用才能既快又稳。
不管你做的是电商平台、SaaS 系统还是企业官网，这些 React 性能优化的思路都能派上用场。性能这东西，优化永无止境，但方向对了，每一步都是进步。