Make MountReady more reusable, reduce allocations

Test Plan:
grunt test
This commit is contained in:
Ben Alpert
2014-04-06 17:06:12 -07:00
parent 21de5c816f
commit ec6da04f6a
4 changed files with 44 additions and 38 deletions
+5 -6
View File
@@ -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);
@@ -20,7 +20,7 @@
"use strict";
var PooledClass = require('PooledClass');
var ReactMountReady = require('ReactMountReady');
var CallbackQueue = require('CallbackQueue');
var ReactPutListenerQueue = require('ReactPutListenerQueue');
var Transaction = require('Transaction');
@@ -28,7 +28,7 @@ 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);
+3 -3
View File
@@ -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
);
}
},
@@ -13,13 +13,14 @@
* 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');
/**
@@ -27,30 +28,31 @@ var mixInto = require('mixInto');
* 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;