useMemo是否真的实现记忆化？深入解析其缓存逻辑

直接结论：useMemo并没有实现维基百科定义的「经典记忆化」，它仅能在组件重渲染时，通过比对依赖项与上一次是否一致，来决定是否复用上一次的计算结果——它只维护「上一次渲染的结果」这一个缓存，而非一张映射所有输入与结果的缓存表。

结合你的示例分析 #

你给出的代码中：

const [a, setA] = useState(0);

const aSquare = useMemo(() => {
  console.log("recalculating aSquare value");
  return a ** 2;
}, [a]);

当执行setA(10)→setA(2)→setA(10)的操作时，第三次设置a=10仍会触发重新计算，原因很简单：

• 第一次渲染（a=10）：计算结果并缓存
• 第二次渲染（a=2）：依赖项变化，重新计算并覆盖之前的缓存
• 第三次渲染（a=10）：依赖项与上一次（a=2）不同，所以重新计算，再覆盖缓存

可见useMemo的缓存是「单次覆盖式」的，不会保留历史输入的结果映射。

对比官方定义与经典记忆化 #

• React官方文档描述的「在重新渲染之间缓存计算结果」，核心是避免无关重渲染带来的重复计算——比如组件因父组件props变化、其他state更新而重渲染时，只要useMemo的依赖项没变化，就复用上次结果，这是它的核心设计目标。
• 维基百科定义的「经典记忆化」，是通过存储所有输入对应的结果，实现相同输入重复出现时直接返回缓存，这需要维护一张全量的输入-结果映射表，和useMemo的设计逻辑完全不同。

为什么React要这么设计？ #

useMemo的定位是渲染性能优化工具，而非通用的记忆化工具：

• 如果维护全量缓存，会带来额外的内存开销，尤其是当输入值较多或结果体积较大时，可能引发内存问题。
• React的渲染模型中，组件的重渲染通常是由状态/ props变化触发的，useMemo的单次缓存已经能覆盖绝大多数「避免不必要计算」的场景。

如何实现经典记忆化？ #

如果需要实现维基百科定义的经典记忆化，可以自行基于useRef维护一个缓存映射表：

const [a, setA] = useState(0);
const cacheRef = useRef(new Map());

const aSquare = () => {
  if (cacheRef.current.has(a)) {
    return cacheRef.current.get(a);
  }
  console.log("recalculating aSquare value");
  const result = a ** 2;
  cacheRef.current.set(a, result);
  return result;
};

注意：这种方式需要自行处理缓存清理（比如组件卸载时清空Map，或根据LRU策略淘汰旧缓存），避免内存泄漏。

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