窺探React - 原始碼分析

莫凡_Tcg發表於2018-02-11
React原始碼

所謂知其然還要知其所以然. 本文將分析 React 15-stable的部分原始碼, 包括元件初始渲染的過程和元件更新的過程.在這之前, 假設讀者已經:

  • 對React有一定了解
  • 知道React element、component、class區別
  • 瞭解生命週期、事務、批量更新、virtual DOM大致概念等

如何分析 React 原始碼

程式碼架構預覽

首先, 我們找到React在Github上的地址, 把15-stable版本的原始碼copy下來, 觀察它的整體架構, 這裡首先閱讀關於原始碼介紹的官方文件, 再接著看.

我們 要分析的原始碼在 src 目錄下:

// src 部分目錄

├── ReactVersion.js    # React版本號
├── addons             # 外掛
├── isomorphic		   # 同構程式碼,作為react-core, 提供頂級API
├── node_modules
├── package.json
├── renderers          # 渲染器, 包括DOM,Native,art,test等
├── shared             # 子目錄之間需要共享的程式碼,提到父級目錄shared
├── test			   # 測試程式碼
複製程式碼

分析方法

1、首先看一些網上分析的文章, 對重點部分的原始碼有個印象, 知道一些關鍵詞意思, 避免在無關的程式碼上迷惑、耗費時間;

2、準備一個demo, 無任何功能程式碼, 只安裝react,react-dom, Babel轉義包, 避免分析無關程式碼;

3、打debugger; 利用Chrome devtool一步一步走, 打斷點, 看呼叫棧,看函式返回值, 看作用域變數值;

4、利用編輯器查詢程式碼、閱讀程式碼等

正文

我們知道, 對於一般的React 應用, 瀏覽器會首先執行程式碼 ReactDOM.render來渲染頂層元件, 在這個過程中遞迴渲染巢狀的子元件, 最終所有元件被插入到DOM中. 我們來看看

呼叫ReactDOM.render 發生了什麼

大致過程(只展示主要的函式呼叫):

React render

如果看不清這有向量圖

讓我們來分析一下具體過程:

1、建立元素

首先, 對於你寫的jsx, Babel會把這種語法糖轉義成這樣:

// jsx
ReactDOM.render(
    <C />,
    document.getElementById('app')
)

// 轉義後
ReactDOM.render(
  React.createElement(C, null), 
  document.getElementById('app')
);
複製程式碼

沒錯, 就是呼叫React.createElement來建立元素. 元素是什麼? 元素只是一個物件描述了DOM樹, 它像這樣:

{
  $$typeof: Symbol(react.element)
  key: null
  props: {}        // props有child屬性, 描述子元件, 同樣是元素
  ref: null
  type: class C    // type可以是類(自定義元件)、函式(wrapper)、string(DOM節點)
  _owner: null
  _store: {validated: false}
  _self: null
  _source: null
  __proto__: Object
}
複製程式碼

React.createElement原始碼在ReactElement.js中, 邏輯比較簡單, 不做分析.

2、例項化元件

建立出來的元素被當作引數和指定的 DOM container 一起傳進ReactDOM.render. 接下來會呼叫一些內部方法, 接著呼叫了 instantiateReactComponent, 這個函式根據element的型別例項化對應的component. 當element的型別為:

  • string時, 說明是文字, 例項化ReactDOMTextComponent;
  • ReactElement時, 說明是react元素, 進一步判斷element.type的型別, 當為
    • string時, 為DOM原生節點, 例項化ReactDOMComponent;
    • 函式或類時, 為react 元件, 例項化ReactCompositeComponent

instantiateReactComponent函式在instantiateReactComponent.js :

/**
 * Given a ReactNode, create an instance that will actually be mounted.
 */
function instantiateReactComponent(node(這裡node指element), shouldHaveDebugID) {
  ...
  
  // 如果element為空
  if (node === null || node === false) {
    // 建立空component
    instance = ReactEmptyComponent.create(instantiateReactComponent);
  } else if (typeof node === 'object') {  // 如果是物件
      ...     // 這裡是型別檢查
   
    // 如果element.type是字串
    if (typeof element.type === 'string') {
      //例項化 宿主元件, 也就是DOM節點
      instance = ReactHostComponent.createInternalComponent(element);
    } else if (isInternalComponentType(element.type)) {
      // 保留給以後版本使用，此處暫時不會涉及到
    } else { // 否則就例項化ReactCompositeComponent
      instance = new ReactCompositeComponentWrapper(element);
    }
  // 如果element是string或number
  } else if (typeof node === 'string' || typeof node === 'number') {
    // 例項化ReactDOMTextComponent
    instance = ReactHostComponent.createInstanceForText(node);
  } else {
    invariant(false, 'Encountered invalid React node of type %s', typeof node);
  }
   ...
  return instance;
}
複製程式碼
3、批量更新

在呼叫instantiateReactComponent拿到元件例項後, React 接著呼叫了batchingStrategy.batchedUpdates並將元件例項當作引數執行批量更新.

批量更新是一種優化策略, 避免重複渲染, 在很多框架都存在這種機制. 其實現要點是要弄清楚何時儲存更新, 何時批量更新.

在React中, 批量更新受batchingStrategy控制,而這個策略除了server端都是ReactDefaultBatchingStrategy:

不信你看, 在ReactUpdates.js中 :

var ReactUpdatesInjection = {
  ...
  // 注入批量策略的函式宣告
  injectBatchingStrategy: function(_batchingStrategy) {
    ... 
  
    batchingStrategy = _batchingStrategy;
  },
};

複製程式碼

在ReactDefaultInjection.js中注入ReactDefaultBatchingStrategy :

ReactInjection.Updates.injectBatchingStrategy(ReactDefaultBatchingStrategy); // 注入
複製程式碼

那麼React是如何實現批量更新的? 在ReactDefaultBatchingStrategy.js我們看到, 它的實現依靠了事務.

3.1 我們先介紹一下事務.

在 Transaction.js中, React 介紹了事務:

* <pre>
 *                       wrappers (injected at creation time)
 *                                      +        +
 *                                      |        |
 *                    +-----------------|--------|--------------+
 *                    |                 v        |              |
 *                    |      +---------------+   |              |
 *                    |   +--|    wrapper1   |---|----+         |
 *                    |   |  +---------------+   v    |         |
 *                    |   |          +-------------+  |         |
 *                    |   |     +----|   wrapper2  |--------+   |
 *                    |   |     |    +-------------+  |     |   |
 *                    |   |     |                     |     |   |
 *                    |   v     v                     v     v   | wrapper
 *                    | +---+ +---+   +---------+   +---+ +---+ | invariants
 * perform(anyMethod) | |   | |   |   |         |   |   | |   | | maintained
 * +----------------->|-|---|-|---|-->|anyMethod|---|---|-|---|-|-------->
 *                    | |   | |   |   |         |   |   | |   | |
 *                    | |   | |   |   |         |   |   | |   | |
 *                    | |   | |   |   |         |   |   | |   | |
 *                    | +---+ +---+   +---------+   +---+ +---+ |
 *                    |  initialize                    close    |
 *                    +-----------------------------------------+
 * </pre>
複製程式碼

React 把要呼叫的函式封裝一層wrapper, 這個wrapper一般是一個物件, 裡面有initialize方法, 在呼叫函式前呼叫;有close方法, 在函式執行後呼叫. 這樣封裝的目的是為了, 在要呼叫的函式執行前後某些不變性約束條件(invariant)仍然成立.

這裡的不變性約束條件(invariant), 我把它理解為 “真命題”, 因此前面那句話意思就是, 函式呼叫前後某些規則仍然成立. 比如, 在調和(reconciliation)前後保留UI元件一些狀態.

React 中, 事務就像一個黑盒, 函式在這個黑盒裡被執行, 執行前後某些規則仍然成立, 即使函式報錯. 事務提供了函式執行的一個安全環境.

繼續看Transaction.js對事務的抽象實現:

// 事務的抽象實現, 作為基類
var TransactionImpl = {
  // 初始化/重置例項屬性, 給例項新增/重置幾個屬性, 例項化事務時會呼叫
  reinitializeTransaction: function () {
    this.transactionWrappers = this.getTransactionWrappers();
    if (this.wrapperInitData) {
      this.wrapperInitData.length = 0;
    } else {
      this.wrapperInitData = [];
    }
    this._isInTransaction = false;
  },

  _isInTransaction: false,

  // 這個函式會交給具體的事務例項化時定義, 初始設為null
  getTransactionWrappers: null,
  // 判斷是否已經在這個事務中, 保證當前的Transaction正在perform的同時不會再次被perform
  isInTransaction: function () {
    return !!this._isInTransaction;
  },
  
  // 頂級API, 事務的主要實現, 用來在安全的視窗下執行函式
  perform: function (method, scope, a, b, c, d, e, f) {
    var ret;
    var errorThrown;
    try {
      this._isInTransaction = true;
      errorThrown = true;
      this.initializeAll(0);  // 呼叫所有wrapper的initialize方法
      ret = method.call(scope, a, b, c, d, e, f); // 呼叫要執行的函式
      errorThrown = false;
    } finally {
      // 呼叫所有wrapper的close方法, 利用errorThrown標誌位保證只捕獲函式執行時的錯誤, 對initialize	  // 和close丟擲的錯誤不做處理
      try {
        if (errorThrown) {
          try {
            this.closeAll(0);
          } catch (err) {}
        } else {
          this.closeAll(0);
        }
      } finally {
        this._isInTransaction = false;
      }
    }
    return ret;
  },
    
  // 呼叫所有wrapper的initialize方法的函式定義
  initializeAll: function (startIndex) {
    var transactionWrappers = this.transactionWrappers; // 得到wrapper
    // 遍歷依次呼叫
    for (var i = startIndex; i < transactionWrappers.length; i++) {
      var wrapper = transactionWrappers[i];
      try {
        ...
        this.wrapperInitData[i] = wrapper.initialize ? wrapper.initialize.call(this):null;
      } finally {
        if (this.wrapperInitData[i] === OBSERVED_ERROR) {
          try {
            this.initializeAll(i + 1);
          } catch (err) {}
        }
      }
    }
  },

  // 呼叫所有wrapper的close方法的函式定義
  closeAll: function (startIndex) {
    ...
    var transactionWrappers = this.transactionWrappers; // 拿到wrapper
    // 遍歷依次呼叫
    for (var i = startIndex; i < transactionWrappers.length; i++) {
      var wrapper = transactionWrappers[i];
      var initData = this.wrapperInitData[i];
      var errorThrown;
      try {
        ...
        if (initData !== OBSERVED_ERROR && wrapper.close) {
          wrapper.close.call(this, initData);
        }
        errorThrown = false;
      } finally {
        if (errorThrown) {
          ...
          try {
            this.closeAll(i + 1);
          } catch (e) {}
        }
      }
    }
    this.wrapperInitData.length = 0;
  }
};

複製程式碼

好的, 相信你已經對事務如何實現有了大致瞭解, 但這只是React事務的抽象實現, 還需要例項化事務並對其加強的配合, 才能發揮事務的真正作用.

3.2 批量更新依靠了事務

剛講到, 在React中, 批量更新受batchingStrategy控制,而這個策略除了server端都是ReactDefaultBatchingStrategy, 而在ReactDefaultBatchingStrategy.js中, 批量更新的實現依靠了事務:

ReactDefaultBatchingStrategy.js :

...
var Transaction = require('Transaction');// 引入事務
...

var RESET_BATCHED_UPDATES = {   // 重置的 wrapper
  initialize: emptyFunction,
  close: function() {
    ReactDefaultBatchingStrategy.isBatchingUpdates = false;
  },
};

var FLUSH_BATCHED_UPDATES = {  // 批處理的 wrapper
  initialize: emptyFunction,
  close: ReactUpdates.flushBatchedUpdates.bind(ReactUpdates),
};

// 組合成 ReactDefaultBatchingStrategyTransaction 事務的wrapper
var TRANSACTION_WRAPPERS = [FLUSH_BATCHED_UPDATES, RESET_BATCHED_UPDATES]; 

// 呼叫 reinitializeTransaction 初始化
function ReactDefaultBatchingStrategyTransaction() {
  this.reinitializeTransaction();
}

// 引數中依賴了事務
Object.assign(ReactDefaultBatchingStrategyTransaction.prototype, Transaction, {
  getTransactionWrappers: function() {
    return TRANSACTION_WRAPPERS;
  },
});

var transaction = new ReactDefaultBatchingStrategyTransaction(); // 例項化這類事務

// 批處理策略
var ReactDefaultBatchingStrategy = {
  isBatchingUpdates: false,

  // 批量更新策略呼叫的就是這個方法
  batchedUpdates: function(callback, a, b, c, d, e) {
    var alreadyBatchingUpdates = ReactDefaultBatchingStrategy.isBatchingUpdates;
	// 一旦呼叫批處理, 重置isBatchingUpdates標誌位
    ReactDefaultBatchingStrategy.isBatchingUpdates = true;

    // 避免重複分配事務
    if (alreadyBatchingUpdates) {
      return callback(a, b, c, d, e);
    } else {
      return transaction.perform(callback, null, a, b, c, d, e);  // 將callback放進事務裡執行
    }
  },
};
複製程式碼

那麼, 為什麼批量更新的實現依靠了事務呢? 還記得實現批量更新的兩個要點嗎?

  • 何時儲存更新
  • 何時批處理

對於這兩個問題, React 在執行事務時呼叫wrappers的initialize方法, 建立更新佇列, 然後執行函式 :

  • 何時儲存更新—— 在執行函式時遇到更新請求就存到這個佇列中
  • 何時批處理—— 函式執行後呼叫wrappers的close方法, 在close方法中呼叫批量處理函式

口說無憑, 得有證據. 我們拿ReactDOM.render會呼叫的事務ReactReconcileTransaction來看看是不是這樣:

ReactReconcileTransaction.js 裡有個wrapper, 它是這樣定義的(英文是官方註釋) :

var ON_DOM_READY_QUEUEING = {
  /**
   * Initializes the internal `onDOMReady` queue.
   */
  initialize: function() {
    this.reactMountReady.reset();
  },

  /**
   * After DOM is flushed, invoke all registered `onDOMReady` callbacks.
   */
  close: function() {
    this.reactMountReady.notifyAll();
  },
};
複製程式碼

我們再看ReactReconcileTransaction事務會執行的函式mountComponent, 它在

ReactCompositeComponent.js :

/*
   * Initializes the component, renders markup, and registers event listeners.
*/
  mountComponent: function(
    transaction,
    hostParent,
    hostContainerInfo,
    context,
  ) {
    ...
    
    if (inst.componentDidMount) {
          if (__DEV__) {
            transaction.getReactMountReady().enqueue(() => { // 將要呼叫的callback存起來
              measureLifeCyclePerf(
                () => inst.componentDidMount(),
                this._debugID,
                'componentDidMount',
              );
            });
          } else {
            transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);
          }
      }
      
     ...
    }
複製程式碼

而上述wrapper定義的close方法呼叫的this.reactMountReady.notifyAll()在這

CallbackQueue.js :

/**
   * Invokes all enqueued callbacks and clears the queue. This is invoked after
   * the DOM representation of a component has been created or updated.
   */
  notifyAll() {
      ...
      // 遍歷呼叫儲存的callback
      for (var i = 0; i < callbacks.length; i++) {
        callbacks[i].call(contexts[i], arg);
      }
      callbacks.length = 0;
      contexts.length = 0;
    }
  }
複製程式碼

你竟然讀到這了

好累(笑哭), 先寫到這吧. 我本來還想一篇文章就把元件初始渲染的過程和元件更新的過程講完, 現在看來要分開講了… React 細節太多了, 蘊含的資訊量也很大…說博大精深一點不誇張...向React的作者們以及社群的人們致敬!

我覺得讀原始碼是一件很費力但是非常值得的事情. 剛開始讀的時候一點頭緒也沒有, 不知道它是什麼樣的過程, 不知道為什麼要這麼寫, 有時候還會因為斷點沒打好繞了很多彎路…也是硬著頭皮一遍一遍看, 結合網上的文章, 就這樣雲裡霧裡的慢慢摸索, 不斷更正自己的認知.後來看多了, 就經常會有大徹大悟的感覺, 零碎的認知開始連通起來, 逐漸摸清了來龍去脈.

現在覺得確實很值得, 自己學到了不少. 看原始碼的過程就感覺是跟作者們交流討論一樣, 思想在碰撞! 強烈推薦前端的同學們閱讀React原始碼, 大神們智慧的結晶!

未完待續...

相關文章