以下是 React 常用的优化方式总结表：
| 优化方式 | 描述 | 适用场景 |
|---|---|---|
| React.memo | 记忆化函数组件，避免不必要的重新渲染 | 纯展示组件，props 稳定的组件 |
| useMemo & useCallback | 缓存计算结果和函数，避免重复计算或函数重新创建 | 复杂计算、传递回调函数给子组件 |
| 代码分割与懒加载 | 使用 React.lazy 和 Suspense 按需加载组件，减少初始加载时间 | 页面级别组件、次要模块 |
| 减少组件的重渲染 | 避免直接修改 state、优化 props 传递结构、拆分大组件 | 需要控制组件更新范围的情况 |
| 虚拟化技术 | 使用 react-window 等库实现列表虚拟化，减少渲染数据量 | 数据量大的长列表 |
| shouldComponentUpdate / React.PureComponent | 控制类组件的更新，避免不必要的重新渲染 | 类组件、不涉及深层数据结构 |
| 惰性状态初始化 | 使用 useState(() => { ... }) 只在初始化时执行复杂计算 | 复杂初始状态 |
| 优化 Reconciliation 过程 | 使用唯一的 key 属性、减少不必要的包裹标签 | 渲染列表、深层嵌套组件 |
| 清理无用事件监听器 | 在组件卸载时清除无用事件监听器，避免内存消耗 | 需要全局事件监听的情况 |
| 开发工具辅助 | 使用 React DevTools Profiler 和 Bundle Analyzer 分析性能瓶颈 | 性能分析和打包优化 |
| 服务器端渲染（SSR）或静态生成（SSG） | 通过 Next.js 等框架预渲染页面，减少客户端渲染压力 | SEO 要求高或首屏加载速度要求高的应用 |
1. 使用 React.memo 进行组件记忆化
- 对于函数组件，
React.memo可以根据 props 是否变化决定是否重新渲染组件。若 props 没有变化，React.memo会直接返回上次渲染的结果，减少不必要的更新。 - 适用场景：纯展示组件或者输入 props 稳定的组件。
2. 使用 useMemo 和 useCallback 缓存值和函数
useMemo：用于缓存计算值，避免在每次渲染时重复执行计算。适合性能开销较大的计算操作。useCallback：用于缓存函数，特别是在传递给子组件的回调函数时，避免函数在每次渲染中被重新创建。- 适用场景：复杂计算、需要传递函数的子组件等。
3. 代码分割与懒加载
- 使用
React.lazy和Suspense实现代码分割，按需加载组件，减少初始加载时间。 - 可以将不重要的页面或组件进行懒加载，减少初始打包大小，提升首屏加载速度。
- 适用场景：页面级别的组件，或者次要模块、图表等大型组件。
4. 减少组件的重渲染
- 避免直接修改 state：要以不可变的方式更新 state，防止 state 误修改而导致不必要的重新渲染。
- 调整 props 传递结构：尽量减少传递不必要的 props，减少组件间不必要的依赖关系。
- 拆分组件：将较大组件拆分成小的独立组件，以便控制每个组件的更新范围。
5. 使用虚拟化技术
- 通过列表虚拟化（如
react-window和react-virtualized），只渲染视窗内的数据，而非一次性渲染整个列表，适合需要展示大量数据的列表。 - 适用场景：数据量较大的长列表，如聊天记录、数据表格等。
6. 使用 shouldComponentUpdate（类组件）或 React.PureComponent
- 在类组件中，可以通过
shouldComponentUpdate来判断组件是否需要更新，从而控制组件的渲染。 - React.PureComponent 通过浅比较 props 和 state 来决定组件是否需要重新渲染。
- 适用场景：类组件，且不涉及深层数据结构的更新。
7. 使用惰性状态初始化
- 如果 state 的初始值需要通过复杂计算得到，可以将计算逻辑放入
useState的惰性初始化函数中，即useState(() => { ... })。这样只会在初始化时计算一次，避免每次渲染都执行。
8. 减少 Reconciliation 过程中的工作量
- 关键字选择性更新（如
key）：当渲染列表时，使用唯一的key属性来帮助 React 区分元素，减少虚拟 DOM 的对比工作量。 - 子组件不要多余包装：尽量避免使用多余的
<div>标签包装，避免导致 DOM 树变深，影响更新效率。
9. 去除无用的事件监听器
- 对于在组件生命周期内只需要注册一次的事件监听器，可以在组件卸载时清理，以减少内存消耗和性能负担。
- 适用场景：需要全局事件监听的情况，如
resize、scroll等。
10. 开发工具辅助
- React DevTools Profiler：用于分析组件的渲染时间和性能瓶颈。
- Bundle Analyzer：查看打包体积，识别出可以优化的第三方库。
11. 使用服务器端渲染（SSR）或静态生成（SSG）
- Next.js 等框架支持服务器端渲染和静态生成，可以将页面预渲染，减少客户端渲染工作量。
- 适用场景：SEO 要求较高或首屏加载速度要求高的应用。
