什么是记忆化_JavaScript中如何优化函数性能-js教程-PHP中文网

记忆化是纯函数的“结果快照”，将输入与输出映射缓存，相同输入直接返回结果；它非通用缓存，需手动实现、仅适用于无副作用函数，且不等同于React的useMemo或React.memo。

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

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

记忆化（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 数组浅比较。它们不改变函数本身的执行逻辑，也不保存跨渲染的函数调用结果。例如：

React Wrap

React UI？—— JavaScript？

下载

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