React15.6源码分析

重要概念:

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() <