摘要：前言是一個(gè)十分龐大的庫，由于要同時(shí)考慮和，還有服務(wù)器渲染等，導(dǎo)致其代碼抽象化程度很高，嵌套層級(jí)非常深，閱讀其源碼是一個(gè)非常艱辛的過程。在學(xué)習(xí)源碼的過程中，給我?guī)椭畲蟮木褪沁@個(gè)系列文章，于是決定基于這個(gè)系列文章談一下自己的理解。

前言

React 是一個(gè)十分龐大的庫，由于要同時(shí)考慮 ReactDom 和 ReactNative ，還有服務(wù)器渲染等，導(dǎo)致其代碼抽象化程度很高，嵌套層級(jí)非常深，閱讀其源碼是一個(gè)非常艱辛的過程。在學(xué)習(xí) React 源碼的過程中，給我?guī)椭畲蟮木褪沁@個(gè)系列文章，于是決定基于這個(gè)系列文章談一下自己的理解。本文會(huì)大量用到原文中的例子，想體會(huì)原汁原味的感覺，推薦閱讀原文。

本系列文章基于 React 15.4.2 ，以下是本系列其它文章的傳送門：
React 源碼深度解讀（一）：首次 DOM 元素渲染 - Part 1
React 源碼深度解讀（二）：首次 DOM 元素渲染 - Part 2
React 源碼深度解讀（三）：首次 DOM 元素渲染 - Part 3
React 源碼深度解讀（四）：首次自定義組件渲染 - Part 1
React 源碼深度解讀（五）：首次自定義組件渲染 - Part 2
React 源碼深度解讀（六）：依賴注入
React 源碼深度解讀（七）：事務(wù) - Part 1
React 源碼深度解讀（八）：事務(wù) - Part 2
React 源碼深度解讀（九）：?jiǎn)蝹€(gè)元素更新
React 源碼深度解讀（十）：Diff 算法詳解

正文

上一篇文章介紹了 transaction 的基本概念和用法。今天我們將講解在更新過程中，React 是如何通過多個(gè) transacion 之間的協(xié)作，來有效組織代碼的。

二、ReactUpdatesFlushTransaction

前文講到ReactDefaultBatchingStrategy close 的時(shí)候，會(huì)調(diào)用ReactUpdates.flushBatchedUpdates：

PooledClass.addPoolingTo(ReactUpdatesFlushTransaction);

var flushBatchedUpdates = function () {
    while (dirtyComponents.length || asapEnqueued) {
        if (dirtyComponents.length) {
            var transaction = ReactUpdatesFlushTransaction.getPooled();
            transaction.perform(runBatchedUpdates, null, transaction);
            ReactUpdatesFlushTransaction.release(transaction);
        }

        if (asapEnqueued) {
            asapEnqueued = false;
            var queue = asapCallbackQueue;
            asapCallbackQueue = CallbackQueue.getPooled();
            queue.notifyAll();
            CallbackQueue.release(queue);
        }
    }
};

這里又調(diào)用了另一個(gè) transaction 來處理后續(xù)的流程，有所不同的是 transaction 的創(chuàng)建不是直接 new，而是調(diào)用getPooled方法。這個(gè)方法是通過前面的PooledClass.addPoolingTo注入到ReactUpdatesFlushTransaction中的，如果對(duì)這個(gè)步驟感興趣可以看看這篇文章。下面來看ReactUpdatesFlushTransaction的內(nèi)容：

Object.assign(
    ReactUpdatesFlushTransaction.prototype,
    Transaction, 
    {
        getTransactionWrappers: function () {
            return TRANSACTION_WRAPPERS;
        },

        destructor: function () {
            this.dirtyComponentsLength = null;
            CallbackQueue.release(this.callbackQueue);
            this.callbackQueue = null;
            ReactUpdates.ReactReconcileTransaction.release(this.reconcileTransaction);
            this.reconcileTransaction = null;
        },

        perform: function (method, scope, a) {
            return Transaction.perform.call(
                this,
                this.reconcileTransaction.perform,
                this.reconcileTransaction,
                method,
                scope,
                a
            );
        },
    }
);

var TRANSACTION_WRAPPERS = [NESTED_UPDATES, UPDATE_QUEUEING];

var NESTED_UPDATES = {
    initialize: function () {
        this.dirtyComponentsLength = dirtyComponents.length;
    },
    close: function () {
        if (this.dirtyComponentsLength !== dirtyComponents.length) {
            // Additional updates were enqueued by componentDidUpdate handlers or
            // similar; before our own UPDATE_QUEUEING wrapper closes, we want to run
            // these new updates so that if A"s componentDidUpdate calls setState on
            // B, B will update before the callback A"s updater provided when calling
            // setState.
            dirtyComponents.splice(0, this.dirtyComponentsLength);
            flushBatchedUpdates();
        } else {
            dirtyComponents.length = 0;
        }
    },
};

var UPDATE_QUEUEING = {
    initialize: function () {
        this.callbackQueue.reset();
    },
    close: function () {
        this.callbackQueue.notifyAll();
    },
};

ReactUpdatesFlushTransaction覆蓋了原型鏈上的perform方法，不是直接調(diào)用 callback，而是嵌套調(diào)用了this.reconcileTransaction.perform，在將 callback 透?jìng)鹘oreconcileTransaction的perform。這里的reconcileTransaction也開啟了實(shí)例池。

這里要注意下NESTED_UPDATES這個(gè) wrapper，如果dirtyComponents的數(shù)量跟 transaction 開始的時(shí)候不一樣，它又會(huì)遞歸調(diào)用flushBatchedUpdates，直到dirtyComponents不再變化為止。UPDATE_QUEUEING這個(gè) wrapper 暫時(shí)先忽略。

目前為止的調(diào)用關(guān)系如下：

三、ReactReconcileTransaction

ReactReconcileTransaction是一個(gè)普通的 transaction，定義了一些 DOM 操作相關(guān)的 wrapper：

function ReactReconcileTransaction(useCreateElement: boolean) {
  this.reinitializeTransaction();
  this.renderToStaticMarkup = false;
  this.reactMountReady = CallbackQueue.getPooled(null);
  this.useCreateElement = useCreateElement;
}

var Mixin = {
  getTransactionWrappers: function() {
    return TRANSACTION_WRAPPERS;
  },

  ...

  destructor: function() {
    CallbackQueue.release(this.reactMountReady);
    this.reactMountReady = null;
  },
};


Object.assign(ReactReconcileTransaction.prototype, Transaction, Mixin);

PooledClass.addPoolingTo(ReactReconcileTransaction);

var TRANSACTION_WRAPPERS = [
  SELECTION_RESTORATION,
  EVENT_SUPPRESSION,
  ON_DOM_READY_QUEUEING,
];

var SELECTION_RESTORATION = {
  /**
   * @return {Selection} Selection information.
   */
  initialize: ReactInputSelection.getSelectionInformation,
  /**
   * @param {Selection} sel Selection information returned from `initialize`.
   */
  close: ReactInputSelection.restoreSelection,
};

/**
 * Suppresses events (blur/focus) that could be inadvertently dispatched due to
 * high level DOM manipulations (like temporarily removing a text input from the
 * DOM).
 */
var EVENT_SUPPRESSION = {
  /**
   * @return {boolean} The enabled status of `ReactBrowserEventEmitter` before
   * the reconciliation.
   */
  initialize: function() {
    var currentlyEnabled = ReactBrowserEventEmitter.isEnabled();
    ReactBrowserEventEmitter.setEnabled(false);
    return currentlyEnabled;
  },

  /**
   * @param {boolean} previouslyEnabled Enabled status of
   *   `ReactBrowserEventEmitter` before the reconciliation occurred. `close`
   *   restores the previous value.
   */
  close: function(previouslyEnabled) {
    ReactBrowserEventEmitter.setEnabled(previouslyEnabled);
  },
};

/**
 * Provides a queue for collecting `componentDidMount` and
 * `componentDidUpdate` callbacks during the transaction.
 */
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();
  },
};

這三個(gè) wrapper 的作用注釋都講得很清楚了，不再贅述。值得一提的是這里perform的 callback 是ReactUpdatesFlushTransaction透?jìng)鬟^來的ReactUpdate.runBatchedUpdates。

目前為止的調(diào)用關(guān)系如下：

四、總結(jié)

到此為止，transaction 相關(guān)的內(nèi)容就講完了，下一篇開始介紹真正的更新操作。