对比分析useMemo和useCallback的相同点和不同点。

useMemo 和 useCallback 是 React 中用于性能优化的两个重要 Hook，它们基于相同的依赖项比较机制，但适用场景不同。以下是它们的详细对比：

相同点

1. 核心作用一致undefined两者都用于缓存数据，避免在组件每次渲染时重复执行不必要的操作，从而优化性能。
2. 依赖项机制相同undefined都通过第二个参数（依赖数组）控制缓存失效：
   • 当依赖项未发生变化时，返回缓存的结果
   • 当依赖项变化时，重新计算/创建新值
3. 使用原则相似
   • 都不应过度使用（本身有缓存比较的开销）
   • 依赖数组必须包含所有外部变量，否则可能导致缓存结果与预期不符

不同点

示例对比

1. useMemo 缓存计算结果

// 缓存复杂计算的结果
const total = useMemo(() => {
  // 假设这是一个耗时计算
  return data.reduce((sum, item) => sum + item.value, 0);
}, [data]); // 仅当 data 变化时重新计算

2. useCallback 缓存函数

// 缓存回调函数
const handleDelete = useCallback((id) => {
  setData(data.filter(item => item.id !== id));
}, [data]); // 仅当 data 变化时重新创建函数

// 传递给子组件时，不会触发不必要的重渲染
return <ItemList onDelete={handleDelete} />;

总结

• 当需要缓存函数时，优先使用 useCallback（语义更清晰）。
• 当需要缓存非函数类型的计算结果时，使用 useMemo。
• 两者的核心优化目标都是：减少不必要的计算/创建操作，避免子组件因依赖变化而产生的多余渲染。