React Transaction

简介

事务机制在react中是一个非常重要的概念，它可以将诸多方法调用包裹起来集中执行。事务这个概念在数据库操作过程中非常常见，事务具有原子性这个特性，简单说，一个事务中若干任务是作为一个整体执行，要么全部执行成功，要么其中一个失败导致全部失败然后撤回修改。

/**
 * `Transaction` creates a black box that is able to wrap any method such that
 * certain invariants are maintained before and after the method is invoked
 * (Even if an exception is thrown while invoking the wrapped method). Whoever
 * instantiates a transaction can provide enforcers of the invariants at
 * creation time. The `Transaction` class itself will supply one additional
 * automatic invariant for you - the invariant that any transaction instance
 * should not be run while it is already being run. You would typically create a
 * single instance of a `Transaction` for reuse multiple times, that potentially
 * is used to wrap several different methods. Wrappers are extremely simple -
 * they only require implementing two methods.
 *
 * invariant词汇的理解释义参考: http://wulfric.me/2017/11/what-is-invariant/
 * `Transaction`创建一个黑盒，这样他可以包裹任何方法，以达到在执行这个方法前后维护某些确定的约束(
 * 即使这个方法抛出了错误)的目标。无论如何，实例化一个事务可以在在创建时提供约束的实施方(需求方)。
 * Transaction Class本身提供额外的绝对约束条件给你-任何事务实例的不变量不应该在它已经运行时运行。
 * 你一般会创建一个Transaction单例来重用多次，它可能被用来包装不同的方法。Wrappers是非常简单的,
 * 它仅仅要求继承initialize&&close这两个方法。

 * Use cases:
 * - Preserving the input selection ranges before/after reconciliation.
 *   Restoring selection even in the event of an unexpected error.
 * - Deactivating events while rearranging the DOM, preventing blurs/focuses,
 *   while guaranteeing that afterwards, the event system is reactivated.
 * - Flushing a queue of collected DOM mutations to the main UI thread after a
 *   reconciliation takes place in a worker thread.
 * - Invoking any collected `componentDidUpdate` callbacks after rendering new
 *   content.
 * - (Future use case): Wrapping particular flushes of the `ReactWorker` queue
 *   to preserve the `scrollTop` (an automatic scroll aware DOM).
 * - (Future use case): Layout calculations before and after DOM updates.
 *
 * 用例:
 * - 在执行前后保存输入框选择范围(即鼠标选中一个文字高亮区块)，即使过程中出错也可以返回这个选择范围
 * - 页面重绘前解除事件绑定,防止鼠标焦点进出，当完成了页面重绘恢复事件绑定
 * - 在工作线程中进行协调后，将收集的DOM突变队列刷新到主UI线程(批量更新)。
 * - render新的内容后 批量执行componentDidUpdate中收集到的回调
 * - (未来用例) 保留scrollTop
 * - (未来用例) 布局计算
 */

在React事务这里的注释里面对使用场景已经有相对详细的描述了。所以后面主要是看看事务的实例和使用。

使用场景

这里暂时跳过服务端和ReactNative端的调用。主要的使用在以下三个文件中。

ReactReconcileTransaction.js

调度模块这里使用到了事务，注册了三个事务。

var SELECTION_RESTORATION = {
  initialize: ReactInputSelection.getSelectionInformation,
  close: ReactInputSelection.restoreSelection,
};

var EVENT_SUPPRESSION = {
  initialize: function() {
    var currentlyEnabled = ReactBrowserEventEmitter.isEnabled();
    ReactBrowserEventEmitter.setEnabled(false);
    return currentlyEnabled;
  },
  close: function(previouslyEnabled) {
    ReactBrowserEventEmitter.setEnabled(previouslyEnabled);
  },
};

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

SELECTION_RESTORATION这个事务还是比较好理解，用来保存input的选择范围&刷新后重新选中这个返回。

这里不妨通过这个来看看这个过程中事务的数据流是如何运行的，尤其是,这个数据保存在哪儿，又如何恢复的。

这里需要对事务逻辑中等初始化和结束事务逻辑进行分析。

initializeAll: function (startIndex) {
  var transactionWrappers = this.transactionWrappers;
  for (var i = startIndex; i < transactionWrappers.length; i++) {
    var wrapper = transactionWrappers[i];
    try {
      this.wrapperInitData[i] = OBSERVED_ERROR;
      this.wrapperInitData[i] = wrapper.initialize ? wrapper.initialize.call(this) : null;
    } finally {
      if (this.wrapperInitData[i] === OBSERVED_ERROR) {
        try {
          this.initializeAll(i + 1);
        } catch (err) {}
      }
    }
  }
},
closeAll: function (startIndex) {
    !this.isInTransaction() ? "development" !== 'production' ? invariant(false, 'Transaction.closeAll(): Cannot close transaction when none are open.') : _prodInvariant('28') : void 0;
    var transactionWrappers = this.transactionWrappers;
    for (var i = startIndex; i < transactionWrappers.length; i++) {
      var wrapper = transactionWrappers[i];
      var initData = this.wrapperInitData[i];
      var errorThrown;
      try {
        errorThrown = true;
        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;
  }

可以看到，当事务开始初始化时候会将数据保存在this.wrapperInitData中，这是一个数组，数据的索引对应着事务索引，当事务结束时候将数据从this.wrapperInitData拿到并还原，一切完毕之后执行this.wrapperInitData.length = 0将其数据清空。

事务简况:

事务名称	作用
SELECTION_RESTORATION	input textarea选择状态保存和恢复
EVENT_SUPPRESSION	DOM上事件的卸载和重新激活
ON_DOM_READY_QUEUEING

ReactDefaultBatchingStrategy.js

var RESET_BATCHED_UPDATES = {
  initialize: emptyFunction,
  close: function() {
    ReactDefaultBatchingStrategy.isBatchingUpdates = false;
  },
};

var FLUSH_BATCHED_UPDATES = {
  initialize: emptyFunction,
  close: ReactUpdates.flushBatchedUpdates.bind(ReactUpdates),
};

事务名称	作用
RESET_BATCHED_UPDATES	仅在事务结束后将isBatchingUpdates重置为false
FLUSH_BATCHED_UPDATES	批量更新标记的dirtyComponents数组

ReactUpdates.js

var NESTED_UPDATES = {
  initialize: function() {
    this.dirtyComponentsLength = dirtyComponents.length;
  },
  close: function() {
    if (this.dirtyComponentsLength !== dirtyComponents.length) {
      dirtyComponents.splice(0, this.dirtyComponentsLength);
      flushBatchedUpdates();
    } else {
      dirtyComponents.length = 0;
    }
  },
};

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

事务名称	作用
NESTED_UPDATES	标记事务开始时候的dirtyComponents并在结束时候对其进行更新，并从中删除更新的dirtyComponents元素
UPDATE_QUEUEING