Only set the owner during flattening
This used to do the update as well, which could have side-effects that rely on owner being null.
Sebastian Markbage committed
Aug 6, 2015 at 12:57 UTC
9fc2f8de26701506e3b8003e9edc8e0fd8858688
3 files changed
+45
-8
src/renderers/shared/reconciler/ReactChildReconciler.js
+2
-4
@@ -14,7 +14,6 @@
14
15
var ReactReconciler = require('ReactReconciler');
16
17
-var flattenChildren = require('flattenChildren');
17
var instantiateReactComponent = require('instantiateReactComponent');
18
var shouldUpdateReactComponent = require('shouldUpdateReactComponent');
19
var traverseAllChildren = require('traverseAllChildren');
@@ -64,7 +63,7 @@ var ReactChildReconciler = {
63
* Updates the rendered children and returns a new set of children.
64
*
65
* @param {?object} prevChildren Previously initialized set of children.
67
- * @param {?object} nextNestedChildrenElements Nested child element maps.
66
+ * @param {?object} nextChildren Flat child element maps.
67
* @param {ReactReconcileTransaction} transaction
68
* @param {object} context
69
* @return {?object} A new set of child instances.
@@ -72,7 +71,7 @@ var ReactChildReconciler = {
71
*/
72
updateChildren: function(
73
prevChildren,
75
- nextNestedChildrenElements,
74
+ nextChildren,
75
transaction,
76
context) {
77
// We currently don't have a way to track moves here but if we use iterators
@@ -80,7 +79,6 @@ var ReactChildReconciler = {
79
// moved.
80
// TODO: If nothing has changed, return the prevChildren object so that we
81
// can quickly bailout if nothing has changed.
83
- var nextChildren = flattenChildren(nextNestedChildrenElements);
82
if (!nextChildren && !prevChildren) {
83
return null;
84
}
src/renderers/shared/reconciler/ReactMultiChild.js
+9
-4
@@ -19,6 +19,8 @@ var ReactCurrentOwner = require('ReactCurrentOwner');
19
var ReactReconciler = require('ReactReconciler');
20
var ReactChildReconciler = require('ReactChildReconciler');
21
22
+var flattenChildren = require('flattenChildren');
23
+
24
/**
25
* Updating children of a component may trigger recursive updates. The depth is
26
* used to batch recursive updates to render markup more efficiently.
@@ -209,20 +211,23 @@ var ReactMultiChild = {
211
},
212
213
_reconcilerUpdateChildren: function(prevChildren, nextNestedChildrenElements, transaction, context) {
214
+ var nextChildren;
215
if (__DEV__) {
216
if (this._currentElement) {
217
try {
218
ReactCurrentOwner.current = this._currentElement._owner;
216
- return ReactChildReconciler.updateChildren(
217
- prevChildren, nextNestedChildrenElements, transaction, context
218
- );
219
+ nextChildren = flattenChildren(nextNestedChildrenElements);
220
} finally {
221
ReactCurrentOwner.current = null;
222
}
223
+ return ReactChildReconciler.updateChildren(
224
+ prevChildren, nextChildren, transaction, context
225
+ );
226
}
227
}
228
+ nextChildren = flattenChildren(nextNestedChildrenElements);
229
return ReactChildReconciler.updateChildren(
225
- prevChildren, nextNestedChildrenElements, transaction, context
230
+ prevChildren, nextChildren, transaction, context
231
);
232
},
233
src/renderers/shared/reconciler/__tests__/ReactCompositeComponent-test.js
+34
@@ -1092,4 +1092,38 @@ describe('ReactCompositeComponent', function() {
1092
expect(moo.state.amIImmutable).toBe(undefined);
1093
});
1094
1095
+ it('should not warn about unmounting during unmounting', function() {
1096
+ var container = document.createElement('div');
1097
+ var layer = document.createElement('div');
1098
+
1099
+ var Component = React.createClass({
1100
+ componentWillMount: function() {
1101
+ React.render(<div />, layer);
1102
+ },
1103
+
1104
+ componentWillUnmount: function() {
1105
+ React.unmountComponentAtNode(layer);
1106
+ },
1107
+
1108
+ render: function() {
1109
+ return <div />;
1110
+ },
1111
+ });
1112
+
1113
+ var Outer = React.createClass({
1114
+ render: function() {
1115
+ return <div>{this.props.children}</div>;
1116
+ },
1117
+ });
1118
+
1119
+ React.render(<Outer><Component /></Outer>, container);
1120
+
1121
+ expect(console.error.calls.length).toBe(0);
1122
+
1123
+ React.render(<Outer />, container);
1124
+
1125
+ expect(console.error.calls.length).toBe(0);
1126
+ });
1127
+
1128
+
1129
});