摘要：源碼函數(shù)調(diào)用過，沒有變化，參數(shù)時(shí)返回緩存值。而通過，可以把上一次的計(jì)算結(jié)果保存下來，而避免重復(fù)計(jì)算。這意味著將跳過渲染組件，并重用最后渲染的結(jié)果。

在一個(gè)CPU密集型應(yīng)用中，我們可以使用Memoization來進(jìn)行優(yōu)化，其主要用于通過存儲昂貴的函數(shù)調(diào)用的結(jié)果來加速程序，并在再次發(fā)生相同的輸入時(shí)返回緩存的結(jié)果。
例如一個(gè)簡單的求平方根的函數(shù)：

const sqrt = Math.sqrt;
//使用cache緩存
const sqrt = （arg）=>{
    if(!sqrt.cache){
        sqrt.cache = {};
    }
    if(!sqrt.cache[arg]){
        sqrt.cache[arg] = Math.sqrt(arg)
    }
    return sqrt.cache[arg]
}
//簡單的運(yùn)行時(shí)間對比
//第一次運(yùn)行：
console.time("start1")
sqrt(779)
console.timeEnd("start1")
VM516:3 start1: 0.01806640625ms
//第二次運(yùn)行：
console.time("start1")
sqrt(779)
console.timeEnd("start1")
VM521:3 start1: 0.005859375ms

我們實(shí)現(xiàn)一個(gè)通用的memoize函數(shù)，用它來包裝任意純函數(shù)，并緩存其計(jì)算結(jié)果。

function memoize(fn){
        return function(){
            var args = Array.prototype.slice.call(arguments);
            fn.cache = fn.cache || {};
            return fn.cache[args] ?
                 fn.cache[args] :(fn.cache[args] = fn.apply(this,args))
        }
}

必須注意的是，memoize的原理是在發(fā)生相同的輸入時(shí)返回緩存的結(jié)果，這意味著其包裝的函數(shù)應(yīng)當(dāng)是一個(gè)純函數(shù)，當(dāng)函數(shù)不純時(shí)，相同的輸入在不同時(shí)間可能返回不同的結(jié)果，此時(shí)再使用memoize明顯不合時(shí)宜。

在該庫中，使用Map緩存計(jì)算結(jié)果，支持傳入resolver函數(shù)將傳入的參數(shù)轉(zhuǎn)換為存入Map的鍵名（默認(rèn)鍵名是第一個(gè)參數(shù)，當(dāng)鍵名是引用類型時(shí)，引用不變，緩存不會更新）。

function memoize(func, resolver) {
  if (typeof func != "function" || (resolver != null && typeof resolver != "function")) {
    throw new TypeError("Expected a function")
  }
  const memoized = function(...args) {
    const key = resolver ? resolver.apply(this, args) : args[0]
    const cache = memoized.cache

    if (cache.has(key)) {
      return cache.get(key)
    }
    const result = func.apply(this, args)
    memoized.cache = cache.set(key, result) || cache
    return result
  }
  memoized.cache = new (memoize.Cache || Map)
  return memoized
}

memoize.Cache = Map

與lodash不同，memoize-one僅僅保存上一次調(diào)用時(shí)的結(jié)果，如果下次參數(shù)變化，則更新緩存。因此不必?fù)?dān)心由于maxAge, maxSize, exclusions等導(dǎo)致的內(nèi)存泄漏。

//源碼
export default function mixed>(
  resultFn: ResultFn,
  isEqual?: EqualityFn = areInputsEqual,
): ResultFn {
  let lastThis: mixed;
  let lastArgs: mixed[] = [];
  let lastResult: mixed;
  let calledOnce: boolean = false;
//函數(shù)調(diào)用過，this沒有變化，參數(shù)isEqual時(shí)返回緩存值。
  const result = function(...newArgs: mixed[]) {
    if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
      return lastResult;
    }
    lastResult = resultFn.apply(this, newArgs);
    calledOnce = true;
    lastThis = this;
    lastArgs = newArgs;
    return lastResult;
  };

  return (result: any);
}

可以看到，可以通過第二個(gè)參數(shù)自定義參數(shù)是否相同，默認(rèn)是areInputsEqual函數(shù)。

//areInputsEqual實(shí)現(xiàn)
export default function areInputsEqual(
  newInputs: mixed[],
  lastInputs: mixed[],
) {
//先進(jìn)行參數(shù)長度比較
  if (newInputs.length !== lastInputs.length) {
    return false;
  }
 //參數(shù)淺比較
  for (let i = 0; i < newInputs.length; i++) {
    if (newInputs[i] !== lastInputs[i]) {
      return false;
    }
  }
  return true;
}

可以自定義參數(shù)比較函數(shù)進(jìn)行深比較

import memoizeOne from "memoize-one";
import isDeepEqual from "lodash.isequal";

const identity = x => x;

const shallowMemoized = memoizeOne(identity);
const deepMemoized = memoizeOne(identity, isDeepEqual);

const result1 = shallowMemoized({ foo: "bar" });
const result2 = shallowMemoized({ foo: "bar" });

result1 === result2; // false - difference reference

const result3 = deepMemoized({ foo: "bar" });
const result4 = deepMemoized({ foo: "bar" });

result3 === result4; // true - arguments are deep equal

在React中有這樣一個(gè)應(yīng)用場景，當(dāng)部分props變化需要改變派生state時(shí)，可以在getDerivedStateFromProps中通過if判斷是否需要重新計(jì)算，但它比它需要的更復(fù)雜，因?yàn)樗仨毝鄮Ц櫤蜋z測每個(gè)props和state的變化，當(dāng)props很多時(shí)，這種判斷方式會變得糾纏不清。

class Example extends Component {
  state = {
    filterText: "",
  };
  static getDerivedStateFromProps(props, state) {
    if (
      props.list !== state.prevPropsList ||
      state.prevFilterText !== state.filterText
    ) {
      return {
        prevPropsList: props.list,
        prevFilterText: state.filterText,
        filteredList: props.list.filter(item => item.text.includes(state.filterText))
      };
    }
    return null;
  }
  handleChange = event => {
    this.setState({ filterText: event.target.value });
  };
  render() {
    return (
      
        
        
{this.state.filteredList.map(item => 
{item.text}
)}
      
    );
  }
}

而通過Memoization，可以把上一次的計(jì)算結(jié)果保存下來，而避免重復(fù)計(jì)算。例如以下通過memoize-one庫實(shí)現(xiàn)的記憶，可以讓我們不用手動(dòng)判斷l(xiāng)ist, filterText是否變化，是否需要重新計(jì)算。

import memoize from "memoize-one";
class Example extends Component {
  // State only needs to hold the current filter text value:
  state = { filterText: "" };
  // Re-run the filter whenever the list array or filter text changes:
  filter = memoize(
    (list, filterText) => list.filter(item => item.text.includes(filterText))
  );

  handleChange = event => {
    this.setState({ filterText: event.target.value });
  };

  render() {
    const filteredList = this.filter(this.props.list, this.state.filterText);
    return (
      
        
        
{filteredList.map(item => 
{item.text}
)}
      
    );
  }
}

在react中，每當(dāng)組件重新渲染，計(jì)算派生狀態(tài)的邏輯就會執(zhí)行一遍（不管這些邏輯是放在render或者是放在getDerivedStateFromProps中，如果沒有采用很多if限制的話）。上節(jié)介紹了使用memoize-one來緩存來避免重復(fù)計(jì)算，當(dāng)我們使用redux時(shí)，通常在mapStateToProps中計(jì)算派生狀態(tài)，每當(dāng)store中的任意state更新時(shí)，都會觸發(fā)mapStateToProps中的計(jì)算，然而，往往派生state通常只依賴部分state，不必每次都計(jì)算。
Reselect是一個(gè)十分貼近redux的memoize庫，其和memoize-one一樣只緩存前一次的計(jì)算值，并支持自定義memoize函數(shù)，自定義參數(shù)比較函數(shù)等；其輸入?yún)?shù)由inputSelectors functions 產(chǎn)生，生成的的依然是inputSelectors functions，這意味的與memoize相比，這可以很容易的組合。
另外，mapStateProps的第二個(gè)參數(shù)ownProps也可以傳入selector中。

import { createSelector } from "reselect"

fSelector = createSelector(
    a => state.a,
    b => state.b,
    (a, b) => f(a, b)
)
hSelector = createSelector(
    b => state.b,
    c => state.c,
    (b, c) => h(b, c)
)
gSelector =  createSelector(
    a => state.a,
    c => state.c,
    (a, c) => g(a, c)
)
uSelector = createSelector(
    a => state.a,
    b => state.b,
    c => state.c,
    (a, b, c) => u(a, b, c)
)

...
function mapStateToProps(state) {
    const { a, b, c } = state
    return {
        a,
        b,
        c,
        fab: fSelector(state),
        hbc: hSelector(state),
        gac: gSelector(state),
        uabc: uSelector(state)
    }
}

如果你的函數(shù)組件在給定相同的props的情況下呈現(xiàn)相同的結(jié)果，你可以React.memo通過記憶結(jié)果將它包裝在一些調(diào)用中以提高性能。這意味著React將跳過渲染組件，并重用最后渲染的結(jié)果。

默認(rèn)情況下，它只會淺顯比較props對象中的復(fù)雜對象。如果要控制比較，還可以提供自定義比較函數(shù)作為第二個(gè)參數(shù)。

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

You Probably Don’t Need Derived State - React Blog
Understanding Memoization in JavaScript to Improve Performance
性能優(yōu)化：memoization | Taobao FED | 淘寶前端團(tuán)隊(duì)
lodash/memoize.js at master · lodash/lodash · GitHub
GitHub - alexreardon/memoize-one: A memoization library which only remembers the latest invocation
為什么我們需要reselect - 從0開始實(shí)現(xiàn)react技術(shù)棧 - SegmentFault 思否
React Hooks: Memoization – Sandro Dolidze – Medium