天天看點

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

測試源代碼:

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

首先執行構造函數裡第一條 selector 調用。

selectTotal 的函數體就是 createSelector 傳回的 memoized 函數:

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試
NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

因為是第一次調用,lastArguments 為 undefined,是以執行 projectionFn:

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

還不會馬上調用到我們在 projection 裡定義的加法運算:

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

這裡還看不到我們應用程式裡傳入 createSelector 時指定的 projectionFn 函數。

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

selectors 是數組,裡面存放了應用開發人員傳入的純函數:

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

調用數組自帶的 map 方法,首先把 projection 計算所需的輸入參數計算出來:

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

此處 fn 即 selectors 數組第一個元素:

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

得到3:

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

依次類推,第二個參數4:

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

3和4即為最終調用帶有記憶功能的 projectionFn 的輸入參數:

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

這就是我們已經熟知的 memoized 函數體了。可以參考 Jerry 之前的文章:NgRx Store createSelector 的單步調試和源代碼分析。

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

projector 就是之前 createSelector 傳入的純函數的最後一個,即執行加法運算的 函數:

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

執行求和運算:

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

将調用的輸入參數3和4緩存起來。一并緩存的還有計算結果7:

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

第二次執行時,因為輸入參數未變,仍然是3和4,故直接從緩存結果裡取出7,傳回之。

NgRx Store createSelector 傳回的 selector 執行取數邏輯的單步調試

繼續閱讀