React 的性能优化有非常多成熟的方案
一、组件层级的性能优化
1. 使用 React.memo（函数组件）
避免父组件渲染时导致子组件无意义渲染。
const Child = React.memo(function Child(props) {return <div>{props.value}</div>;
});
适用：
-
props 不变时避免重复渲染
-
PureComponent 的函数组件版
2. 使用 shouldComponentUpdate（类组件）
优化类组件：
shouldComponentUpdate(nextProps, nextState) {return nextProps.value !== this.props.value;
}
3. 使用 useCallback / useMemo 缓存函数和变量
避免每次 render 都创建新对象或新函数：
const handleClick = useCallback(() => {doSomething();
}, []);const expensiveValue = useMemo(() => heavyCompute(data), [data]);
4. 避免在 render 中创建对象 / 函数 / 数组
不推荐：
<Component style={{ color: 'red' }} />
推荐：
const style = { color: 'red' };
<Component style={style} />
二、渲染相关的优化
5. 合理分割组件（粒度越细越能减少渲染）
减少无关组件刷新，如：
-
表格中每一行都是一个组件
-
表单中的每个字段独立组件
6. 懒加载 (React.lazy + Suspense)
按需加载组件可减少初次加载时间：
const SomePage = React.lazy(() => import('./SomePage'));
7. 使用 key 优化列表渲染
确保 key 唯一且稳定，避免 diff 失败导致重渲染。
推荐：
id, uuid
不要用：
index
三、状态管理层级优化
8. 减少全局状态；保持状态尽可能本地化
不要把所有数据放到 Redux、MobX、Context
组件自己的状态放 useState
状态越靠上 → 重渲染越多。
9. 避免 Context 大范围使用
Context 变化会让所有消费者重新渲染。
优化方式：
-
基于 selector 的 use-context-selector
-
将 context 拆分更细
-
使用 Zustand / Jotai / Recoil 等更高效的状态库
10. Redux 优化
-
使用 reselect 缓存计算结果
-
使用 useSelector 时拆分 selector
-
使用 RTK（Redux Toolkit）减少不可预期行为
四、渲染内容优化（最重要的两类）
11. 大量数据渲染 → 虚拟列表（Virtualized List）
如：
-
react-window
-
react-virtualized
适用：
表格、聊天、长列表等上万行数据。
12. 大组件首次加载很慢 → 分包 + 懒加载
使用：
-
React.lazy
-
dynamic import
-
Webpack splitChunks
也可用：
-
路由懒加载
-
分模块打包
五、数据请求层优化
13. 避免重复请求（使用缓存）
库推荐：
-
SWR
-
React Query
支持自动缓存、重新加载、去重等功能。
14. 使用节流/防抖
搜索、滚动监听、表单输入等场景可以减少触发频率。
六、DOM 和浏览器层面优化
15. 使用 requestAnimationFrame 优化动画
避免在高频事件中同步操作 DOM。
16. 使用 Web Worker 处理重计算
避免主线程阻塞 UI：
heavyCalculateDataInWorker();
17. 使用 Suspense + 时间切片（React 18）
React18 的 concurrent mode 支持时间分片：
-
分段渲染
-
提升可响应性
最实用的“十条黄金法则”
-
能拆组件就拆组件
-
子组件包上 React.memo
-
回调用 useCallback
-
计算结果用 useMemo
-
大列表使用虚拟列表
-
按需加载路由 & 组件
-
避免 context 覆盖太广
-
Redux 用 RTK，selector 拆细
-
避免在 render 中创建对象
-
状态下放（越靠下越好）