前端学习笔记
🧑💻 有点意思
useMemo和react.memo有什么区别，适合在哪里使用
🤖 Assistant
useMemo和React.memo都是React性能优化工具，但用途和使用场景有本质区别：
一、核心区别
| React.memo | useMemo | |
|---|---|---|
| 用途 | 组件级渲染缓存 | 值计算结果缓存 |
| 应用对象 | 函数组件 | 组件内部的具体计算值 |
| 触发条件 | Props变化时触发重渲染 | 依赖项变化时重新计算值 |
| 对比方式 | 默认浅对比props / 可自定义对比函数 | 依赖数组浅对比 |
二、React.memo（组件级优化）
const MyComponent = React.memo(({ data }) => {
return <div>{data}</div>;
}, arePropsEqual?);
核心作用：缓存组件渲染结果，避免不必要的重渲染
适用场景：
- 父组件频繁re-render但子组件props未变化
- 渲染开销较大的展示型组件（如复杂表格、图表）
- 当Props中包含非原始类型时（建议结合useMemo/useCallback使用）
特点：
- 默认使用浅比较（shallow compare）props
- 可自定义比较函数作为第二个参数
- 类组件对应的是
PureComponent
三、useMemo（值级优化）
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
核心作用：缓存高开销计算的结果
适用场景：
- 复杂数据转换/计算（如大数据排序/过滤）
- 避免因re-render重复生成新对象引用（配合React.memo使用）
- 优化复杂动画计算值
- 需要稳定引用但依赖某些计算的变量
特点：
- 在渲染阶段同步执行（不要包含副作用）
- 依赖数组使用
Object.is比较 - 类似于Vue的computed属性
四、配合使用最佳实践
// 数据获取时配合使用
const UserList = React.memo(({ users }) => {
const filteredUsers = useMemo(() =>
users.filter(u => u.active),
[users]); // ✅ users数组引用不变时直接返回缓存
return (
<List items={filteredUsers} />
);
});
// 函数组件优化组合拳
const DataTable = React.memo(({ data }) => {
const processedData = useMemo(() =>
heavyProcessing(data),
[data]);
return <Table data={processedData} />;
});
五、使用原则
- 优先考虑渲染优化：先用React.memo优化组件层级结构
- 值类型优化后续进行：在组件内部使用useMemo优化具体计算
- 注意隐性成本：缓存本身需要内存和比较开销
- 引用稳定：当需要将memoized值作为其他Hook的依赖项时，必须用useMemo保证引用稳定
六、性能优化金字塔（推荐优化顺序）
- 正确的组件拆分（高内聚低耦合）
- 合理的React.memo使用
- 必要时的useMemo/useCallback优化
- 终极手段：shouldComponentUpdate（类组件）
通过组合使用这些优化工具，可以在保持代码可维护性的同时，显著提升React应用性能。但要注意避免过度优化——只有实际遇到性能瓶颈时再进行针对性优化才是最佳实践。
