2 分钟内完成 JS 面试 / 记忆法 💭

问题：
什么是记忆？

快速回答：
这是一种通过缓存耗时的纯函数计算结果来优化应用程序性能的方法。

更长的答案：
正如我们从上一篇文章中所知，有纯函数和非纯函数。

纯函数基本上是这样的函数：如果传递相同的数据，它们会返回相同的结果，并且不会改变其范围之外的任何内容。

let pureAdd = (a, b) => a + b

此pureAdd函数不会改变外部的任何内容，它只返回答案，并且对于相同的参数它总是返回相同的答案。

这些限制也带来了好处。如果每次运行函数的结果都一样，那为什么不只计算一次并保存结果呢？

// Don't reuse it, it is just an example
let memo = (func) => {
  let cache = {}
  return (...args) => {
    if (cache[args]) {
      console.log('Cache hit :)')
      return cache[args]
    }
    console.log('Cache miss :(')
    let result = func(...args)
    cache[args] = result
    return result
  }
}

function sleep(ms) {
  var start = new Date().getTime(), expire = start + ms;
  while (new Date().getTime() < expire) { }
  return;
}

let slowAdd = (a, b) => {
  sleep(1000)
  return a + b
}

let memoAdd = memo(slowAdd)
console.log(memoAdd(1, 2))
// * waiting for 1 sec *
// Cache miss :(
// 3
console.log(memoAdd(1, 2))
// No waiting
// Cache hit :)
// 3

实际应用：
它不仅具有理论上的好处，而且实际上具有实际好处。

例如，有React.memo一个可以进行记忆的。

如果您的组件在给定相同 props 的情况下呈现相同的结果...React 将跳过渲染该组件，并重用最后渲染的结果。

此外，还有一个useMemo钩子，它也可以进行记忆。

useMemo仅当依赖项之一发生更改时，才会重新计算记忆值。此优化有助于避免每次渲染时进行昂贵的计算。

资源：
wiki/memoization
react-docs

其他帖子：

顺便说一句，我会在这里和推特上发布更多有趣的东西。我们做个朋友吧👋

鏂囩珷鏉ユ簮锛�https://dev.to/hexnickk/js-interview-in-2-minutes-memoization-p37