React useEffect的源碼解讀

来源:https://www.cnblogs.com/vvjiang/archive/2020/01/07/12160791.html
-Advertisement-
Play Games

前言 對源碼的解讀有利於搞清楚Hooks到底做了什麼，如果您覺得useEffect很“魔法”，這篇文章也許對您有些幫助。 本篇博客篇幅有限，只看useEffect，力求簡單明瞭，帶您到React Hooks的深處看看 按圖索驥找到Hook相關源碼（可以直接跳） 首先我們從Github上得到react ...


前言

對源碼的解讀有利於搞清楚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的開發者，如果在解讀的過程中有什麼疏漏和誤解，還望諸位批評指正。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android中通過Java代碼實現ScrollView滾動視圖-以歌詞滾動為例
    場景 實現效果如下 註： 博客： https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 將佈局改為LinearLayout，並通過android:orientation="vertical">設置 ...
  • Android中通過數組資源文件xml與適配器兩種方式給ListView列表視圖設置數據源
    場景 實現效果如下 註： 博客： https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 將佈局改為LinearLayout，並通過android:orientation="vertical">設置 ...
  • Android中自定義xml文件給Spinner下拉框賦值並獲取下拉選中的值
    場景 實現效果如下 註： 博客： https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 將佈局改為LinearLayout，並通過android:orientation="vertical">設置 ...
  • Android中實現照片滑動時左右進出的動畫的xml代碼
    場景 Android中通過ImageSwitcher實現相冊滑動查看照片功能(附代碼下載)： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103866786 最終實現的效果為 註： 博客： https://blog.csdn.n ...
  • Android中點擊按鈕獲取string.xml中內容並彈窗提示
    場景 AndroidStudio跑起來第一個App時新手遇到的那些坑： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103797243 效果 註： 博客：https://blog.csdn.net/badao_liumang_q ...
  • Css3 里的彈性盒的比例關係
    前兩天朋友出去面試遇到了尷尬的問題，原題是："在一個盒子里包裹著三個子元素，讓子元素的寬度以1：1、1：2、1：3的關係依次展示" 這就尷尬了啊.......................... 這個的就是彈性盒裡的東西 flex 屬性用於設置或檢索彈性盒模型對象的子元素如何分配空間。 flex ...
  • ES6 class（基本語法+方法）
    靜態屬性與靜態方法 1. 不會被類實例所擁有的屬性與方法 只是類自身擁有2. 只能通過類調用 靜態方法與普通方法重名，不會衝突static 關鍵字（靜態方法） 靜態屬性類名.屬性名 = 屬性值; 靜態屬性應用舉例： //職業類 class Profession{ } class Character ...
  • 10個超好用的配色網站
    01 Material Palette 網站地址：http://www.materialpalette.com/ Material Palette是一款提供Material Design配色的線上工具，它的用法很簡單，你只要找出想要搭配的兩種顏色，它就會顯示出兩種顏色搭配在一起的效果預覽，並提供你較 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類