前言

對原始碼的解讀有利於搞清楚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的，看看原理而已。

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

很明顯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的開發者，如果在解讀的過程中有什麼疏漏和誤解，還望諸位批評指正