React中useEffect的源碼解讀

前言

對源碼的解讀有利於搞清楚Hooks到底做了什么，如果您覺得useEffect很“魔法”，這篇文章也許對您有些幫助。

本篇博客篇幅有限，只看useEffect，力求簡單明了，帶您到React Hooks的深處看看

按圖索驥找到Hook相關源碼（可以直接跳）

首先我們從Github上得到react的源碼，然后可以在packages中找到react文件夾，其中的index.js就是我們的入口。

代碼很簡單，就兩行：

const React = require('./src/React');

module.exports = React.default || React;

所以接下來我們去看看 'react/src/React'，代碼有點多，我們簡化一下：

import ReactVersion from 'shared/ReactVersion';

// ...

import {
  useEffect,
} from './ReactHooks';

const React = {
  useEffect
};

//...
export default React;

很好，現在我們至少知道為什么Hooks的引用方式是：

import {useEffect} from 'react'

接下來我們繼續看看 'react/src/ReactHooks'。

ReactHooks文件（可以直接跳）

之前說好了只看useEffect，所以同樣需要簡化一下代碼。

並且考慮到有人對TypeScript語法不熟悉，還去掉了TypeScript語法，之后的簡化代碼也會如此。

現在我們看下簡化后的代碼：

import invariant from 'shared/invariant';

import ReactCurrentDispatcher from './ReactCurrentDispatcher';

function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current;
  // React版本不對或者Hook使用有誤什么的就報錯
  // ...
  return dispatcher;
}

export function useEffect(create,inputs) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useEffect(create, inputs);
}

這里可以看到，我們的useEffect實際上是ReactCurrentDispatcher.current.useEffect。

ReactCurrentDispatcher文件（可以直接跳）

看一下ReactCurrentDispatcher文件，這里沒有簡化：

import type {Dispatcher} from 'react-reconciler/src/ReactFiberHooks';

const ReactCurrentDispatcher = {
  current: (null: null | Dispatcher),
};

export default ReactCurrentDispatcher;

發現他的current的類型是null或者Dispatcher，所以這里我們很簡單就能猜到，這個東西的源碼在 'react-reconciler/src/ReactFiberHooks'。

ReactFiberHooks文件

幾千行代碼,頭大。但是莫慌，咱們又不是來寫react的，看看原理而已。

我們之前已經知道useEffect實際上是ReactCurrentDispatcher.current.useEffect。

很明顯ReactCurrentDispatcher.current不管是什么東西單獨列出來，我們只需要知道誰賦值給他就行了。

精簡代碼，去掉用__DEV__區分的開發代碼之后，我們發現整個文件給ReactCurrentDispatcher.current賦值的沒幾個。

而唯一一個與異常判斷無關的是renderWithHooks函數中的這一塊代碼：

export function renderWithHooks(
  current,
  workInProgress,
  Component,
  props,
  secondArg,
  nextRenderExpirationTime
){
  ReactCurrentDispatcher.current =
      current === null || current.memoizedState === null
        ? HooksDispatcherOnMount
        : HooksDispatcherOnUpdate;
  let children = Component(props, secondArg);
  return children;
}

我們不知道這段代碼是干嘛的，但是他肯定是渲染組件時用的。

而這里很顯然ReactCurrentDispatcher.current的值就只能是HooksDispatcherOnMount和HooksDispatcherOnUpdate。

很明顯這兩個一個用於加載時，一個用於更新時。

然后我們們搜一下相關代碼：

const HooksDispatcherOnMount = {
  useEffect: mountEffect
};

const HooksDispatcherOnUpdate = {
  useEffect: updateEffect
};

也就是說，組件加載時，useEffect會調用mountEffect，組件更新時會調用updateEffect。

讓我們繼續看看這兩個函數：

function mountEffect(create, deps) {
  return mountEffectImpl(
    UpdateEffect | PassiveEffect,
    UnmountPassive | MountPassive,
    create,
    deps,
  );
}

function updateEffect(create, deps) {
  return updateEffectImpl(
    UpdateEffect | PassiveEffect,
    UnmountPassive | MountPassive,
    create,
    deps,
  );
}

這里的UpdateEffect和PassiveEffect是二進制常數，用位運算的方式操作。

先不用知道具體意義，知道是個常量即可。

接下來我們看看具體的mountEffectImpl：

function mountEffectImpl(fiberEffectTag, hookEffectTag, create, deps){
  const hook = mountWorkInProgressHook();
  // useEffect不傳依賴，那么就為null
  const nextDeps = deps === undefined ? null : deps;
  currentlyRenderingFiber.effectTag |= fiberEffectTag;
  // 鏈表尾部hook對象的memoizedState為pushEffect的返回值
  hook.memoizedState = pushEffect(hookEffectTag, create, undefined, nextDeps);
}

我們看到第一行代碼調用mountWorkInProgressHook新建了一個hook對象，讓我們看看mountWorkInProgressHook：

function mountWorkInProgressHook() {
  const hook = {
    memoizedState: null,

    baseState: null,
    baseQueue: null,
    queue: null,

    next: null,
  };

  if (workInProgressHook === null) {
    // This is the first hook in the list
    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
  } else {
    // Append to the end of the list
    workInProgressHook = workInProgressHook.next = hook;
  }
  return workInProgressHook;
}

很明顯這里有個鏈表結構workInProgressHook，如果workInProgressHook鏈表為null就將新建的hook對象賦值給它，如果不為null，那么就加在鏈表尾部。

這里有必要講解一下：

Hooks作為一個鏈表存儲在fiber的memoizedState中。
currentHook 是當前fiber的鏈表。
workInProgressHook 是即將被加入到 work-in-progress fiber的鏈表。

然后我們再看看pushEffect：

function pushEffect(tag, create, destroy, deps) {
  // 新建一個effect，很明顯又是個鏈表結構
  const effect = {
    tag,
    create,
    destroy,
    deps,
    // Circular
    next: null,
  };
  // 從currentlyRenderingFiber.updateQueue獲取組件更新隊列
  let componentUpdateQueue= currentlyRenderingFiber.updateQueue;
  // 判斷組件更新隊列是否為空，每次在調用renderWithHooks都會將這個componentUpdateQueue置為null
  // 這樣的話每次update這個組件時，就會創建一個新的effect鏈表
  if (componentUpdateQueue === null) {
    // 為空就創建一個組件更新隊列
    componentUpdateQueue = createFunctionComponentUpdateQueue();
    // 並賦值給currentlyRenderingFiber.updateQueue
    currentlyRenderingFiber.updateQueue = componentUpdateQueue;
    // 組件更新隊列最新的effect為我們新建的effect
    componentUpdateQueue.lastEffect = effect.next = effect;
  } else {
    // 如果組件更新隊列已經存在，獲取它最新的Effect
    const lastEffect = componentUpdateQueue.lastEffect;
    if (lastEffect === null) {
      // 如果最新的Effect為null，那么組件更新隊列最新的Effect為我們新建的effect
      componentUpdateQueue.lastEffect = effect.next = effect;
    } else {
      // 否則將我們的effect加入到鏈表結構中最末尾，然后他的next為鏈表結構的第一個effect
      // 這里的effect鏈表是個閉環
      const firstEffect = lastEffect.next;
      lastEffect.next = effect;
      effect.next = firstEffect;
      componentUpdateQueue.lastEffect = effect;
    }
  }
  return effect;
}

我們再看看更新時調用的updateEffectImpl：

function updateEffectImpl(fiberEffectTag, hookEffectTag, create, deps) {
  //  這里 updateWorkInProgressHook 
  //  workInProgressHook = workInProgressHook.next;
  //  currentHook = currentHook.next;
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  let destroy = undefined;


  if (currentHook !== null) {
    const prevEffect = currentHook.memoizedState;
    destroy = prevEffect.destroy;
    if (nextDeps !== null) {
      const prevDeps = prevEffect.deps;
      // 對比兩個依賴數組的各個值之間是否有變動，如果沒變動，那么就設置標志位為NoHookEffect
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        pushEffect(NoHookEffect, create, destroy, nextDeps);
        return;
      }
    }
  }

  currentlyRenderingFiber.effectTag |= fiberEffectTag;

  hook.memoizedState = pushEffect(hookEffectTag, create, destroy, nextDeps);
}

我們可以看到updateEffectImpl和mountEffectImpl很像，最重要的是我們得兩個函數串起來，看看他們到底實現了一個什么。

Hook相關數據結構簡圖

這里我自己畫了一張圖，利於理解：

這張圖的結構是一個組件某一時刻的結構。

圖中黃色為Fiber節點，綠色為Hook節點，藍色為Effect節點。

Fiber節點，其實就是我們的虛DOM節點，react會生成一個Fiber節點樹，每個組件在Fiber樹上都有對應的Fiber節點。

其中currentlyRenderingFiber表示我們正在進行渲染的節點，它來自於workInProgress，current表示已經渲染的節點。

組件加載時，會執行各個useEffect，然后就會建立一個Hook鏈表，而workInProgress的memoizedState字段就指向了Hook鏈表的尾部Hook節點。

而構建每個Hook節點時，會同時構造一個Effect節點，同樣，Hook節點的memoizedState字段就指向了對應的Effect節點。

而每個Effect節點又會連接起來形成一個鏈表，然后workInProgress的updateQueue字段指向了Effect鏈表的尾部Effect節點。

組件更新時，會依次對比currentHook指向的Effect的依賴數組與新的依賴數組的不同，如果一樣，就設置Effect節點的effectTag為NoHookEffect。

但是無論依賴數組中的值是否改變，都會新構造一個Effect節點，作為Hook節點的memoizedState字段的值。

然后在准備渲染時，會去直接找到Fiber節點的updateQueue的lastEffect，也就是直接指向Effect鏈表的尾部Effect節點。

因為effect鏈表是閉環的，這里通過lastEffect的next找到第一個Effect。

然后循環遍歷effect鏈表，當effectTag為NoHookEffect則不做操作，否則會去先執行effect的destroy操作，然后再執行create操作。

對，你沒看錯，總結起來就是每次更新后，只要依賴項改變，那么就會執行useEffect的卸載函數，再執行第一個參數create函數。

這一部分代碼比較遠：

function commitHookEffectList(
  unmountTag,
  mountTag,
  finishedWork,
) {
  const updateQueue = finishedWork.updateQueue;
  let lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  if (lastEffect !== null) {
    const firstEffect = lastEffect.next;
    let effect = firstEffect;
    do {
      if ((effect.tag & unmountTag) !== NoHookEffect) {
        // Unmount
        const destroy = effect.destroy;
        effect.destroy = undefined;
        if (destroy !== undefined) {
          destroy();
        }
      }
      if ((effect.tag & mountTag) !== NoHookEffect) {
        // Mount
        const create = effect.create;
        effect.destroy = create();
      }
      effect = effect.next;
    } while (effect !== firstEffect);
  }
}

這里的位運算大家可能有點看不懂，因為NoHookEffect的值是0，所以只要effect.tag被設置為NoHookEffect，那么

effect.tag & unmountTag

就必然為NoHookEffect。

我們還記得，我們之前的玩法，依賴數組各個值不變時，就設置Effect節點的effectTag為NoHookEffect。

此時是絕對不會執行先destroy Effect節點，再執行Effect函數create的操作。

而如果effect.tag的值不為NoHookEffect，那也得需要effect.tag與unmountTag至少有一個位相同才能執行destroy。

讓我們看看之前無論是mountEffectImpl還是updateEffectImpl都默認傳的是：UnmountPassive | MountPassive，也就是說effect.tag為UnmountPassive | MountPassive。

而很明顯這個設計的目的在於，當mountTag為MountPassive時執行create函數，而unmountTag為UnmountPassive時創建執行destroy函數。

而只有下面這個地方會做這個Passive操作：

export function commitPassiveHookEffects(finishedWork: Fiber): void {
  if ((finishedWork.effectTag & Passive) !== NoEffect) {
    switch (finishedWork.tag) {
      case FunctionComponent:
      case ForwardRef:
      case SimpleMemoComponent:
      case Chunk: {
        commitHookEffectList(UnmountPassive, NoHookEffect, finishedWork);
        commitHookEffectList(NoHookEffect, MountPassive, finishedWork);
        break;
      }
      default:
        break;
    }
  }
}

這里的意思很明顯，先遍歷一遍effect鏈表，每個依賴項變了的hook都destroy一下，然后再遍歷一遍effect鏈表，每個依賴項變了的，都執行create函數一下。

也就是說每次都會按照useEffect的調用順序，先執行所有useEffect的卸載函數，再執行所有useEffect的create函數。

而commitPassiveHookEffects又是只有flushPassiveEffects這個函數最終能調用到。

而每次 React 在檢測到數據變化時，flushPassiveEffects就會執行。

不論是props還是state的變化都會如此。

所以如果您真的有需要去模擬一個像之前的componentDidMount和componentWillUnmount的生命周期，那么最好用上一個單獨的Effect：

useEffect(()=>{
  // 加載時的邏輯
  return ()=>{
    // 卸載時的邏輯
  }
},[])

這里用[]作為依賴數組，是因為這樣依賴就不會變動，也就是只在加載時執行一次加載邏輯，卸載時執行一次卸載邏輯。

不加依賴數組時，那么每次渲染都會執行一次加載和卸載。

總結

希望我的這篇文章讓您有一些收獲。

這里主要想說一下自己在源碼閱讀中的感想。

讀這部分的源碼，其實更像是在盲人摸象。

為了追求效率，需要避開一些比較復雜的東西，比如我們提到的Fiber節點樹，又比如其實useEffect替換effect和具體執行effect並不是同步的。

否則解讀很多東西要花很多時間，怕是真的要寫一個系列了。

源碼閱讀略顯艱澀，還好關鍵的地方都是有注釋的，在閱讀的過程中也能收獲不少東西。

我並不是react的開發者，如果在解讀的過程中有什么疏漏和誤解，還望諸位批評指正。