Make MountReady more reusable, reduce allocations

src/browser/ReactReconcileTransaction.js

@@ -19,10 +19,10 @@
 
 "use strict";
 
+var CallbackQueue = require('CallbackQueue');
 var PooledClass = require('PooledClass');
 var ReactEventEmitter = require('ReactEventEmitter');
 var ReactInputSelection = require('ReactInputSelection');
-var ReactMountReady = require('ReactMountReady');
 var ReactPutListenerQueue = require('ReactPutListenerQueue');
 var Transaction = require('Transaction');
 
@@ -69,8 +69,8 @@ var EVENT_SUPPRESSION = {
 };
 
 /**
- * Provides a `ReactMountReady` queue for collecting `onDOMReady` callbacks
- * during the performing of the transaction.
+ * Provides a queue for collecting `componentDidMount` and
+ * `componentDidUpdate` callbacks during the the transaction.
  */
 var ON_DOM_READY_QUEUEING = {
   /**
@@ -132,7 +132,7 @@ function ReactReconcileTransaction() {
   // accessible and defaults to false when `ReactDOMComponent` and
   // `ReactTextComponent` checks it in `mountComponent`.`
   this.renderToStaticMarkup = false;
-  this.reactMountReady = ReactMountReady.getPooled(null);
+  this.reactMountReady = CallbackQueue.getPooled(null);
   this.putListenerQueue = ReactPutListenerQueue.getPooled();
 }
 
@@ -150,7 +150,6 @@ var Mixin = {
 
   /**
    * @return {object} The queue to collect `onDOMReady` callbacks with.
-   *   TODO: convert to ReactMountReady
    */
   getReactMountReady: function() {
     return this.reactMountReady;
@@ -165,7 +164,7 @@ var Mixin = {
    * instance to be resused.
    */
   destructor: function() {
-    ReactMountReady.release(this.reactMountReady);
+    CallbackQueue.release(this.reactMountReady);
     this.reactMountReady = null;
 
     ReactPutListenerQueue.release(this.putListenerQueue);

src/browser/server/ReactServerRenderingTransaction.js

@@ -20,15 +20,15 @@
 "use strict";
 
 var PooledClass = require('PooledClass');
-var ReactMountReady = require('ReactMountReady');
+var CallbackQueue = require('CallbackQueue');
 var ReactPutListenerQueue = require('ReactPutListenerQueue');
 var Transaction = require('Transaction');
 
 var emptyFunction = require('emptyFunction');
 var mixInto = require('mixInto');
 
 /**
- * Provides a `ReactMountReady` queue for collecting `onDOMReady` callbacks
+ * Provides a `CallbackQueue` queue for collecting `onDOMReady` callbacks
  * during the performing of the transaction.
  */
 var ON_DOM_READY_QUEUEING = {
@@ -67,7 +67,7 @@ var TRANSACTION_WRAPPERS = [
 function ReactServerRenderingTransaction(renderToStaticMarkup) {
   this.reinitializeTransaction();
   this.renderToStaticMarkup = renderToStaticMarkup;
-  this.reactMountReady = ReactMountReady.getPooled(null);
+  this.reactMountReady = CallbackQueue.getPooled(null);
   this.putListenerQueue = ReactPutListenerQueue.getPooled();
 }
 
@@ -84,7 +84,6 @@ var Mixin = {
 
   /**
    * @return {object} The queue to collect `onDOMReady` callbacks with.
-   *   TODO: convert to ReactMountReady
    */
   getReactMountReady: function() {
     return this.reactMountReady;
@@ -99,7 +98,7 @@ var Mixin = {
    * instance to be resused.
    */
   destructor: function() {
-    ReactMountReady.release(this.reactMountReady);
+    CallbackQueue.release(this.reactMountReady);
     this.reactMountReady = null;
 
     ReactPutListenerQueue.release(this.putListenerQueue);

src/core/ReactCompositeComponent.js

@@ -740,7 +740,7 @@ var ReactCompositeComponentMixin = {
         mountDepth + 1
       );
       if (this.componentDidMount) {
-        transaction.getReactMountReady().enqueue(this, this.componentDidMount);
+        transaction.getReactMountReady().enqueue(this.componentDidMount, this);
       }
       return markup;
     }
@@ -1049,8 +1049,8 @@ var ReactCompositeComponentMixin = {
 
     if (this.componentDidUpdate) {
       transaction.getReactMountReady().enqueue(
-        this,
-        this.componentDidUpdate.bind(this, prevProps, prevState, prevContext)
+        this.componentDidUpdate.bind(this, prevProps, prevState, prevContext),
+        this
       );
     }
   },

src/core/ReactMountReady.js → src/utils/CallbackQueue.js

@@ -13,44 +13,46 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * @providesModule ReactMountReady
+ * @providesModule CallbackQueue
  */
 
 "use strict";
 
 var PooledClass = require('PooledClass');
 
+var invariant = require('invariant');
 var mixInto = require('mixInto');
 
 /**
  * A specialized pseudo-event module to help keep track of components waiting to
  * be notified when their DOM representations are available for use.
  *
  * This implements `PooledClass`, so you should never need to instantiate this.
- * Instead, use `ReactMountReady.getPooled()`.
+ * Instead, use `CallbackQueue.getPooled()`.
  *
- * @param {?array<function>} initialCollection
  * @class ReactMountReady
  * @implements PooledClass
  * @internal
  */
-function ReactMountReady(initialCollection) {
-  this._queue = initialCollection || null;
+function CallbackQueue() {
+  this._callbacks = null;
+  this._contexts = null;
 }
 
-mixInto(ReactMountReady, {
+mixInto(CallbackQueue, {
 
   /**
-   * Enqueues a callback to be invoked when `notifyAll` is invoked. This is used
-   * to enqueue calls to `componentDidMount` and `componentDidUpdate`.
+   * Enqueues a callback to be invoked when `notifyAll` is invoked.
    *
-   * @param {ReactComponent} component Component being rendered.
-   * @param {function(DOMElement)} callback Invoked when `notifyAll` is invoked.
+   * @param {function} callback Invoked when `notifyAll` is invoked.
+   * @param {?object} context Context to call `callback` with.
    * @internal
    */
-  enqueue: function(component, callback) {
-    this._queue = this._queue || [];
-    this._queue.push({component: component, callback: callback});
+  enqueue: function(callback, context) {
+    this._callbacks = this._callbacks || [];
+    this._contexts = this._contexts || [];
+    this._callbacks.push(callback);
+    this._contexts.push(context);
   },
 
   /**
@@ -60,15 +62,20 @@ mixInto(ReactMountReady, {
    * @internal
    */
   notifyAll: function() {
-    var queue = this._queue;
-    if (queue) {
-      this._queue = null;
-      for (var i = 0, l = queue.length; i < l; i++) {
-        var component = queue[i].component;
-        var callback = queue[i].callback;
-        callback.call(component);
+    var callbacks = this._callbacks;
+    var contexts = this._contexts;
+    if (callbacks) {
+      invariant(
+        callbacks.length === contexts.length,
+        "Mismatched list of contexts in callback queue"
+      );
+      this._callbacks = null;
+      this._contexts = null;
+      for (var i = 0, l = callbacks.length; i < l; i++) {
+        callbacks[i].call(contexts[i]);
       }
-      queue.length = 0;
+      callbacks.length = 0;
+      contexts.length = 0;
     }
   },
 
@@ -78,7 +85,8 @@ mixInto(ReactMountReady, {
    * @internal
    */
   reset: function() {
-    this._queue = null;
+    this._callbacks = null;
+    this._contexts = null;
   },
 
   /**
@@ -90,6 +98,6 @@ mixInto(ReactMountReady, {
 
 });
 
-PooledClass.addPoolingTo(ReactMountReady);
+PooledClass.addPoolingTo(CallbackQueue);
 
-module.exports = ReactMountReady;
+module.exports = CallbackQueue;