JavaScript 記憶（Memoization）函數

記憶函數（Memoization）是一種用於長遞歸或長迭代操做性能優化的編程實踐。

記憶函數實現原理：使用一組參數初次調用函數時，緩存參數和計算結果，當再次使用相同的參數調用該函數時，直接返回相應的緩存結果。

注意: 記憶化函數不能有反作用。

以求解 fibonacci 數爲例演示記憶函數

普通遞歸版

function fibonacci(n) {
    console.log(`calculate fibonacci(${n})...`)
    if (n < 2) {
        return 1;
    } else {
        return fibonacci(n - 2) + fibonacci(n - 1);
    }
}
複製代碼

記憶遞歸版

const memoizedFibonacci = (function () {
    const cache = {} // 計算結果緩存

    return function fibonacci(n) {
        // 不一樣的參數按必定的規則計算獲得不一樣的緩存鍵值
        const key = n

        // 每次執行時首先檢查緩存
        // 若當前參數的計算結果已有緩存，直接返回緩存結果
        if (cache[key]) {
            return cache[key]
        }

        // 不然，計算、緩存並返回結果
        console.log(`calculate fibonacci(${n})...`)
        if (n < 2) {
            return cache[key] = 1;
        } else {
            return cache[key] = fibonacci(n - 2) + fibonacci(n - 1);
        }
    }
})()
複製代碼

執行過程對比

// 依次執行下述語句，觀察輸出

fibonacci(3);
/** * execution-log: * calculate fibonacci(3)... * calculate fibonacci(1)... * calculate fibonacci(2)... * calculate fibonacci(0)... * calculate fibonacci(1)... * * return-value: * 3 */

fibonacci(5);
/** * execution-log: * calculate fibonacci(5)... * calculate fibonacci(3)... * calculate fibonacci(1)... * calculate fibonacci(2)... * calculate fibonacci(0)... * calculate fibonacci(1)... * calculate fibonacci(4)... * calculate fibonacci(2)... * calculate fibonacci(0)... * calculate fibonacci(1)... * calculate fibonacci(3)... * calculate fibonacci(1)... * calculate fibonacci(2)... * calculate fibonacci(0)... * calculate fibonacci(1)... * * return-value: * 8 */

/* ------------------------------- */

memoizedFibonacci(3);
/** * execution-log: * calculate fibonacci(3)... * calculate fibonacci(1)... * calculate fibonacci(2)... * calculate fibonacci(0)... * * return-value: * 3 */

memoizedFibonacci(5);
/** * fibonacci(0), fibonacci(1), ..., fibonacci(3) 已緩存結果，無須從新計算 * * execution-log: * calculate fibonacci(5)... * calculate fibonacci(4)... * * return-value: * 8 */

memoizedFibonacci(10);
/** * fibonacci(0), fibonacci(1), ..., fibonacci(5) 已緩存結果，無須從新計算 * * execution-log: * calculate fibonacci(10)... * calculate fibonacci(8)... * calculate fibonacci(6)... * calculate fibonacci(7)... * calculate fibonacci(9)... * * return-value: * 89 */

memoizedFibonacci(9);
/** * fibonacci(0), fibonacci(1), ..., fibonacci(10) 已緩存結果，無須從新計算 * * execution-log: * * return-value: * 55 */
複製代碼

能夠看到

• 普通遞歸版執行大量的重複計算
• 記憶化遞歸版避免了重複計算

函數記憶化之 lodash/memoize

_.memoize(func, [resolver])

使用該函數能夠建立記憶化版本的 func 函數，例如：

import memoize from 'lodash/memoize';

function fibonacci(n) {
    if (n < 2) {
        return 1;
    } else {
        return fibonacci(n - 2) + fibonacci(n - 1);
    }
}

const memoizedFibonacci = memoize(fibonacci);
複製代碼

注意，使用 _.memoize 函數有內存泄漏的風險，能夠根據應用場景定製 _.memoize.Cache 進行優化，例如：

import memoize from 'lodash/memoize';

/** * @param max {number} 緩存結果數上限 */
function getLimitedCache(max = 200) {
    class LimitedCache {
        constructor() {
            this._max = max; // 設定緩存結果數上限
            this._store = new Map();
        }
        set(key, value) {
            const store = this._store;
            const max = this._max;
            if (store.size >= max) {
                store.clear();
            }
            return store.set(key, value);
        }
        get(key) {
            return this._store.get(key);
        }
        delete(key) {
            return this._store.delete(key);
        }
        has(key) {
            return this._store.has(key);
        }
        clear() {
            return this._store.clear();
        }
    }
}

function limitedMemoize(...args) {
    const DefaultCache = memoize.Cache;
    memoize.Cache = getLimitedCache();
    return memoize(...args);
    memoize.Cache = DefaultCache;
}
複製代碼

實現：lodash/memoize.js (github 連接)

/** * Creates a function that memoizes the result of `func`. If `resolver` is * provided, it determines the cache key for storing the result based on the * arguments provided to the memoized function. By default, the first argument * provided to the memoized function is used as the map cache key. The `func` * is invoked with the `this` binding of the memoized function. * * **Note:** The cache is exposed as the `cache` property on the memoized * function. Its creation may be customized by replacing the `memoize.Cache` * constructor with one whose instances implement the * [`Map`](http://ecma-international.org/ecma-262/7.0/#sec-properties-of-the-map-prototype-object) * method interface of `clear`, `delete`, `get`, `has`, and `set`. * * @since 0.1.0 * @category Function * @param {Function} func The function to have its output memoized. * @param {Function} [resolver] The function to resolve the cache key. * @returns {Function} Returns the new memoized function. * @example * * const object = { 'a': 1, 'b': 2 } * const other = { 'c': 3, 'd': 4 } * * const values = memoize(values) * values(object) * // => [1, 2] * * values(other) * // => [3, 4] * * object.a = 2 * values(object) * // => [1, 2] * * // Modify the result cache. * values.cache.set(object, ['a', 'b']) * values(object) * // => ['a', 'b'] * * // Replace `memoize.Cache`. * memoize.Cache = WeakMap */
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

export default memoize
複製代碼

函數記憶化之 memoize-one

github.com/alexreardon…

memoize-one 生成的記憶函數只緩存最近一次調用的參數和計算結果。當使用與最近一次相同的參數調用 memoized 函數時，返回上一次的緩存的結果，不然執行完整的計算過程，並更新緩存爲這次調用的參數和結果。

memoize-one 生成的記憶函數不存在內存泄漏的風險。

memoize-one 源碼（JavaScript 版）：

function areInputsEqual(newInputs, lastInputs) {
  if (newInputs.length !== lastInputs.length) {
    return false;
  }
  for (let i = 0; i < newInputs.length; i++) {
    if (newInputs[i] !== lastInputs[i]) {
      return false;
    }
  }
  return true;
}

function memoize(resultFn, isEqual = areInputsEqual) {
  let lastThis;
  let lastArgs = [];
  let lastResult;
  let calledOnce = false;

  // breaking cache when contex (this) or arguments change
  const result = function(...newArgs) {
    if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
      return lastResult;
    }

    lastResult = resultFn.apply(this, newArgs);
    calledOnce = true;
    lastThis = this;
    lastArgs = newArgs;
    return lastResult;
  };

  return result;
}
複製代碼

在 React 組件中使用 memoize-one

場景：組件接收一個 list 以及其餘一些參數(<FilterList list={list} {...otherProps} />)，根據不一樣的 state.activeKey 過濾 props.list 並展現，根據其餘參數完成其餘事務。

方案：

1. 一種比較繁瑣的方案：維護 state.filteredList，手動監聽 props.list 和 state.activeKey， 當 props.list 或 state.activeKey 變化時更新 state.filteredList。

2. 一種簡潔但存在性能問題的方案：每次 render() 時使用 state.activeKey 過濾 props.list 並渲染。

3. 使用 memoize-one 的優化方案：使用 memoize-one 生成記憶函數 memoizedFilter()，在每次 render() 時使用記憶函數 memoizedFilter(list, activeKey) 得到過濾結果並渲染。

方案3具體實現以下：

import React from 'react';
import { Tab } from 'antd';
import memoize from 'memoize-one';

const tabKeys = ['1', '2', '3'];

class FilterList extends React.Component {
  state = {
    activeKey: '1',
  };

  // 建立 memoized filter
  memoizedFilter = memoize(
    (list, activeKey) => list.filter(item => item.key === activeKey)
  );

  switchTab = (key) = {
    this.setState({ activeKey: key });
  }

  render() {
    const { list } = this.props
    const { activeKey } = this.state

    /** * 在每次 render 時進行過濾，使用 memoizedFilter 保證了 * 只有當 list 或 activeKey 變化時才從新計算過濾結果 */
    const filteredList = this.memoizedFilter(list, activeKey);

    /** * 若是直接使用 list.filter(item => item.key === activeKey) * 則每次 render 時都要從新計算過濾結果，無論 list 和 activeKey 有無變化 */

    return (
      <div> <div className="tabs"> {tabKeys.map(key => ( <div key={key} onClick={() => { this.switchTab(key); }} > {`tab ${key}`} </div> ))} </div> <div className="list"> {filteredList.map(item => ( <div key={item.id}>{item.label}</div> ))} </div> </div>
    );
  }
}

class Page extends React.Component {
  state = {
    list: [],
  }

  // ...

  render() {
    const { list } = this.state;
    return (
      <div> {/* ... */} <FilterList list={list} /> {/* ... */} </div> ) } } 複製代碼

方案3：

• 不用維護 filteredList
• 不用手動監聽 props.list 和 state.activeKey 的變化
• 只在 props.list 或 state.activeKey 變化時從新計算 filteredList，不存在性能問題