useMemo详解

useMemo 是 React 提供的一个 Hook，用于缓存计算结果，避免每次组件渲染时都重复执行复杂或耗时的计算，从而提升性能。

基本用法

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 第一个参数：返回要缓存的计算结果的函数（通常是复杂或昂贵的计算）。
• 第二个参数：依赖项数组，只有当数组中的依赖发生变化时，useMemo 才会重新执行计算函数，否则直接返回上一次缓存的结果。

工作原理

• 每次组件渲染时，React 会检查依赖项数组中的值是否发生变化。
• 只有依赖项发生变化时，useMemo 才会重新执行计算函数，否则直接返回上一次缓存的值。
• 这不仅节省了计算资源，还能保证引用的一致性，避免因引用变化导致的子组件不必要的重新渲染。

适用场景

• 复杂、耗时的计算：如大数据的过滤、排序、图表数据生成等。
• 保持引用稳定：如将对象或数组作为 props 传递给子组件时，避免因引用变化导致子组件重复渲染。

注意事项

• 依赖项数组要准确：如果依赖项写漏，可能导致缓存结果不是最新的，产生 bug。
• 不要滥用：仅在性能瓶颈或引用频繁变化导致子组件重复渲染时使用。过度使用会增加代码复杂度。
• 缓存的是“值” ，不是“函数”。如果要缓存回调函数，应该用 useCallback。

示例

function ProductList({ products, filter }) {
  // 只在 products 或 filter 变化时重新计算 filteredProducts
  const filteredProducts = useMemo(() => {
    return products.filter(product => product.name.includes(filter));
  }, [products, filter]);

  return (
    <ul>
      {filteredProducts.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

---

与 useCallback 的区别

Hook	作用	返回内容
useMemo	缓存计算结果	记忆化的值
useCallback	缓存函数引用	记忆化的函数

总结

useMemo 通过依赖项数组缓存计算结果，提升性能并保持引用一致性，适合用于复杂计算和优化子组件渲染。