引言

如今，主流的前端框架React，Vue和Angular在前端領域已成三足鼎立之勢，基於前端技術棧的發展現狀，大大小小的公司或多或少也會使用其中某一項或者多項技術棧，那麼掌握並熟練使用其中至少一種也成為了前端人員必不可少的技能飯碗。當然，框架的部分實現細節也常成為面試中的考察要點，因此，一方面為了應付面試官的連番追問，另一方面為了提升自己的技能水平，還是有必要對框架的底層實現原理有一定的涉獵。

當然對於主攻哪門技術棧沒有嚴格的要求，挑選你自己喜歡的就好，在面試中面試官一般會先問你最熟悉的是哪門技術棧，對於你不熟悉的領域，面試官可能也不會做太多的追問。筆者在專案中一直是使用的Vue框架，其上手門檻低，也提供了比較全面和友好的官方文件可供參考。但是可能因人而異，感覺自己還是比較喜歡React，也說不出什麼好壞，可能是自己最早接觸的前端框架吧，不過很遺憾，在之前的工作中一直派不上用場，但即便如此，也阻擋不了自己對底層原理的好奇心。所以最近也是開始研究React的原始碼，並對原始碼的解讀過程做一下記錄，方便加深記憶。如果你的技術棧剛好是React，並且也對原始碼感興趣，那麼我們可以一起互相探討技術難點，讓整個閱讀原始碼的過程變得更加容易和有趣。原始碼中如果有理解錯誤的地方，還希望能夠指出。

1、準備階段

在facebook的github上，目前React的最新版本為v16.12.0，我們知道在React的v16版本之後引入了新的Fiber架構，這種架構使得任務擁有了暫停和恢復機制，將一個大的更新任務拆分為一個一個執行單元，充分利用瀏覽器在每一幀的空閒時間執行任務，無空閒時間則延遲執行，從而避免了任務的長時間執行導致阻塞主執行緒同步任務的執行。為了瞭解這種Fiber架構，這裡選擇了一個比較適中的v16.10.2的版本，沒有選擇最新的版本是因為在最新版本中移除了一些舊的相容處理方案，雖說這些方案只是為了相容，但是其思想還是比較先進的，值得我們推敲學習，所以先將其保留下來，這裡選擇v16.10.2

版本的另外一個原因是React在v16.10.0的版本中涉及到兩個比較重要的優化點：

在上圖中指出，在任務排程(Scheduler)階段有兩個效能的優化點，解釋如下：

• 將任務佇列的內部資料結構轉換成最小二叉堆的形式以提升佇列的效能(在最小堆中我們能夠以最快的速度找到最小的那個值，因為那個值一定在堆的頂部，有效減少整個資料結構的查詢時間)。
• 使用週期更短的postMessage迴圈的方式而不是使用requestAnimationFrame這種與幀邊界對齊的方式(這種優化方案指得是在將任務進行延遲後恢復執行的階段，前後兩種方案都是巨集任務，但是巨集任務也有順序之分，postMessage的優先順序比requestAnimationFrame
  高，這也就意味著延遲任務能夠更快速地恢復並執行)。

當然現在不太理解的話沒關係，後續會有單獨的文章來介紹任務排程這一塊內容，遇到上述兩個優化點的時候會進行詳細說明，在開始閱讀原始碼之前，我們可以使用create-react-app來快速搭建一個React專案，後續的示例程式碼可以在此專案上進行編寫：

// 專案搭建完成後React預設為最新版v16.12.0
create-react-app react-learning

// 為了保證版本一致，手動將其修改為v16.10.2
npm install --save [email protected] [email protected]

// 執行專案
npm start

執行以上步驟後，不出意外的話，瀏覽器中會正常顯示出專案的預設介面。得益於在Reactv16.8版本之後推出的React Hooks功能，讓我們在原來的無狀態函式元件中也能進行狀態管理，以及使用相應的生命週期鉤子，甚至在新版的create-react-app腳手架中，根元件App已經由原來的類元件的寫法升級為了推薦的函式定義元件的方式，但是原來的類元件的寫法並沒有被廢棄掉，事實上我們專案中還是會大量充斥著類元件的寫法，因此為了瞭解這種類元件的實現原理，我們暫且將App根元件的函式定義的寫法回退到類元件的形式，並對其內容進行簡單修改：

// src -> App.js
import React, {Component} from 'react';

function List({data}) {
    return (
        <ul className="data-list">
            {
                data.map(item => {
                    return <li className="data-item" key={item}>{item}</li>
                })
            }
        </ul>
    );
}

export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [1, 2, 3]
        };
    }

    render() {
        return (
            <div className="container">
                <h1 className="title">React learning</h1>
                <List data={this.state.data} />
            </div>
        );
    }
}

經過以上簡單修改後，然後我們通過呼叫

// src -> index.js
ReactDOM.render(<App />, document.getElementById('root'));

來將元件掛載到DOM容器中，最終得到App元件的DOM結構如下所示：

<div class="container">
    <h1 class="title">React learning</h1>
    <ul class="data-list">
        <li class="data-item">1</li>
        <li class="data-item">2</li>
        <li class="data-item">3</li>
    </ul>
</div>

因此我們分析React原始碼的入口也將會是從ReactDOM.render方法開始一步一步分析元件渲染的整個流程，但是在此之前，我們有必要先了解幾個重要的前置知識點，這幾個知識點將會更好地幫助我們理解原始碼的函式呼叫棧中的引數意義和其他的一些細節。

2、前置知識

首先我們需要明確的是，在上述示例中，App元件的render方法返回的是一段HTML結構，在普通的函式中這種寫法是不支援的，所以我們一般需要相應的外掛來在背後支撐，在React中為了支援這種jsx語法提供了一個Babel預置工具包@babel/preset-react，其中這個preset又包含了兩個比較核心的外掛：

• @babel/plugin-syntax-jsx：這個外掛的作用就是為了讓Babel編譯器能夠正確解析出jsx語法。
• @babel/plugin-transform-react-jsx：在解析完jsx語法後，因為其本質上是一段HTML結構，因此為了讓JS引擎能夠正確識別，我們就需要通過該外掛將jsx語法編譯轉換為另外一種形式。在預設情況下，會使用React.createElement來進行轉換，當然我們也可以在.babelrc檔案中來進行手動設定。

// .babelrc
{
    "plugins": [
        ["@babel/plugin-transform-react-jsx", {
            "pragma": "Preact.h", // default pragma is React.createElement
            "pragmaFrag": "Preact.Fragment", // default is React.Fragment
            "throwIfNamespace": false // defaults to true
        }]
    ]
}

這裡為了方便起見，我們可以直接使用Babel官方實驗室來檢視轉換後的結果，對應上述示例，轉換後的結果如下所示：

// 轉換前
render() {
    return (
        <div className="container">
            <h1 className="title">React learning</h1>
            <List data={this.state.data} />
        </div>
    );
}

// 轉換後
render() {
    return React.createElement("div", {
        className: "content"
    }, 
    React.createElement("header", null, "React learning"), 
    React.createElement(List, { data: this.state.data }));
}

可以看到jsx語法最終被轉換成由React.createElement方法組成的巢狀呼叫鏈，可能你之前已經瞭解過這個API，或者接觸過一些虛擬碼實現，這裡我們就基於原始碼，深入原始碼內部來看看其背後為我們做了哪些事情。

2.1 createElement & ReactElement

為了保證原始碼的一致性，也建議你將React版本和筆者保持一致，採用v16.10.2版本，可以通過facebook的github官方渠道進行獲取，下載下來之後我們通過如下路徑來開啟我們需要檢視的檔案：

// react-16.10.2 -> packages -> react -> src -> React.js 

在React.js檔案中，我們直接跳轉到第63行，可以看到React變數作為一個物件字面量，包含了很多我們所熟知的方法，包括在v16.8版本之後推出的React Hooks方法：

const React = {
  Children: {
    map,
    forEach,
    count,
    toArray,
    only,
  },

  createRef,
  Component,
  PureComponent,

  createContext,
  forwardRef,
  lazy,
  memo,

  // 一些有用的React Hooks方法
  useCallback,
  useContext,
  useEffect,
  useImperativeHandle,
  useDebugValue,
  useLayoutEffect,
  useMemo,
  useReducer,
  useRef,
  useState,

  Fragment: REACT_FRAGMENT_TYPE,
  Profiler: REACT_PROFILER_TYPE,
  StrictMode: REACT_STRICT_MODE_TYPE,
  Suspense: REACT_SUSPENSE_TYPE,
  unstable_SuspenseList: REACT_SUSPENSE_LIST_TYPE,

  // 重點先關注這裡，生產模式下使用後者
  createElement: __DEV__ ? createElementWithValidation : createElement,
  cloneElement: __DEV__ ? cloneElementWithValidation : cloneElement,
  createFactory: __DEV__ ? createFactoryWithValidation : createFactory,
  isValidElement: isValidElement,

  version: ReactVersion,

  unstable_withSuspenseConfig: withSuspenseConfig,

  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals,

這裡我們暫且先關注createElement方法，在生產模式下它來自於與React.js同級別的ReactElement.js檔案，我們開啟該檔案，並直接跳轉到第312行，可以看到createElement方法的函式定義(去除了一些__DEV__環境才會執行的程式碼)：

/**
 * 該方法接收包括但不限於三個引數，與上述示例中的jsx語法經過轉換之後的實參進行對應
 * @param type 表示當前節點的型別，可以是原生的DOM標籤字串，也可以是函式定義元件或者其它型別
 * @param config 表示當前節點的屬性配置資訊
 * @param children 表示當前節點的子節點，可以不傳，也可以傳入原始的字串文字，甚至可以傳入多個子節點
 * @returns 返回的是一個ReactElement物件
 */
export function createElement(type, config, children) {
  let propName;

  // Reserved names are extracted
  // 用於存放config中的屬性，但是過濾了一些內部受保護的屬性名
  const props = {};

  // 將config中的key和ref屬性使用變數進行單獨儲存
  let key = null;
  let ref = null;
  let self = null;
  let source = null;

  // config為null表示節點沒有設定任何相關屬性
  if (config != null) {

    // 有效性判斷，判斷 config.ref !== undefined
    if (hasValidRef(config)) {
      ref = config.ref;
    }

    // 有效性判斷，判斷 config.key !== undefined
    if (hasValidKey(config)) {
      key = '' + config.key;
    }

    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;

    // Remaining properties are added to a new props object
    // 用於將config中的所有屬性在過濾掉內部受保護的屬性名後，將剩餘的屬性全部拷貝到props物件中儲存
    // const RESERVED_PROPS = {
    //   key: true,
    //   ref: true,
    //   __self: true,
    //   __source: true,
    // };
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        props[propName] = config[propName];
      }
    }
  }

  // Children can be more than one argument, and those are transferred onto
  // the newly allocated props object.
  // 由於子節點的數量不限，因此從第三個引數開始，判斷剩餘引數的長度
  // 具有多個子節點則props.children屬性儲存為一個數組
  const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    
    // 單節點的情況下props.children屬性直接儲存對應的節點
    props.children = children;
  } else if (childrenLength > 1) {
    
    // 多節點的情況下則根據子節點數量建立一個數組
    const childArray = Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    props.children = childArray;
  }

  // Resolve default props
  // 此處用於解析靜態屬性defaultProps
  // 針對於類元件或函式定義元件的情況，可以單獨設定靜態屬性defaultProps
  // 如果有設定defaultProps，則遍歷每個屬性並將其賦值到props物件中(前提是該屬性在props物件中對應的值為undefined)
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  
  // 最終返回一個ReactElement物件
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

經過上述分析我們可以得出，在類元件的render方法中最終返回的是由多個ReactElement物件組成的多層巢狀結構，所有的子節點資訊均存放在父節點的props.children屬性中。我們將原始碼定位到ReactElement.js的第111行，可以看到ReactElement函式的完整實現：

/**
 * 為一個工廠函式，每次執行都會建立並返回一個ReactElement物件
 * @param type 表示節點所對應的型別，與React.createElement方法的第一個引數保持一致
 * @param key 表示節點所對應的唯一標識，一般在列表渲染中我們需要為每個節點設定key屬性
 * @param ref 表示對節點的引用，可以通過React.createRef()或者useRef()來建立引用
 * @param self 該屬性只有在開發環境才存在
 * @param source 該屬性只有在開發環境才存在
 * @param owner 一個內部屬性，指向ReactCurrentOwner.current，表示一個Fiber節點
 * @param props 表示該節點的屬性資訊，在React.createElement中通過config，children引數和defaultProps靜態屬性得到
 * @returns 返回一個ReactElement物件
 */
const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // This tag allows us to uniquely identify this as a React Element
    // 這裡僅僅加了一個$$typeof屬性，用於標識這是一個React Element
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.
    _owner: owner,
  };
  
  ...
  
  return element;
};

一個ReactElement物件的結構相對而言還是比較簡單，主要是增加了一個$$typeof屬性用於標識該物件是一個React Element型別。REACT_ELEMENT_TYPE在支援Symbol型別的環境中為symbol型別，否則為number型別的數值。與REACT_ELEMENT_TYPE對應的還有很多其他的型別，均存放在shared/ReactSymbols目錄中，這裡我們可以暫且只關心這一種，後面遇到其他型別再來細看。

2.2 Component & PureComponent

瞭解完ReactElement物件的結構之後，我們再回到之前的示例，通過繼承React.Component我們將App元件修改為了一個類元件，我們不妨先來研究下React.Component的底層實現。React.Component的原始碼存放在packages/react/src/ReactBaseClasses.js檔案中，我們將原始碼定位到第21行，可以看到Component建構函式的完整實現：

/**
 * 建構函式，用於建立一個類元件的例項
 * @param props 表示所擁有的屬性資訊
 * @param context 表示所處的上下文資訊
 * @param updater 表示一個updater物件，這個物件非常重要，用於處理後續的更新排程任務
 */
function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  // If a component has string refs, we will assign a different object later.
  // 該屬性用於儲存類元件例項的引用資訊
  // 在React中我們可以有多種方式來建立引用
  // 通過字串的方式，如：<input type="text" ref="inputRef" />
  // 通過回撥函式的方式，如：<input type="text" ref={(input) => this.inputRef = input;} />
  // 通過React.createRef()的方式，如：this.inputRef = React.createRef(null); <input type="text" ref={this.inputRef} />
  // 通過useRef()的方式，如：this.inputRef = useRef(null); <input type="text" ref={this.inputRef} />
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  // 當state發生變化的時候，需要updater物件去處理後續的更新排程任務
  // 這部分涉及到任務排程的內容，在後續分析到任務排程階段的時候再來細看
  this.updater = updater || ReactNoopUpdateQueue;
}

// 在原型上新增了一個isReactComponent屬性用於標識該例項是一個類元件的例項
// 這個地方曾經有面試官考過，問如何區分函式定義元件和類元件
// 函式定義元件是沒有這個屬性的，所以可以通過判斷原型上是否擁有這個屬性來進行區分
Component.prototype.isReactComponent = {};

/**
 * 用於更新狀態
 * @param partialState 表示下次需要更新的狀態
 * @param callback 在元件更新之後需要執行的回撥
 */
Component.prototype.setState = function(partialState, callback) {
  ...
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

/**
 * 用於強制重新渲染
 * @param callback 在元件重新渲染之後需要執行的回撥
 */
Component.prototype.forceUpdate = function(callback) {
  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};

上述內容中涉及到任務排程的會在後續講解到排程階段的時候再來細講，現在我們知道可以通過原型上的isReactComponent屬性來區分函式定義元件和類元件。事實上，在原始碼中就是通過這個屬性來區分Class Component和Function Component的，可以找到以下方法：

// 返回true則表示類元件，否則表示函式定義元件
function shouldConstruct(Component) {
  return !!(Component.prototype && Component.prototype.isReactComponent);
}

與Component建構函式對應的，還有一個PureComponent建構函式，這個我們應該還是比較熟悉的，通過淺比較判斷元件前後傳遞的屬性是否發生修改來決定是否需要重新渲染元件，在一定程度上避免元件重渲染導致的效能問題。同樣的，在ReactBaseClasses.js檔案中，我們來看看PureComponent的底層實現：

// 通過借用建構函式，實現典型的寄生組合式繼承，避免原型汙染
function ComponentDummy() {}
ComponentDummy.prototype = Component.prototype;

function PureComponent(props, context, updater) {
  this.props = props;
  this.context = context;
  // If a component has string refs, we will assign a different object later.
  this.refs = emptyObject;
  this.updater = updater || ReactNoopUpdateQueue;
}

// 將PureComponent的原型指向借用建構函式的例項
const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());

// 重新設定建構函式的指向
pureComponentPrototype.constructor = PureComponent;

// Avoid an extra prototype jump for these methods.
// 將Component.prototype和PureComponent.prototype進行合併，減少原型鏈查詢所浪費的時間(原型鏈越長所耗費的時間越久)
Object.assign(pureComponentPrototype, Component.prototype);

// 這裡是與Component的區別之處，PureComponent的原型上擁有一個isPureReactComponent屬性
pureComponentPrototype.isPureReactComponent = true;

通過以上分析，我們就可以初步得出Component和PureComponent之間的差異，可以通過判斷原型上是否擁有isPureReactComponent屬性來進行區分，當然更細粒度的區分，還需要在閱讀後續的原始碼內容之後才能見分曉。

3、面試考點

看完以上內容，按道理來說以下幾個可能的面試考點應該就不成問題了，或者說至少也不會遇到一個字也回答不了的尷尬局面，試試看吧：

• 在React中為何能夠支援jsx語法
• 類元件的render方法執行後最終返回的結果是什麼
• 手寫程式碼實現一個createElement方法
• 如何判斷一個物件是不是React Element
• 如何區分類元件和函式定義元件
• Component和PureComponent之間的關係
• 如何區分Component和PureComponent

4、總結

本文作為React16原始碼解讀的開篇，先講解了幾個比較基礎的前置知識點，這些知識點有助於我們在後續分析元件的任務排程和渲染過程時能夠更好地去理解原始碼。閱讀原始碼的過程是痛苦的，一個原因是原始碼量巨大，檔案依賴關係複雜容易讓人產生恐懼退縮心理，另一個是閱讀原始碼是個漫長的過程，期間可能會佔用你學習其他新技術的時間，讓你無法完全靜下心來。但是其實我們要明白的是，學習原始碼不只是為了應付面試，原始碼中其實有很多我們可以借鑑的設計模式或者使用技巧，如果我們可以學習並應用到我們正在做的專案中，也不失為一件有意義的事情。後續文章就從ReactDOM.render方法開始，一步一步分析元件渲染的整個流程，我們也不需要去搞懂每一行程式碼，畢竟每個人的思路不太一樣，但是關鍵步驟我們還是需要去多花時間理解的。

5、交流

如果你覺得這篇文章的內容對你有幫助，能否幫個忙關注一下筆者的公眾號[前端之境]，每週都會努力原創一些前端技術乾貨，關注公眾號後可以邀你加入前端技術交流群，我們可以一起互相交流，共同進步。

文章已同步更新至Github部落格，若覺文章尚可，歡迎前往star！

你的一個點贊，值得讓我付出更多的努力！

逆境中成長，只有不斷地學習，才能成為更好的自己，與君共勉！

相關推薦