React 內部是如何實現 cache 方法的？

大家好，我卡頌。

前幾天寫的一篇介紹use這個新hook的文章中聊到React原生實現了一個緩存函數的方法 —— cache。

對於如下代碼，被cache包裹的函數，當多次調用時，如果傳參不變，會始終返回緩存值：

const cacheFn = cache(fn);
cacheFn(1, 2, 3);
// 不會執行fn，直接返回緩存值
cacheFn(1, 2, 3);

React內爲什麼需要cache方法呢？考慮如下組件：

const fetch = cache(fetchUserData);

function User({id}) {
  const {name} = use(fetch(id));
  
  return <p>{name}</p>;
}

User組件會根據用戶id請求用戶數據，並渲染用戶名。

如果id改變，那麼fetch方法重新發起請求是正常邏輯。

但是，React組件經常render，如果在id不變的情況下，由於User組件render導致不斷髮起請求，顯然是不合理的。

所以，這種情況下就需要cache方法。當id不變時，即使User組件反覆render，fetch(id)都返回同一個值。

本文來聊聊cache的源碼實現。

分析實現思路

整個方法實現一共有 64 行代碼，首先我們來分析下實現要點。

如果參數不變，則使用緩存的值。這意味着我們需要處理：

參數的順序

舉個例子，當參數順序變了，不使用緩存值：

const cacheFn = cache(fn);
cacheFn(1, 2, 3);
// 不使用緩存值
cacheFn(3, 2, 1);

區別處理引用類型、原始類型參數

舉個例子，當同一位置的參數傳遞了同一個引用類型值，則返回緩存值：

const cacheFn = cache(fn);
const obj = {};
cacheFn(1, obj, 3);
// 返回緩存值
cacheFn(1, obj, 3);

當同一位置的參數傳遞了不同引用類型值，則不返回緩存值：

const cacheFn = cache(fn);
const obj = {};
cacheFn(1, obj, 3);
// 不返回緩存值
cacheFn(1, {}, 3);

緩存的垃圾回收

緩存數據時，要注意 「緩存失效但是引用的數據沒有釋放」 造成的內存泄漏問題。

所以，對於引用類型數據，可以使用WeakMap保存。

對於原始類型數據，可以使用Map保存。

WeakMap與Map的區別在於 —— 在WeakMap中，key到他對應的value是弱引用。這意味着當沒有其他數據引用這個key時，他可以被垃圾回收。而在Map中，key到value是強引用，即使沒有其他數據引用這個key，他也不會被垃圾回收。

實現原理

本文不會介紹具體的代碼實現（大段貼代碼讓人看起來頭疼）。

我會用示例圖講解實現原理。瞭解原理後，如果你對實現細節感興趣，可以參考：

對於如下代碼：

const cacheFn = cache(fn);
const obj = {};
cacheFn(1, obj, 3);

cacheFn的每個傳參，對應cache內部的一個cacheNode節點：

// CacheNode構造函數
function createCacheNode<T>(): CacheNode<T> {
  return {
    s: UNTERMINATED, 
    v: undefined, 
    o: null, 
    p: null
  };
}

字段的意義如下：

上述cacheFn執行後會生成如下cacheNode鏈式結構：

讓我們看看這個鏈式結構如何解決文章開篇提到的 3 個問題。

如何解決參數的順序？

可以看到，上圖中最後一個cacheNode節點的狀態（cacheNode.s）爲 「中止」。

如果後續執行cacheFn傳入相同的參數，則會複用緩存的cacheNode節點。

如果所有傳參都相同，那麼會複用完整的cacheNode鏈，此時最後一個cacheNode節點爲 「中止」 狀態，則不需要重新執行cacheFn方法計算返回值，而是直接返回緩存的值（cacheNode.v）。

如果後續執行cacheFn，傳入新的參數，則前後的cacheNode鏈不會一致。

比如：

// 第一次
cacheFn(1, obj, 3);
// 第二次
cacheFn(1, 3, obj);

則第二次生成的cacheNode鏈中，第二個節點就與之前不同（之前 obj，之後 3），則後續cacheNode節點也不會相同。

通過這種鏈式結構，保證了只有當所有參數保持一致，才能返回緩存的值。否則將重新執行函數，並緩存新的返回值與cacheNode鏈。

如何處理引用類型值

可以從圖中發現，對於引用類型參數（比如示例中的obj），對應一個weakMap節點。

這不僅意味着當沒有其他數據引用他時，這個cacheNode節點能夠釋放內存，同時也意味着這個cacheNode之後的cacheNode鏈會斷掉，他們佔用的內存也會釋放。

而原始類型值不存在這樣的問題，從圖中可以發現，原始類型值對應一個map節點。

總結

cache方法是React內部實現，未來會暴露給開發者使用的緩存方法，可以緩存任意函數。

當多次執行並傳遞相同的參數給cache包裹的函數時，後續執行會返回緩存的值。

這是爲了應對 「某些函數需要在 React 組件多次 render 間返回穩定的值」 的場景。

比如：對於相同的傳參，請求數據的函數返回同一個promise。

cache的實現方式是 —— 基於傳參，構造一條cacheNode鏈，傳參的穩定對應了鏈表的穩定，並最終對應了返回值的穩定。

參考資料

[1] cache 的源碼實現 PR: https://github.com/sebmarkbage/react/blob/ecdf734d1aa73d9f5f09f5a8e7fa5685f5f1bd29/packages/react/src/ReactCache.js

[2] cache 的在線示例: https://codesandbox.io/s/amazing-leaf-viq4q7?file=/src/cache.js

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/hCDj4M5UBVMXfeiH7jsZiw

猜你喜歡