今天我們來探討一個棘手的邊界情況：巢狀 effect。

當一個effect內部又定義了另一個effect 時，我們的系統會怎麼運作呢？

import { ref, effect } from '../dist/reactivity.esm.js'

const count = ref(0)

const effect1 = effect(()=>{
  const effect2 = effect(()=>{
    console.log('內層的 Effect', count.value)
  })
  
  console.log('外部的 Effect', count.value)
})

setTimeout(()=>{
	count.value = 1
}, 1000)

在這個情況我們預期內外層都有輸出，但是我們得到如下

console.log('內層的 Effect', 0)
console.log('外部的 Effect', 0)
console.log('內層的 Effect', 1)

官方不建議使用巢狀 effect，你可能會想：「既然官方不建議，我只要不這樣寫就好了。」

但是遇見這種「巢狀執行」的場景比想像中更常見。比方說，當一個 effect 依賴了一個 computed 屬性時，就會隱性觸發巢狀執行：

const count = ref(0);
// computed 內部會為計算函式建立一個 effect (我們先叫 effect B)
const double = computed(() => count.value * 2);

// 這是我們手動建立的 effect (我們稱之為 effect A)
effect(() => {
// 當 effect A 執行，並在這裡讀取 double.value 時...
// effect B 就必須先回傳計算結果。
// 這就形成了 effect A 內部觸發了 effect B 執行的巢狀情況。
console.log('The double value is:', double.value);
});

因此，為了處理這種隱性觸發問題，我們需要解決巢狀 effect 觸發。

問題解析

初始化頁面

• 執行 effect1 (ReactiveEffect A)：
  • activeSub 設為 A。
  • 開始執行 effect1 的函式 fnA。
  • 進入 fnA 內部，遇到 effect2 (ReactiveEffect B)：
    1. activeSub 被覆蓋，更新為 B。
    2. 開始執行 effect2 的函式 fnB。
    3. 在 fnB 中，讀取 count.value，觸發 getter。
    4. 依賴收集： count 的依賴列表中，只收集了當前的 activeSub，也就是 B。
    5. console.log 輸出 內層的 Effect 0。
    6. fnB 執行完畢，activeSub 被清空 (undefined)。
• 回到 effect1 的 fnA 繼續執行：
  • 此時，程式讀取 count.value。
  • 依賴收集失敗： 因為 activeSub 已經是 undefined，所以 A 無法被 count 收集。
  • console.log 輸出 外部的 Effect 0。
• 結果： count 的依賴鏈表上，只有 B (effect2)，沒有 A (effect1)。

關鍵問題：執行外層匿名函式 fn時，activeSub 就被覆蓋、沒有進行收集依賴。

一秒後執行count.value = 1

由於依賴收集只有收集內層的 ReactiveEffect（也就是ReactiveEffect B），因此他不會執行 propagate，進行觸發更新。

核心思路

後來的 effect 覆蓋到前面的 effect，這個情況是不是跟函式的「堆疊(Stack)」有點像？

堆疊(Stack) 有兩個主要特性：

1. 後進先出。
2. 一維線性結構。

函式在層層呼叫時，就是被放入一個「呼叫堆疊」中，我們也可以利用這個特性來管理 activeSub。

• 在進入內層 effect 時，將外層的 effect暫存
• 在內層結束後，再從堆疊中取出，並還原外層的 effect。

要完成這個方法，可以透過一個暫存變數來模擬。

解決方法

實際做法

1. 外層 effect 開始：activeSub = ReactiveEffect A
2. 外層 effect 執行，遇到內層 effect
3. 在內層 effect 執行之前：
   • 我們先檢查activeSub是不是有值
   • 假設有數值，我們可以先儲存起來
4. 內層 effect 執行完成後
   • 不再設定activeSub = undefined
   • 而是將activeSub復原成執行之前的狀況

於是我們這樣寫

export let activeSub;

class ReactiveEffect {
	  constructor(public fn){
  }

  run(){
    //先將當前的 Effect 儲存，用來處理巢狀邏輯
    const prevSub = activeSub
    activeSub = this
    try{
      return this.fn()
      
    }finally{
      // 執行完成後，恢復之前的 activeSub
      activeSub = prevSub
    }
      
  }
}

export function effect(fn){

  const e = new ReactiveEffect(fn)
  e.run()

}

他的運作模式是這樣：

此時你會發現，在觸發更新的時候，內層會多輸出一次：

觸發更新為何會多輸出一次？

初始狀態

• 內層的 Effect 0
• 外部的 Effect 0

各別輸出一次，這邊沒什麼問題。

初始化後的鏈表結構

setTimeout 觸發更新後

• count.value = 1 觸發 setter，執行 propagate。
• propagate 遍歷依賴鏈表。
• 執行B.run() (effect2)：
  • console.log 輸出 內層的 Effect 1 (第一次)。
• 執行 A.run() (effect1)
  • console.log 輸出 外部的 Effect 1。
  • 在 A 的函式內部，會重新建立並執行一個全新的內層 effect。
  • 執行這個新的內層 effect.run()：
    • console.log 輸出 內層的 Effect 1 (第二次)。

因為這樣，所以內層會執行兩次。

乍看之下內層 effect 多執行一次似乎沒什麼關係。

但思考一下，如果現在內層的 effect 執行的不是 console.log，而是更費資源的操作呢？

像是：

• 網路請求
• 複雜且大量的計算
• DOM 的重新佈局

因此我們知道不必要的重複執行會導致效能浪費，甚至有可能引發無法預期的 Bug。

這也就是為什麼官方不推薦我們寫巢狀 effect。

同步更新技術部落格《嘿！日安》