涓涓溪流 2017-02-04
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;