比较useCallback、useMemo 和 React.memo

一、核心概念解析

二、详细说明与代码示例

1、useCallback： 缓存函数引用

const memoizedFn = useCallback(() => {// 函数逻辑
}, [dependencies]);

• 解决的问题： 防止函数引用频繁变化导致子组件无效重渲染
• 典型场景：
  • 函数作为 props 传递给优化过的子组件（React.memo）
  • 函数作为其他 Hook 的依赖项（如useEffect）

// 父组件
function Parent() {const [count, setCount] = useState(0);// ✅ 缓存函数引用const increment = useCallback(() => setCount(c => c + 1), []);return <Child onIncrement={increment} />;
}// 子组件（使用 React.memo 优化）
const Child = React.memo(({ onIncrement }) => {console.log('子组件渲染');return <button onClick={onIncrement}>+</button>;
});

2、useMemo：缓存计算结果

const memoizedValue = useMemo(() => {// 复杂计算return computeExpensiveValue(a, b);
}, [a, b]);

• 解决的问题： 避免重复执行昂贵的计算
• 典型场景：
  • 复杂计算（如数据转换、筛选）
  • 保持对象/数组引用稳定（避免作为props传递时触发重渲染）

function Component({ items }) {// ✅ 缓存计算结果const filteredItems = useMemo(() => {return items.filter(item => item.value > 100);}, [items]);return <List items={filteredItems} />;
}

React.memo: 缓存组件渲染

const MemoizedComponent = React.memo(Component, arePropsEqual?);

• 解决的问题： 避免父组件更新导致子组件不必要的重渲染
• 工作方式：
  • 对props进行浅比较（可自定义比较函数）
  • props未变化时复用上次渲染结果

// 基础用法
const UserCard = React.memo(({ user }) => {return <div>{user.name}</div>;
});// 自定义比较函数
const UserCard = React.memo(({ user }) => {...},(prevProps, nextProps) => prevProps.user.id === nextProps.user.id
);

三、三者区别对比

四、协同工作示例

import React, {useState, useCallback, useMemo} from 'react';// 使用React.memo优化的子组件
const Chart = React.memo((data, onClick) => {console.log('渲染');return <svg onClick={onClick}>...</svg>;
})function Dashboard() {const [data, setData] = useState([]);const [filter, setFilter] = useState('month');// ✅ 缓存函数引用const handleClick = useCallback(() => {console.log('图表点击');}, []);//✅ 缓存计算结果const filteredData = useMemo(() => {return data.filter(d => d.period === filter);}, [data, filter]);return (<div><Chartdata={filteredData}  // 稳定引用onClick={handleClick}  // 稳定引用/></div>);
}

优化效果：
1、filter变化 → filteredData重新计算 → Chart重渲染
2、父组件状态更新 → handleClick引用不变 → Chart 不重渲染
3、点击图表 → 触发缓存的handleClick

五、使用误区与最佳实践

常见错误：

// ❌ 错误1：缺少依赖项
const badCallback = useCallback(() => {console.log(count);  // 永远输出初始值
}, []);  // 缺少count 依赖// ❌ 错误2：滥用useMemo
const simpleValue = useMemo(() => 42, []);  // 直接使用 const 更高效// ❌ 错误3：期待 React.memo 深比较
React.memo(Comonent);  // 默认只做浅比较

黄金法则：
1、按需优化： 先用常规写法，出现性能问题再优化
2、组合使用：
- React.memo + useCallback 优化组件树
- useMemo + useCallback 稳定复杂依赖
3、依赖诚实： 始终声明所有依赖项
4、避免深比较： 复杂对象考虑使用ID比对而非完整对象

六、性能影响分析

经验总结： 在10%需要优化的关键路径上使用这些API，避免在简单组件中过度优化。