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的，看看原理而已。

咱們以前已經知道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的開發者，若是在解讀的過程當中有什麼疏漏和誤解，還望諸位批評指正。