React性能优化
# 分维度整理
# 渲染优化（React 层面）
- 减少不必要重渲染
◦ 组件：React.memo 纯组件浅对比 props；
◦ 函数：useCallback缓存回调传给子组件；
◦ 计算值：useMemo缓存复杂计算；
◦ 拆分组件，细粒度更新，避免顶层状态变更全树重渲染。
- 长列表优化
◦ 虚拟列表react-window / react-virtualized，只渲染可视区域DOM；
◦ 分页、懒加载，减少一次性渲染数据量。
- 副作用优化
◦ useEffect正确填写依赖，及时清理定时器、事件监听；
◦ 大量 DOM 操作放 useLayoutEffect，避免多次回流。
- 状态优化
◦ 拆分 useState，局部状态局部更新；
◦ 复杂状态用 useReducer，集中更新逻辑。
# 资源加载优化
静态资源：图片压缩、
webp格式、懒加载、CDN；代码分割：路由懒加载、动态
import，分包减小首屏包体积；缓存策略：浏览器强缓存、协商缓存；
第三方库按需引入，移除冗余依赖。
# 浏览器渲染层优化
减少
DOM操作，批量修改DOM；避免频繁回流重绘，使用
transform、opacity开启GPU加速；防抖节流处理高频事件（
scroll、resize、input）。
# 网络请求优化
请求合并、接口分页；
请求缓存
SWR/React Query，重复请求拦截；避免渲染中重复发请求。
上次更新: 2026/08/18, 09:19:37