记忆化是什么，JS如何优化函数性能

记忆化是一种专为纯函数设计的性能优化技术，通过将输入参数与计算结果建立精确映射并缓存，实现重复调用时跳过冗余计算；它不是通用缓存，也不等同于React中的useMemo或React.memo，必须手动实现、严格依赖无副作用和确定性输出，并需谨慎权衡参数序列化开销、内存占用与实际收益——真正有效的记忆化，只在“相同输入频繁出现且计算代价高昂”时才大放异彩。

记忆化是什么？它不是缓存，而是函数的“结果快照”

记忆化（memoization）是把一个纯函数的输入和对应输出存起来，下次遇到相同输入时直接返回缓存结果，跳过重复计算。它不等于通用缓存（比如 localStorage 或 Map 存任意数据），而是严格绑定在函数调用链上、按参数精确匹配的优化手段。

用 Map 手写最可控的记忆化包装器

自己实现比依赖库更清楚边界和限制。核心逻辑：用 JSON.stringify(args) 作 key（仅限可序列化的参数），或用 Map + 自定义 key 生成（支持更多类型）。注意：对象引用不同但内容相同时，JSON.stringify 可能误判；而 Map 对对象引用敏感，无法命中。

• 只对纯函数有效——无副作用、相同输入必得相同输出
• JSON.stringify 不能处理 undefined、function、Symbol、循环引用
• 若参数含 Date、RegExp，需提前转成字符串或时间戳
• 内存不会自动清理，长期运行要考虑 Map.size 上限或加 LRU 逻辑

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

useMemo 和 React.memo 不是记忆化函数的等价替代

这两个是 React 的渲染优化工具，只在组件重渲染周期内生效，且依赖 deps 数组浅比较。它们不改变函数本身的执行逻辑，也不保存跨渲染的函数调用结果。例如：

• 你用 useMemo(() => heavyCalc(a, b), [a, b])，只是避免每次渲染都调用 heavyCalc，但若父组件强制重渲染，它仍可能重新执行
• React.memo 比较的是组件 props 浅相等，跟函数内部是否被记忆无关
• 真正需要函数级记忆化（如递归斐波那契、解析树路径），必须用独立的 memoize 包装器

什么时候不该用记忆化？

它解决的是「重复计算」问题，不是「重复渲染」或「IO 延迟」。常见误用场景：

• 函数本身很快（比如 Math.max(...arr)），加记忆化反而因哈希和查找拖慢整体
• 参数总是唯一（如带时间戳、随机 ID、DOM 元素引用），缓存永远不命中
• 函数有副作用（修改外部变量、发请求、改 DOM），记忆化会导致行为异常甚至 bug
• 参数嵌套深或体积大（如整个 Redux state），JSON.stringify 开销反超计算本身

判断依据很简单：跑两次相同参数，看函数体里耗时操作是否真被跳过——而不是看有没有“缓存”字样。

今天关于《记忆化是什么，JS如何优化函数性能》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！