重要概念:
Transaction:
在方法的前后加入方法
ReactDefaultBatchingStrategy.batchedUpdates
var RESET_BATCHED_UPDATES = {
initialize: emptyFunction,
close: function () {
ReactDefaultBatchingStrategy.isBatchingUpdates = false;
}
};
var FLUSH_BATCHED_UPDATES = {
initialize: emptyFunction,
close: ReactUpdates.flushBatchedUpdates.bind(ReactUpdates)
};
ReactReconcileTransaction
var TRANSACTION_WRAPPERS = [SELECTION_RESTORATION, EVENT_SUPPRESSION, ON_DOM_READY_QUEUEING];
var ON_DOM_READY_QUEUEING = {
/**
* Initializes the internal `onDOMReady` queue.
*/
initialize: function () {
this.reactMountReady.reset();
},
/**
* After DOM is flushed, invoke all registered `onDOMReady` callbacks.
*/
close: function () {
this.reactMountReady.notifyAll();
}
};
ReactUpdatesFlushTransaction
var TRANSACTION_WRAPPERS = [NESTED_UPDATES, UPDATE_QUEUEING];
var NESTED_UPDATES = {
initialize: function () {
this.dirtyComponentsLength = dirtyComponents.length;
},
close: function () {
if (this.dirtyComponentsLength !== dirtyComponents.length) {
// Additional updates were enqueued by componentDidUpdate handlers or
// similar; before our own UPDATE_QUEUEING wrapper closes, we want to run
// these new updates so that if A's componentDidUpdate calls setState on
// B, B will update before the callback A's updater provided when calling
// setState.
dirtyComponents.splice(0, this.dirtyComponentsLength);
flushBatchedUpdates();
} else {
dirtyComponents.length = 0;
}
}
};
CallbackQueue
方法执行队列
this.reactMountReady
asapCallbackQueue
ReactUpdatesFlushTransaction.callbackQueue
pooledClass
对象池,将对象存入减少初始耗能
PooledClass.addPoolingTo(ReactUpdatesFlushTransaction);
路由准备
react router 判断 hash 或者 history 或者 memory
react-router-dom的BrowserRouter包
BrowserRouter.prototype.render = function render() {
return _react2.default.createElement(_Router2.default, {
history: this.history, children: this.props.children });
};
React-Rotuer包
Router.js
Router.prototype.render = function render() <