【Under-the-hood-ReactJS-Part1】React源码解读

接上文，

React流程图：
https://bogdan-lyashenko.gith...

事务

到如今这一步，组件实例已经经过某种方式加入到React的生态系统中了，同时，React也会对组件进行一些处理，好比ReactUpdates这个专门的模块。正如你们所知，React是批量处理更新的，也就是说，React会收集全部操做而后一次性操做掉。采用这种方式，一些先置条件和后置条件只须要运行一次，避免了每次更新时都要运行的弊端。

那么React是如何处理这些先置和后置条件的呢？答案就是事务(transaction)。 对于一些人来讲这个多是一个新的词汇，尤为是从UI角度的解释。为了更好的解释这个，咱们先从一个简单的案例开始。

假设有个通讯管道，每次通讯前，你都须要先创建链接，而后发送数据，最后关闭链接。若是你有不少信息须要发送，你须要重复屡次这些步骤，这些步骤都须要不少的开销。可是，所谓的事务就是你只创建一次链接，而后把全部消息一次性都发送过去，最后关闭链接便可。

咱们在把这个过程更泛化下，能够把‘发送信息’认为一次你想作的操做，‘创建/关闭’链接对应于执行一次操做的‘前置/后置‘条件。而后，你能够单独定义创建/关闭标志，而后在任何方法中使用他们（咱们能够把这些创建/关闭标志称为包装器（wrappers），由于每一个包装器都会包装某个动做方法）。

回到React，事务是React中普遍采用的一种模式。先不论包装行为，事务容许应用重置事务流，阻塞一个已经在执行过程当中的同步方法等等。React中有不少不一样的事务类，每一个类都描述一种具体的行为，可是每一个类都是继承自Transaction模块。每种事务对应的键值和特定的事务包装类是对应的。包装器就是一个拥有initialize方法和close方法的对象。

总之，大概的过程就是：

• 调用每一个包装器的initialize方法，而后缓存其返回值
• 调用事务方法自己
• 调用包装器的close方法

来看些React中其它使用事务的场景：

• 保留输入框的选择范围，以便在同步Dom结构以前/以后，其实事件发送错误，依然可以恢复选择
• 在重排DOM防止失焦/聚焦时中止事件，确保重排以后，事件系统从新激活
• 在游览器的工做线程中发生同步Dom结构后，将收集到的DOM变化队列刷新到UI渲染主线程上
• 渲染新内容后，调用收集的componentDidUpdaate的回调函数。

了解以上内容后，回到咱们一开始的实例代码。
从流程图中能看出，React调用了类ReactDefaultBatchingStrategyTransaction 。就像咱们在上面的内容里所说的，一个事务类的关键是它的包装器。 因此，咱们详细看下包装器，而后试着找出事务的精肯定义。 两个包装器 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];

正如你所见，这个事务类没有先置条件。initialize方法是个空方法，但其中有个close方法--ReactUpdates.flushBatchedUpdates却值得注意。它的做用是，在之后的从新渲染中开始脏组件的验证过程。咱们调用挂载方法，并把它包装进这个事务中，这是为了在挂载动做后，React会检查已挂载组件影响到了哪些内容，并更新这些内容。再看下流程图里被包装进事务的方法，事实上，这个方法会调用另一个事务。。。（未完待续）