Memoization Map

一旦我们想在一个 memoization 列表中 memoize 多个 item 就会变得很困难。因为你需要制定复杂的缓存算法来平衡调用频率和内存占有率。

还好 UI 在同一个位置会相对的稳定。相同的位置一般每次都会接受相同的参数。这样以来，使用一个集合来做 memoization 是一个非常好用的策略。

我们可以用对待 state 同样的方式，在组合的函数中传递一个 memoization 缓存。

  1. function memoize(fn) {
  2.   return function(arg, memoizationCache) {
  3.     if (memoizationCache.arg === arg) {
  4.       return memoizationCache.result;
  5.     }
  6.     const result = fn(arg);
  7.     memoizationCache.arg = arg;
  8.     memoizationCache.result = result;
  9.     return result;
  10.   };
  11. }
  13. function FancyBoxWithState(
  14.   children,
  15.   stateMap,
  16.   updateState,
  17.   memoizationCache
  18. ) {
  19.   return FancyBox(
  20.     children.map(child => child.continuation(
  21.       stateMap.get(child.key),
  22.       updateState,
  23.       memoizationCache.get(child.key)
  24.     ))
  25.   );
  26. }
  28. const MemoizedFancyNameBox = memoize(FancyNameBox);