ReactDefaultBatchingStrategy源码

ReactDefaultBatchingStrategy模块用于使ReactUpdates.enqueueUpdate方法实现向dirtyComponents中添加脏组件,并重绘组件的功能,这一过程在ReactDefaultBatchingStrategy.isBatchingUpdates为否值时触发;ReactDefaultBatchingStrategy.isBatchingUpdates为真值时,ReactUpdates.enqueueUpdate方法只添加脏组件。

'use strict';

var _assign = require('object-assign');

// 调用ReactUpdates.flushBatchedUpdates方法,功能是以特定钩子重绘dirtyComponents中的各组件  
//    钩子包括ReactUpdatesFlushTransaction前后钩子,含组件重绘完成后的回调_pendingCallbacks  
//    包括ReactReconcileTransaction前后钩子,含componentDidMount、componentDidUpdate回调
var ReactUpdates = require('./ReactUpdates');

// 原型继承Transaction的某构造函数的实例将拥有perform(method,args)方法    
// 实现功能为,method函数执行前后,调用成对的前置钩子initialize、及后置钩子close;initialize为close提供参数  
var Transaction = require('./Transaction');

var emptyFunction = require('fbjs/lib/emptyFunction');

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

var FLUSH_BATCHED_UPDATES = {
  initialize: emptyFunction,

  // ReactUpdates.flushBatchedUpdates方法以特定钩子重绘dirtyComponents中的各组件  
  //    钩子包括ReactUpdatesFlushTransaction前后钩子,含组件重绘完成后的回调_pendingCallbacks  
  //    包括ReactReconcileTransaction前后钩子,含componentDidMount、componentDidUpdate回调
  close: ReactUpdates.flushBatchedUpdates.bind(ReactUpdates)
};

var TRANSACTION_WRAPPERS = [FLUSH_BATCHED_UPDATES, RESET_BATCHED_UPDATES];

function ReactDefaultBatchingStrategyTransaction() {
  this.reinitializeTransaction();// 通过Transaction模块清空前后钩子 
}

_assign(ReactDefaultBatchingStrategyTransaction.prototype, Transaction, {
  // 通过Transaction模块设定前置及后置钩子,[{initialize,close}]形式 
  getTransactionWrappers: function () {
    return TRANSACTION_WRAPPERS;
  }
});

// 以特定钩子执行ReactUpdates.enqueueUpdate方法,用于向dirtyComponent中添加脏组件
//    执行过程中,ReactDefaultBatchingStrategy.isBatchingUpdates置为真值
// 钩子包含后置钩子,将ReactDefaultBatchingStrategy.isBatchingUpdates置为否值
//    后置钩子,调用ReactUpdates.flushBatchedUpdates重绘组件或者执行ReactUpdates.asap方法添加的回调
var transaction = new ReactDefaultBatchingStrategyTransaction();

var ReactDefaultBatchingStrategy = {
  isBatchingUpdates: false,

  // ReactDefaultBatchingStrategy.isBatchingUpdates为真值,执行callback回调添加脏组件
  //    为否值,添加脏组件的同时,调用ReactUpdates.flushBatchedUpdates方法重绘组件
  // 在ReactUpdates.enqueueUpdate方法内调用,添加脏组件,以及执行组件重绘
  batchedUpdates: function (callback, a, b, c, d, e) {
    var alreadyBatchingUpdates = ReactDefaultBatchingStrategy.isBatchingUpdates;

    ReactDefaultBatchingStrategy.isBatchingUpdates = true;

    if (alreadyBatchingUpdates) {
      return callback(a, b, c, d, e);
    } else {
      return transaction.perform(callback, null, a, b, c, d, e);
    }
  }
};

module.exports = ReactDefaultBatchingStrategy;

相关推荐