什么是记忆化_JavaScript中如何优化函数性能

记忆化是纯函数的“结果快照”，将输入与输出映射缓存，相同输入直接返回结果；它非通用缓存，需手动实现、仅适用于无副作用函数，且不等同于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 延迟」。常见误用场景：

立即学习“Java免费学习笔记（深入）”；

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

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