useMemo 记忆化计算

最后更新：2026-10-28

useMemo 缓存计算结果：依赖不变时直接返回上次结果，跳过昂贵的过滤、排序、映射，也用于保持对象/数组的引用稳定（配合依赖数组和 memo 子组件）。它是性能优化手段，不是语义保证。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

const result = useMemo(() => {
  return computeHeavy(list, keyword)   // 昂贵计算
}, [list, keyword])                    // 依赖不变就不重算

factory	无参函数，返回要缓存的值。只在依赖变化时重新执行。
deps	依赖数组：任一项变化时重算；空数组则只在挂载时计算一次。

返回值：返回 factory 的缓存结果；依赖未变化时返回上一次的同一个引用。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

输入关键字时列表实时筛选；点「切换主题」只换背景色，不触发重新过滤（useMemo 缓存生效）。

💡 提示 两大用途：缓存昂贵计算、保持引用稳定。后者是「对象依赖 + memo 子组件」不掉链子的前提。

⚠️ 注意 两数相加这类简单计算套 useMemo 反而更慢更难读——先测出慢，再优化。

ℹ️ 说明 缓存可能被 React 丢弃（如离屏组件重新挂载），不能把 useMemo 当作「必定缓存」的语义保证。

更多案例整理中，敬请期待。

Q useMemo 和 useCallback 的区别？

A useMemo 缓存「计算出的值」，useCallback 缓存「函数引用」；后者等价于 useMemo(() => fn, deps)。

Q 依赖写 [] 安全吗？

A 只有 factory 不读任何外部响应式值才安全；读了 state/props 却不列入依赖，会拿到过期结果。

Q 所有计算都加 useMemo 会更快吗？

A 不会。缓存本身有内存与比较成本，简单计算加 memo 是负优化，只给真正的热点使用。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。