在React中使用memoiz-one

Situation

最近在项目中接触了npm的memoiz-one库，在此记录下。

www.npmjs.com/package/mem…

Task

A memoization library that only caches the result of the most recent arguments.

官方解释：一个仅缓存最新参数结果的库。

Action

1. 引入memoize-one库
2. 编写需要缓存计算结果的函数
3. 执行缓存函数

示例代码如下

// memoize-one uses the default import
import memoizeOne from 'memoize-one';

function add(a, b) {
  return a + b;
}
const memoizedAdd = memoizeOne(add);

memoizedAdd(1, 2);
// add function: is called
// [new value returned: 3]

memoizedAdd(1, 2);
// add function: not called
// [cached result is returned: 3]

memoizedAdd(2, 3);
// add function: is called
// [new value returned: 5]

memoizedAdd(2, 3);
// add function: not called
// [cached result is returned: 5]

memoizedAdd(1, 2);
// add function: is called
// [new value returned: 3]

再次调用函数时，参数为1和2，虽然之前计算过add(1,2)的值，但是因为memoize-one库只会缓存最近的参数计算结果，即 add(2,3)，因此仍然会重新计算add(1,2)的值。

Result

总而言之，memoiz-one就是一个缓存库，独特之处是——之缓存最近的一个计算值，最大好处是避免 缓存值过多导致的内存溢出。