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;