React深入分析useEffect原始碼

2022-11-05 14:00:30

熱身準備

這裡不再講useLayoutEffect，它和useEffect的程式碼是一樣的，區別主要是：

執行時機不同；
useEffect是非同步， useLayoutEffect是同步，會阻塞渲染；

初始化 mount

mountEffect

在所有hook初始化時都會通過下面這行程式碼實現hook結構的初始化和儲存，這裡不再講mountWorkInProgressHook方法

var hook = mountWorkInProgressHook();

在mountEffect方法中，只有這幾行程式碼。先來解讀下幾個引數：

fiberFlags：有副作用的更新標記，用來標記hook所在的fiber；
hookFlags：副作用標記；
create：使用者傳入的回撥函數；
deps：使用者傳入的陣列依賴；

function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
  // hook初始化
  var hook = mountWorkInProgressHook();
  // 判斷是否有傳入deps，如果有會作為下次更新的deps
  var nextDeps = deps === undefined ? null : deps;
  // 給hook所在的fiber打上有副作用的更新的標記
  currentlyRenderingFiber$1.flags |= fiberFlags;
  // 將副作用操作存放到fiber.memoizedState.hook.memoizedState中
  hook.memoizedState = pushEffect(HasEffect | hookFlags, create, undefined, nextDeps);
}

上面程式碼中都有註釋，接下來我們看看React是如何存放副作用更新操作的，主要就是pushEffect方法

function pushEffect(tag, create, destroy, deps) {
  // 初始化副作用結構，
  var effect = {
    tag: tag,
    create: create,   // 回撥函數
    destroy: destroy,  // 回撥函數裡的return（mount時是undefined）
    deps: deps,    // 依賴陣列
    // 閉環連結串列
    next: null
  };
  // 下面的一大段程式碼看著複雜，但是有沒有很熟悉的感覺？
  var componentUpdateQueue = currentlyRenderingFiber$1.updateQueue;
  if (componentUpdateQueue === null) {
    componentUpdateQueue = createFunctionComponentUpdateQueue();
    currentlyRenderingFiber$1.updateQueue = componentUpdateQueue;
    // effect.next = effect形成環形連結串列
    componentUpdateQueue.lastEffect = effect.next = effect;   
  } else {
    var lastEffect = componentUpdateQueue.lastEffect;
    if (lastEffect === null) {
      componentUpdateQueue.lastEffect = effect.next = effect;
    } else {
      var firstEffect = lastEffect.next;
      lastEffect.next = effect;
      effect.next = firstEffect;
      componentUpdateQueue.lastEffect = effect;
    }
  }
  return effect;
}

上面這段程式碼除了初始化副作用的結構程式碼外，都是我們前面講過的操作閉環連結串列，向連結串列末尾新增新的effect，該effect.next指向fisrtEffect，並且連結串列當前的指標指向最新新增的effect。

useEffect的初始化就這麼簡單，簡單總結一下：給hook所在的fiber打上副作用更新標記，並且fiber.memoizedState.hook.memoizedState和fiber.updateQueue儲存了相關的副作用，這些副作用通過閉環連結串列的結構儲存。

相關參考視訊講解：傳送門

更新 update

updateEffect

updateWorkInProgressHook在上篇文章也已講過，不再詳述，主要功能就是建立一個帶有回撥函數的newHook去覆蓋之前的hook。

function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var destroy = undefined;
  if (currentHook !== null) {
    var prevEffect = currentHook.memoizedState;
    destroy = prevEffect.destroy;
    if (nextDeps !== null) {
      var prevDeps = prevEffect.deps;
      // 比較兩次依賴陣列中的值是否有變化
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        // 和之前初始化時一樣
        pushEffect(hookFlags, create, destroy, nextDeps);
        return;
      }
    }
  }
  // 和之前初始化時一樣
  currentlyRenderingFiber$1.flags |= fiberFlags;
  hook.memoizedState = pushEffect(HasEffect | hookFlags, create, destroy, nextDeps);
}

相信眼眼尖的看官已經注意到上面程式碼中有兩個pushEffect，一個沒有賦值給hook.memoizedState，一個賦值了，這兩者有什麼區別呢？

先保留著這個疑問，先來了解下下面這行程式碼都做了些什麼，因為它造就了兩個pushEffect。

if (areHookInputsEqual(nextDeps, prevDeps)){...}

function areHookInputsEqual(nextDeps, prevDeps) {
  // 沒有傳deps的情況返回false
  if (prevDeps === null) {
    return false;
  }
  // deps不是[]，且其中的值有變動才會返回false
  for (var i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    if (objectIs(nextDeps[i], prevDeps[i])) {
      continue;
    }
    return false;
  }
  // deps = []，或者deps裡面的值沒有變化會返回true
  return true;
}

它會判斷兩次依賴陣列中的值是否有變化以及deps是否是空陣列來決定返回true和false，返回true表明這次不需要呼叫回撥函數。

現在我們明白了兩次pushEffect的異同，if內部的pushEffect是不需要呼叫的回撥函數，外面的pushEffect是需要呼叫的。再來仔細看下這兩行程式碼：

// if內部的，第一個引數是hookFlags = 4
pushEffect(hookFlags, create, destroy, nextDeps);
// if外部的，第一個引數是HasEffect | hookFlags = 5
hook.memoizedState = pushEffect(HasEffect | hookFlags, create, destroy, nextDeps);

這兩行程式碼的區別是傳入的第一個引數不同，而第一個引數就是effect.tag的值，effect.tag = 4不會新增到副作用執行佇列，而effect.tag = 5可以。沒有新增到副作用執行佇列的effect就不會執行。這樣就巧妙的實現了useEffect基於deps來判斷是否需要執行回撥函數。

到這裡，我們搞明白了，不管useEffect裡的deps有沒有變化都會為回撥函數建立effect並新增到effect連結串列和fiber.updateQueue中，但是React會根據effect.tag來決定該effect是否要新增到副作用執行佇列中去執行。

執行副作用

我們現在知道了，useEffect是非同步執行的。那麼這個回撥函數副作用會在什麼時候執行呢？useEffect回撥函數會在layout階段之後執行。現在我們來了解下具體呼叫執行的流程。

我畫了一個簡單的流程圖，大致描述了下呼叫流程。首先在mutation之前階段，基於副作用建立任務並放到taskQueue中，同時會執行requestHostCallback，這個方法就涉及到了非同步了，它首先考慮使用MessageChannel實現非同步，其次會考慮使用setTimeout實現。使用MessageChannel時，requestHostCallback會馬上執行port.postMessage(null);，這樣就可以在非同步的第一時間執行workLoop，workLoop會遍歷taskQueue，執行任務，如果是useEffect的effect任務，會呼叫flusnPassiveEffects。

Q：可能有人會疑惑為什麼優先考慮MessageChannel？

A：首先我們要明白React排程更新的目的是為了時間分片，意思是每隔一段時間就把主執行緒還給瀏覽器，避免長時間佔用主執行緒導致頁面卡頓。使用MessageChannel和SetTimeout的目的都是為了建立宏任務，因為宏任務會在當前微任務都執行完後，等到瀏覽器主執行緒空閒後才會執行。不優先考慮setTimeout的原因是，setTimeout執行時間不準確，會造成時間浪費，即使是setTimeout(fn, 0)，感興趣的可以去自己瞭解下，本文不做贅述了。

在schedulePassiveEffects中，會決定是否執行effect連結串列中的effect，判斷的依據就是每個effect上的effect.tag:

function schedulePassiveEffects(finishedWork) {
  var updateQueue = finishedWork.updateQueue;
  var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  if (lastEffect !== null) {
    var firstEffect = lastEffect.next;
    var effect = firstEffect;
    // 遍歷effect連結串列
    do {
      var _effect = effect,
          next = _effect.next,
          tag = _effect.tag;
      // 基於effect.tag決定是否新增到副作用執行佇列
      if ((tag & Passive$1) !== NoFlags$1 && (tag & HasEffect) !== NoFlags$1) {
        enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
        enqueuePendingPassiveHookEffectMount(finishedWork, effect);
      }
      effect = next;
    } while (effect !== firstEffect);
  }
}

在flushPassiveEffects中，會先執行上次更新動作的銷燬函數，然後再執行本次更新動作的回撥函數，並且會把回撥函數的return作為下次更新動作的銷燬函數。

function flushPassiveEffectsImpl() {
  // 執行上次更新動作的銷燬函數
  var unmountEffects = pendingPassiveHookEffectsUnmount;
  pendingPassiveHookEffectsUnmount = [];
  for (var i = 0; i < unmountEffects.length; i += 2) {
    ...destroy()
  }
  // 執行本次更新動作的回撥函數
  var mountEffects = pendingPassiveHookEffectsMount;
  pendingPassiveHookEffectsMount = [];
  for (var _i = 0; _i < mountEffects.length; _i += 2) {
    ...create()
  }
}

上面程式碼中的這兩行就是來自副作用執行佇列，已經過濾掉了不需要執行的effect，只執行該佇列上的副作用函數

var unmountEffects = pendingPassiveHookEffectsUnmount;
var mountEffects = pendingPassiveHookEffectsMount;

總結

看完這篇文章，我們可以弄明白下面這幾個問題：

useEffect和useLayoutEffect的區別？
useEffect是怎麼判斷回撥函數是否需要執行的？
useEffect是同步還是非同步？
useEffect是通過什麼實現非同步的？
useEffect為什麼要要優先選用MessageChannel實現非同步？

到此這篇關於React深入分析useEffect原始碼的文章就介紹到這了,更多相關React useEffect內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！