react中useMemo优化的实现

好的，我们来深入讲讲 React 的 useMemo 以及它的优化思路。我们一步步拆解，确保你能真正理解什么时候用、怎么用，以及可能的坑。

1️⃣ useMemo 的本质

useMemo 是一个 性能优化 Hook，它的作用是 缓存计算结果，避免在每次渲染时重复计算开销大的值。

语法：

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

• 第一个参数：返回一个值的函数（这个值会被缓存）
• 第二个参数：依赖数组，只有依赖发生变化时，函数才会重新执行

💡 核心：useMemo 不是用来缓存组件的渲染，而是用来缓存计算结果。

2️⃣ 典型使用场景

场景 1：开销大的计算

function MyComponent({ number }) {
  const factorial = useMemo(() => {
    console.log('计算阶乘');
    let result = 1;
    for (let i = 2; i <= number; i++) {
      result *= i;
    }
    return result;
  }, [number]);
  return <div>{factorial}</div>;
}

✅ 优化点：

• 如果没有 useMemo，每次父组件渲染，阶乘都会重新计算。
• 用 useMemo 后，只有 number 改变时才计算。

场景 2：避免引用类型变化导致子组件重复渲染

function Parent({ data }) {
  const filteredData = useMemo(() => data.filter(item => item.active), [data]);
  return <Child data={filteredData} />;
}

• 如果不加 useMemo，每次渲染 Parent 时，filteredData 都是一个新数组，Child 会触发不必要的渲染。
• 用 useMemo 缓存数组引用，减少 Child 渲染。

3️⃣ 使用 useMemo 的注意点

不要滥用

• useMemo 本身也有开销（创建函数、比较依赖）。
• 小计算、简单对象不要用，可能比不使用更慢。
• 适合计算复杂、数据量大或依赖变化少的场景。

依赖数组必须准确

• 缺失依赖会导致缓存结果不同步
• 多余依赖会降低性能

不缓存副作用

• useMemo 不能替代 useEffect
• 它只是缓存值，不执行副作用（比如 API 请求）

4️⃣ 优化策略总结

缓存重计算值：

• 复杂计算、大数组操作、大对象计算
• 示例：阶乘、排序、过滤、聚合计算

缓存引用类型：

• 避免每次渲染生成新的数组/对象，导致子组件不必要渲染
• 常配合 React.memo 或 useCallback

分离组件：如果父组件渲染频繁，且子组件依赖开销大的计算，考虑用 useMemo 或拆成独立组件

依赖最小化：确保依赖数组只放必须的值，避免频繁失效

⚡ 小技巧

配合 React.memo：

const Child = React.memo(({ data }) => {
  console.log('Child 渲染');
  return <div>{data.length}</div>;
});
function Parent({ items }) {
  const activeItems = useMemo(() => items.filter(item => item.active), [items]);
  return <Child data={activeItems} />;
}

Child 只在 activeItems 改变时渲染，而不是每次 Parent 渲染。

配合 useCallback 缓存函数：当函数作为 prop 传递时，避免引用变化

const handleClick = useCallback(() => console.log('点击'), []);

到此这篇关于react中useMemo优化的实现的文章就介绍到这了,更多相关react useMemo优化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！