React 机制探究 - ReactUpdates.batchedUpdates

[DelBlank]

前一篇 ReactDom.render

ReactUpdates.batchedUpdates

组件实例化后，将会进入到批量更新阶段。

事务（Transaction）

React 会把若干更新操作放到某个模块里面一起执行，这个模块就是事务（Transaction），React 中有很多事务，它们代表不同的行为，事务是原子的，每个事务都从 Transaction 类派生，它包含基础三部分：

• 前置条件（事务初始化和缓存返回值）
• 一系列更新操作
• 后置条件（事务结束）

前置条件和对应的后置条件会包裹成一个 Wrapper 对象，React 通过这些 Wrapper 对象来管理事务的开始、动作和结束。

组件在挂载过程中，React 会根据 ReactDefaultBatchingStrategyTransaction 构造函数实例化一个事务，该事务包含两个 Wrapper 对象：FLUSH_BATCHED_UPDATES（校验要更新的组件） 和 RESET_BATCHED_UPDATES（结束批量操作）

//\src\renderers\shared\stack\reconciler\ReactDefaultBatchingStrategy.js#19
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];

React 用 ReactDefaultBatchingStrategyTransaction 包裹组件挂载方法是为了检查已挂载的组件对整个挂载流程有什么影响并且更新它们。

参考文章：

• Under the hood ReactJS-part1