React事务机制解析

对react有一定了解的开发人员应该都听说过react的事务机制，这个机制几乎贯穿于react所有提供的方法，包括react中最常使用的setState函数

那么，react的事务机制到底是一种什么样的机制呢，为了解释事务机制的实现原理，react源码中用注释画出了这样一幅图

根据这幅图，我们可以这样理解事务，react中用事务执行方法，就是用wrapper（称之为套套吧）把方法包裹起来，然后每个wapper中都提供一个initialize方法和一个close方法，当需要使用事务调用一个方法，例如上图中的anyMethod时，使用事务提供的perform方法，将需要执行的方法传入，这个时候就会按顺序执行wrapper.initalize，anyMethod,wrapper.close，而且，事务还支持多个事务的嵌套，当执行方法被多个wapper包裹时，事务会先按顺序执行所有的initalize方法，再执行anyMethod，最后按顺序执行所有的close函数，例如上图就表示会按以下顺序执行wrapper1.initalize,wrapper2.initalize,anyMethod,wrapper1.close,wrapper2.close

那么事务在react中到底是怎么应用的呢？我们透过下面这段代码来看看如何使用事务

var ReactUpdates = require('ReactUpdates');
var Transaction = require('Transaction');

var emptyFunction = require('emptyFunction');

//第二个wrapper
var RESET_BATCHED_UPDATES = {
  initialize: emptyFunction,
  close: function() {
    ReactDefaultBatchingStrategy.isBatchingUpdates = false;
  },
};

//第一个wrapper
var FLUSH_BATCHED_UPDATES = {
  i