React 性能优化的 8 个抓手
性能优化的本质是让用户更快地看到可用界面。抓手包括:避免不必要渲染、减少重排、提升网络与数据层效率等。
渲染层优化
使用 memo、useMemo、useCallback 避免重复渲染,合理切分组件与使用 key。
列表与可视化
长列表使用虚拟化(如 react-window),图片使用懒加载与合适的尺寸。
数据层优化
缓存与请求合并、增量更新,后端提供分页与筛选,避免在前端进行昂贵计算。
度量与监控
通过性能指标(FCP/LCP/TTI)与监控平台定位瓶颈,持续改进。
优化是系统工程,关键在于度量与迭代。