如何正确使用useMemo Hook实现同依赖下仅执行一次计算？

你的核心问题是：React的useMemo仅在单个组件实例的重渲染周期内缓存结果，不同组件实例、或同一组件多次调用自定义Hook时，哪怕依赖相同，都会重新触发计算。这是因为useMemo的缓存是绑定在组件内部的，并非全局共享。

一、原生实现方案 #

可以通过模块级缓存结合useMemo实现跨实例的结果复用，利用模块级变量的单例特性来维护全局缓存：

// 模块级全局缓存，所有Hook调用共享
const calculationCache = new Map();

// 假设这是你的耗时计算函数
const expensiveCalculation = (data, dep) => {
  return data.reduce((acc, curr) => acc + curr * dep, 0);
};

const hugeData = new Array(100).fill(1000);

const useCalculationHook = (dependency) => {
  const sum = useMemo(() => {
    // 先检查缓存中是否存在对应依赖的结果
    if (calculationCache.has(dependency)) {
      return calculationCache.get(dependency);
    }
    // 缓存不存在则执行计算并存入缓存
    const result = expensiveCalculation(hugeData, dependency);
    calculationCache.set(dependency, result);
    console.log("re-calculated", dependency);
    return result;
  }, [dependency]);

  return sum;
};

注意事项： #

• 如果dependency是引用类型（如对象、数组），不能直接用引用作为Map的键，需要将其转换为稳定的字符串（比如JSON.stringify(dependency)），但要注意序列化性能和循环引用问题。
• 模块级缓存不会自动清理，若需控制缓存大小或过期时间，可手动实现LRU逻辑，或结合useEffect在组件卸载时清理对应缓存（如果需要）。

二、第三方库方案 #

如果不想手动维护缓存，可以使用成熟的memoize库，以下是两个常用选项：

1. memoize-one（轻量，缓存最近一次结果） #

memoize-one仅缓存最近一次的参数组合结果，适合大多数场景，体积极小：

import memoizeOne from 'memoize-one';

const expensiveCalculation = (data, dep) => {
  return data.reduce((acc, curr) => acc + curr * dep, 0);
};

// 对计算函数进行memoize包装
const memoizedCalc = memoizeOne((data, dep) => {
  console.log("re-calculated", dep);
  return expensiveCalculation(data, dep);
});

const hugeData = new Array(100).fill(1000);

const useCalculationHook = (dependency) => {
  // 用useMemo确保组件重渲染时不会重复创建memoized函数（可选，若hugeData是动态值需加入依赖）
  const sum = useMemo(() => memoizedCalc(hugeData, dependency), [hugeData, dependency]);
  return sum;
};

2. lru-cache（支持多结果缓存，可控制缓存大小） #

如果需要同时缓存多个不同依赖的结果，可使用lru-cache实现有限大小的缓存，避免内存溢出：

import LRU from 'lru-cache';

// 配置缓存最大容量为10，超过则自动淘汰最久未使用的结果
const cache = new LRU({ max: 10 });

const expensiveCalculation = (data, dep) => {
  return data.reduce((acc, curr) => acc + curr * dep, 0);
};

const hugeData = new Array(100).fill(1000);

const useCalculationHook = (dependency) => {
  const sum = useMemo(() => {
    const cacheKey = dependency;
    if (cache.has(cacheKey)) {
      return cache.get(cacheKey);
    }
    const result = expensiveCalculation(hugeData, dependency);
    cache.set(cacheKey, result);
    console.log("re-calculated", dependency);
    return result;
  }, [dependency]);
  return sum;
};

内容的提问来源于stack exchange，提问作者Malkhazi Dartsmelidze