mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Make MountReady more reusable, reduce allocations
Test Plan: grunt test
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user