lodash的memoize

默认的情况下，memoize 只会根据形参的的一个参数进行缓存

function test(a,b){
    console.log('执行了')
    return a+b;
}

var mTest = _.memoize(test);

mTest(1,2)
VM982:2 执行了
3

再次相同参数

mTest(1,2)
3

这看起来似乎不错

mTest(1,12)
3

显示结果应该是13
对于值相同但引用不同来说

function test(a,b){
    console.log('执行了')
    return a.a+b.b;
}

mTest({a:1},{b:2})
VM1166:2 执行了
3

相同参数再一次的

mTest({a:1},{b:2})
VM1166:2 执行了
3

好在可以传递第二个参数用于指定缓存的key，例如

var mTest = _.memoize(test,(a,b)=>a.a + "" + b.b);

memoize 还会存储每一次缓存的结果

memoize-one

首先它是根据所有形参进行缓存的，而且只保留上一次执行的数据

import memoizeOne from 'memoize-one';

const add = (a, b) => a + b;
const memoizedAdd = memoizeOne(add);

memoizedAdd(1, 2); // 3
memoizedAdd(1, 2); // 3
// 不执行，返回上一次的结果
memoizedAdd(2, 3); // 5
// 执行
memoizedAdd(1, 2); // 3
// 执行

传递第二个参数来自定义比较函数
默认的行为，如果形参长度相等，则通过===进行比较，如果形参长度不等，直接返回false，真的有必要的话，可以使用_.isEqual实现深比较。

在React中使用memoizeOne，可以直接

  filter = memoize((list, filterText) =>
    list.filter(item => item.text.includes(filterText))
  );

没有必要跑到构造函数里面写

this.filter = memoize(this.filter ) 

前者更加的只观&省事

新版本的memoizeOne 已经用TS了，意味着可以自动导入了哦。

其实对于这种库，没有类型声明文件，可以通过下面方式解决

export { default as memoizeOne } from 'memoize-one';