React进阶篇（四）事务

1. 何为事务？

根据维基百科的解释: 提供独立可靠的恢复机制，保证出错时数据的一致性，不同事务之间互相独立。

事务一般在 数据库 中使用的比较多，能保证出错的时候进行rollbakc恢复。但是，React中的事务并不提供类似数据库的回滚能力。

React中的事务-Transaction就是一个包装函数，函数被包装为一个个wrapper，其中每个wrapper都有两个方法：initialize与close。当执行方法时，需要执行事务的perform方法。perform方法会首先一次执行wrapper的initialize，然后执行函数本身，最后执行wrapper的close方法。

image

2. 从setState看事务的应用

React does not guarantee that the state changes are applied immediately

setState不一定是同步的

class Demo extends Component {
    state = {
        count: 1
    }

    onClickHandler = ()  => {
        this.setState({count: this.state.count + 1});
        console.log(this.state.count); // console.log 结果 1
        this.setState({count: this.state.count + 1});
        console.log(this.state.count); // console.log 结果 1

        setTimeout(() => {
            this.setState({count: this.state.count + 1});
            console.log(this.state.count); // console.log 结果 2
            this.setState({count: this.state.count + 1});
            console.log(this.state.count); // console.log 结果 3
        }, 0);
    }

    render() {
        const { count } = this.state;
        return (
            <button onClick={this.onClickHandler}>{count}</button>
        );
    }
}

上面的例子中，直接调用setState后，state并未立刻更新，但是，如果通过setTimeout异步调用后，state会立刻更新，为什么呢？

setState的实现

1）setState是React.Component的方法

function ReactComponent(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  this.updater = updater || ReactNoopUpdateQueue;
}

ReactComponent.prototype.setState = function (partialState, callback) {
  this.updater.enqueueSetState(this, partialState); // state入队列
  if (callback) {
    this.updater.enqueueCallback(this, callback); // callback入队列
  }
};

2）判断当前组件对象的state更新队列是否存在，如果存在则将partialState也就是新的state值加入队列；如果不存在，则创建该对象的更新队列。

var ReactUpdatedQueue = {
  enqueueSetState: function (publicInstance, partialState) {
    var internalInstance = getInternalInstanceReadyForUpdate(publicInstance, 'setState');

    if (!internalInstance) {
      return;
    }

    var queue = internalInstance._pendingStateQueue 
                || (internalInstance._pendingStateQueue = []);
    queue.push(partialState); // 入队列

    enqueueUpdate(internalInstance); // 队列更新
  },
}

3）当batchingStrategy.isBatchingUpdates为false时，将执行batchedUpdates更新队列，若为true时，则将组件放入dirtyComponent中。

var ReactUpdates = {
    enqueueUpdate: function enqueueUpdate(component) {
        ensureInjected();
        // batchingStrategy是一种批量更新策略
        if (!batchingStrategy.isBatchingUpdates) {
            batchingStrategy.batchedUpdates(enqueueUpdate, component);
            return;
        }
        
        dirtyComponents.push(component);
    }
}

截止到此，setState流程如下：

image

4）batchingStrategy是干什么的？看一下该对象类型ReactDefaultBatchingStrategy的定义。

var ReactDefaultBatchingStrategy = {
  isBatchingUpdates: false,
  // 执行批量更新的方法
  batchedUpdates: function(callback, a, b, c, d, e) {
    var alreadyBatchingUpdates = ReactDefaultBatchingStrategy.isBatchingUpdates;
    ReactDefaultBatchingStrategy.isBatchingUpdates = true;
    if (alreadyBatchingUpdates) {
      callback(a, b, c, d, e);
    } else {
      // 事务出现了！！！这里是事务的执行阶段  
      transaction.perform(callback, null, a, b, c, d, e); 
    }
  },
};

5）ReactDefaultBatchingStrategy中的transaction是如何定义的？

// 第二个事务 - 更改isBatchingUpdates布尔值，合并state改变
var RESET_BATCHED_UPDATES = {
  initialize: emptyFunction,
  close: function() {
    ReactDefaultBatchingStrategy.isBatchingUpdates = false;
  },
};

// 第一个事务 - 更新组件
var FLUSH_BATCHED_UPDATES = {
  initialize: emptyFunction,
  close: ReactUpdates.flushBatchedUpdates.bind(ReactUpdates),
};

var TRANSACTION_WRAPPERS = [FLUSH_BATCHED_UPDATES, RESET_BATCHED_UPDATES];

function ReactDefaultBatchingStrategyTransaction() {
  this.reinitializeTransaction();
}

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

var transaction = new ReactDefaultBatchingStrategyTransaction();

其中wrapper RESET_BATCHED_UPDATES负责在close阶段重置ReactDefaultBatchingStrategy的isBatchingUpdates为false。而wrapper FLUSH_BATCHED_UPDATES负责在close执行flushBatchedUpdates。

两个事务的运行次序为 FLUSH_BATCHED_UPDATES, RESET_BATCHED_UPDATES]。

由此，在上图中添加batchedUpdates中的事务操作后，流程图如下：

image

2.再回头看看我们之前的问题

在使用React封装的事件时会进入一个事务，使得 isBatchingUpdate 为 true 。

所以，随后的setState在调用时会进入 dirtyComponent 队列，在下一次batch update中进行更新。所以在下一次batch update之前， this.state 都不会得到更新。

如果 setState 函数进行了 setTimeout 的包裹，由于EventLoop的特点，会保证 setState 一定是在前一条message之后，也就是上一次batch update完之后进行执行， isBatchingUpdate 为 false，此时的 setState 会直接触发一次完整的batch update，保证 this.state 被同步更新。

3. 还有什么方式可以同步更新state？

当我们使用原生的事件机制时（比如 addEventListener ），由于缺少了React的封装，会使得 setState 直接触发 batch update更新，从而同步更新state。

componentDidMount() {
   document.querySelector('#foo').addEventListener('click', () => {
     this.setState({count: this.state.count + 1});
     console.log(this.state.count);
     this.setState({count: this.state.count + 1});
     console.log(this.state.count);
     })
  }

微信公众号：