Make MountReady more reusable, reduce allocations
Test Plan: grunt test
Ben Alpert committed
Apr 6, 2014 at 17:06 UTC
ec6da04f6a9293ef48cb44c2d3b23dccfd9f271a
4 files changed
+44
-38
src/browser/ReactReconcileTransaction.js
+5
-6
@@ -19,10 +19,10 @@
19
20
"use strict";
21
22
+var CallbackQueue = require('CallbackQueue');
23
var PooledClass = require('PooledClass');
24
var ReactEventEmitter = require('ReactEventEmitter');
25
var ReactInputSelection = require('ReactInputSelection');
25
-var ReactMountReady = require('ReactMountReady');
26
var ReactPutListenerQueue = require('ReactPutListenerQueue');
27
var Transaction = require('Transaction');
28
@@ -69,8 +69,8 @@ var EVENT_SUPPRESSION = {
69
};
70
71
/**
72
- * Provides a `ReactMountReady` queue for collecting `onDOMReady` callbacks
73
- * during the performing of the transaction.
72
+ * Provides a queue for collecting `componentDidMount` and
73
+ * `componentDidUpdate` callbacks during the the transaction.
74
*/
75
var ON_DOM_READY_QUEUEING = {
76
/**
@@ -132,7 +132,7 @@ function ReactReconcileTransaction() {
132
// accessible and defaults to false when `ReactDOMComponent` and
133
// `ReactTextComponent` checks it in `mountComponent`.`
134
this.renderToStaticMarkup = false;
135
- this.reactMountReady = ReactMountReady.getPooled(null);
135
+ this.reactMountReady = CallbackQueue.getPooled(null);
136
this.putListenerQueue = ReactPutListenerQueue.getPooled();
137
}
138
@@ -150,7 +150,6 @@ var Mixin = {
150
151
/**
152
* @return {object} The queue to collect `onDOMReady` callbacks with.
153
- * TODO: convert to ReactMountReady
153
*/
154
getReactMountReady: function() {
155
return this.reactMountReady;
@@ -165,7 +164,7 @@ var Mixin = {
164
* instance to be resused.
165
*/
166
destructor: function() {
168
- ReactMountReady.release(this.reactMountReady);
167
+ CallbackQueue.release(this.reactMountReady);
168
this.reactMountReady = null;
169
170
ReactPutListenerQueue.release(this.putListenerQueue);
src/browser/server/ReactServerRenderingTransaction.js
+4
-5
@@ -20,7 +20,7 @@
20
"use strict";
21
22
var PooledClass = require('PooledClass');
23
-var ReactMountReady = require('ReactMountReady');
23
+var CallbackQueue = require('CallbackQueue');
24
var ReactPutListenerQueue = require('ReactPutListenerQueue');
25
var Transaction = require('Transaction');
26
@@ -28,7 +28,7 @@ var emptyFunction = require('emptyFunction');
28
var mixInto = require('mixInto');
29
30
/**
31
- * Provides a `ReactMountReady` queue for collecting `onDOMReady` callbacks
31
+ * Provides a `CallbackQueue` queue for collecting `onDOMReady` callbacks
32
* during the performing of the transaction.
33
*/
34
var ON_DOM_READY_QUEUEING = {
@@ -67,7 +67,7 @@ var TRANSACTION_WRAPPERS = [
67
function ReactServerRenderingTransaction(renderToStaticMarkup) {
68
this.reinitializeTransaction();
69
this.renderToStaticMarkup = renderToStaticMarkup;
70
- this.reactMountReady = ReactMountReady.getPooled(null);
70
+ this.reactMountReady = CallbackQueue.getPooled(null);
71
this.putListenerQueue = ReactPutListenerQueue.getPooled();
72
}
73
@@ -84,7 +84,6 @@ var Mixin = {
84
85
/**
86
* @return {object} The queue to collect `onDOMReady` callbacks with.
87
- * TODO: convert to ReactMountReady
87
*/
88
getReactMountReady: function() {
89
return this.reactMountReady;
@@ -99,7 +98,7 @@ var Mixin = {
98
* instance to be resused.
99
*/
100
destructor: function() {
102
- ReactMountReady.release(this.reactMountReady);
101
+ CallbackQueue.release(this.reactMountReady);
102
this.reactMountReady = null;
103
104
ReactPutListenerQueue.release(this.putListenerQueue);
src/core/ReactCompositeComponent.js
+3
-3
@@ -740,7 +740,7 @@ var ReactCompositeComponentMixin = {
740
mountDepth + 1
741
);
742
if (this.componentDidMount) {
743
- transaction.getReactMountReady().enqueue(this, this.componentDidMount);
743
+ transaction.getReactMountReady().enqueue(this.componentDidMount, this);
744
}
745
return markup;
746
}
@@ -1049,8 +1049,8 @@ var ReactCompositeComponentMixin = {
1049
1050
if (this.componentDidUpdate) {
1051
transaction.getReactMountReady().enqueue(
1052
- this,
1053
- this.componentDidUpdate.bind(this, prevProps, prevState, prevContext)
1052
+ this.componentDidUpdate.bind(this, prevProps, prevState, prevContext),
1053
+ this
1054
);
1055
}
1056
},
src/utils/CallbackQueue.js
renamed
+32
-24
@@ -13,13 +13,14 @@
13
* See the License for the specific language governing permissions and
14
* limitations under the License.
15
*
16
- * @providesModule ReactMountReady
16
+ * @providesModule CallbackQueue
17
*/
18
19
"use strict";
20
21
var PooledClass = require('PooledClass');
22
23
+var invariant = require('invariant');
24
var mixInto = require('mixInto');
25
26
/**
@@ -27,30 +28,31 @@ var mixInto = require('mixInto');
28
* be notified when their DOM representations are available for use.
29
*
30
* This implements `PooledClass`, so you should never need to instantiate this.
30
- * Instead, use `ReactMountReady.getPooled()`.
31
+ * Instead, use `CallbackQueue.getPooled()`.
32
*
32
- * @param {?array<function>} initialCollection
33
* @class ReactMountReady
34
* @implements PooledClass
35
* @internal
36
*/
37
-function ReactMountReady(initialCollection) {
38
- this._queue = initialCollection || null;
37
+function CallbackQueue() {
38
+ this._callbacks = null;
39
+ this._contexts = null;
40
}
41
41
-mixInto(ReactMountReady, {
42
+mixInto(CallbackQueue, {
43
44
/**
44
- * Enqueues a callback to be invoked when `notifyAll` is invoked. This is used
45
- * to enqueue calls to `componentDidMount` and `componentDidUpdate`.
45
+ * Enqueues a callback to be invoked when `notifyAll` is invoked.
46
*
47
- * @param {ReactComponent} component Component being rendered.
48
- * @param {function(DOMElement)} callback Invoked when `notifyAll` is invoked.
47
+ * @param {function} callback Invoked when `notifyAll` is invoked.
48
+ * @param {?object} context Context to call `callback` with.
49
* @internal
50
*/
51
- enqueue: function(component, callback) {
52
- this._queue = this._queue || [];
53
- this._queue.push({component: component, callback: callback});
51
+ enqueue: function(callback, context) {
52
+ this._callbacks = this._callbacks || [];
53
+ this._contexts = this._contexts || [];
54
+ this._callbacks.push(callback);
55
+ this._contexts.push(context);
56
},
57
58
/**
@@ -60,15 +62,20 @@ mixInto(ReactMountReady, {
62
* @internal
63
*/
64
notifyAll: function() {
63
- var queue = this._queue;
64
- if (queue) {
65
- this._queue = null;
66
- for (var i = 0, l = queue.length; i < l; i++) {
67
- var component = queue[i].component;
68
- var callback = queue[i].callback;
69
- callback.call(component);
65
+ var callbacks = this._callbacks;
66
+ var contexts = this._contexts;
67
+ if (callbacks) {
68
+ invariant(
69
+ callbacks.length === contexts.length,
70
+ "Mismatched list of contexts in callback queue"
71
+ );
72
+ this._callbacks = null;
73
+ this._contexts = null;
74
+ for (var i = 0, l = callbacks.length; i < l; i++) {
75
+ callbacks[i].call(contexts[i]);
76
}
71
- queue.length = 0;
77
+ callbacks.length = 0;
78
+ contexts.length = 0;
79
}
80
},
81
@@ -78,7 +85,8 @@ mixInto(ReactMountReady, {
85
* @internal
86
*/
87
reset: function() {
81
- this._queue = null;
88
+ this._callbacks = null;
89
+ this._contexts = null;
90
},
91
92
/**
@@ -90,6 +98,6 @@ mixInto(ReactMountReady, {
98
99
});
100
93
-PooledClass.addPoolingTo(ReactMountReady);
101
+PooledClass.addPoolingTo(CallbackQueue);
102
95
-module.exports = ReactMountReady;
103
+module.exports = CallbackQueue;