javascript如何实现memoization?

背景

memoization 有些文章翻译为记忆术，可能这也是react的优点之一，不止给你提供框架，还提供给你学习性能优化的方案。
本文主要是介绍下如何实现memoization.

实现

遇到这种有意思的特性，还是自己尝试动手实现，先看下简单的使用demo:

let [name, setName] = useState('')

let memoName = useMemo(() => {
  return `my name is ${name}`
}, [name])

我们需要实现的功能如下:
1 缓存值，js 在内存中创建缓存方式一般有两种方式: 1通过高阶函数缓存，2通过全局(或者局部全局作用域)缓存；
2 对比第二个传参(依赖项)是否有变化，有变化则更新缓存，没有变化则直接返回；

function memoization(fn, [...args]) {
  return (currFn, [...currArgs]) => {
    let result
    // 浅对比依赖项是否变化
    let dependsChangeList = args.filter((element, index) => !Object.is(element, currArgs[index]))

    if(dependsChangeList.length) {
      result = currFn()
      fn = currFn
      args = [...currArgs]
    } else {
      result = fn()
    }
    return result
  }
}
let a = {a: 1}
let b = 1
let calculate = memoization(() => {return 1+1}, [a, b])
calculate(() => {return 2+1}, [a, b]) // 无修改，返回缓存值 2
calculate(() => {return 3+1}, [a, 2]) // 有修改，返回新的值 4
calculate(() => {return 4+1}, [a, 2]) // 无修改，返回缓存值 4
calculate(() => {return 4+1}, [a, 3]) // 有修改，返回新的值 5

参考文章

1 Understanding Memoization in JavaScript to Improve Performance： blog.bitsrc.io/understandi…
2 github.com/alexreardon…