Revert ReactMultiChild to plain object (#7757)
Since ReactART and RN extend ReactMultiChild, changing it to a class is a breaking change. See https://github.com/facebook/react/pull/7736/files#r79073698
Brandon Dail committed
Sep 17, 2016 at 10:40 UTC
7dfa01f9fa3bd4205a3c0faa386319eee2493cea
5 files changed
+35
-32
src/renderers/art/ReactART.js
+1
-1
@@ -93,7 +93,7 @@ function injectAfter(parentNode, referenceNode, node) {
93
94
// ContainerMixin for components that can hold ART nodes
95
96
-const ContainerMixin = assign({}, ReactMultiChild.prototype, {
96
+const ContainerMixin = assign({}, ReactMultiChild, {
97
98
/**
99
* Moves a child component to the supplied index.
src/renderers/dom/shared/ReactDOMComponent.js
+1
-1
@@ -1200,7 +1200,7 @@ ReactDOMComponent.Mixin = {
1200
Object.assign(
1201
ReactDOMComponent.prototype,
1202
ReactDOMComponent.Mixin,
1203
- ReactMultiChild.prototype
1203
+ ReactMultiChild
1204
);
1205
1206
module.exports = ReactDOMComponent;
src/renderers/native/ReactNativeBaseComponent.js
+1
-1
@@ -224,7 +224,7 @@ ReactNativeBaseComponent.Mixin = {
224
*/
225
Object.assign(
226
ReactNativeBaseComponent.prototype,
227
- ReactMultiChild.prototype,
227
+ ReactMultiChild,
228
ReactNativeBaseComponent.Mixin,
229
NativeMethodsMixin
230
);
src/renderers/shared/stack/reconciler/ReactMultiChild.js
+27
-27
@@ -169,8 +169,8 @@ if (__DEV__) {
169
* children. This is used by `ReactDOMComponent` to mount, update, and
170
* unmount child components.
171
*/
172
-class ReactMultiChild {
173
- _reconcilerInstantiateChildren(nestedChildren, transaction, context) {
172
+var ReactMultiChild = {
173
+ _reconcilerInstantiateChildren: function(nestedChildren, transaction, context) {
174
if (__DEV__) {
175
var selfDebugID = getDebugID(this);
176
if (this._currentElement) {
@@ -187,9 +187,9 @@ class ReactMultiChild {
187
return ReactChildReconciler.instantiateChildren(
188
nestedChildren, transaction, context
189
);
190
- }
190
+ },
191
192
- _reconcilerUpdateChildren(
192
+ _reconcilerUpdateChildren: function(
193
prevChildren,
194
nextNestedChildrenElements,
195
mountImages,
@@ -235,7 +235,7 @@ class ReactMultiChild {
235
selfDebugID
236
);
237
return nextChildren;
238
- }
238
+ },
239
240
/**
241
* Generates a "mount image" for each of the supplied children. In the case
@@ -245,7 +245,7 @@ class ReactMultiChild {
245
* @return {array} An array of mounted representations.
246
* @internal
247
*/
248
- mountChildren(nestedChildren, transaction, context) {
248
+ mountChildren: function(nestedChildren, transaction, context) {
249
var children = this._reconcilerInstantiateChildren(
250
nestedChildren, transaction, context
251
);
@@ -278,7 +278,7 @@ class ReactMultiChild {
278
}
279
280
return mountImages;
281
- }
281
+ },
282
283
/**
284
* Replaces any rendered children with a text content string.
@@ -286,7 +286,7 @@ class ReactMultiChild {
286
* @param {string} nextContent String of content.
287
* @internal
288
*/
289
- updateTextContent(nextContent) {
289
+ updateTextContent: function(nextContent) {
290
var prevChildren = this._renderedChildren;
291
// Remove any rendered children.
292
ReactChildReconciler.unmountChildren(prevChildren, false);
@@ -298,7 +298,7 @@ class ReactMultiChild {
298
// Set new text content.
299
var updates = [makeTextContent(nextContent)];
300
processQueue(this, updates);
301
- }
301
+ },
302
303
/**
304
* Replaces any rendered children with a markup string.
@@ -306,7 +306,7 @@ class ReactMultiChild {
306
* @param {string} nextMarkup String of markup.
307
* @internal
308
*/
309
- updateMarkup(nextMarkup) {
309
+ updateMarkup: function(nextMarkup) {
310
var prevChildren = this._renderedChildren;
311
// Remove any rendered children.
312
ReactChildReconciler.unmountChildren(prevChildren, false);
@@ -317,7 +317,7 @@ class ReactMultiChild {
317
}
318
var updates = [makeSetMarkup(nextMarkup)];
319
processQueue(this, updates);
320
- }
320
+ },
321
322
/**
323
* Updates the rendered children with new children.
@@ -326,10 +326,10 @@ class ReactMultiChild {
326
* @param {ReactReconcileTransaction} transaction
327
* @internal
328
*/
329
- updateChildren(nextNestedChildrenElements, transaction, context) {
329
+ updateChildren: function(nextNestedChildrenElements, transaction, context) {
330
// Hook used by React ART
331
this._updateChildren(nextNestedChildrenElements, transaction, context);
332
- }
332
+ },
333
334
/**
335
* @param {?object} nextNestedChildrenElements Nested child element maps.
@@ -337,7 +337,7 @@ class ReactMultiChild {
337
* @final
338
* @protected
339
*/
340
- _updateChildren(nextNestedChildrenElements, transaction, context) {
340
+ _updateChildren: function(nextNestedChildrenElements, transaction, context) {
341
var prevChildren = this._renderedChildren;
342
var removedNodes = {};
343
var mountImages = [];
@@ -414,7 +414,7 @@ class ReactMultiChild {
414
if (__DEV__) {
415
setChildrenForInstrumentation.call(this, nextChildren);
416
}
417
- }
417
+ },
418
419
/**
420
* Unmounts all rendered children. This should be used to clean up children
@@ -423,11 +423,11 @@ class ReactMultiChild {
423
*
424
* @internal
425
*/
426
- unmountChildren(safely) {
426
+ unmountChildren: function(safely) {
427
var renderedChildren = this._renderedChildren;
428
ReactChildReconciler.unmountChildren(renderedChildren, safely);
429
this._renderedChildren = null;
430
- }
430
+ },
431
432
/**
433
* Moves a child component to the supplied index.
@@ -437,14 +437,14 @@ class ReactMultiChild {
437
* @param {number} lastIndex Last index visited of the siblings of `child`.
438
* @protected
439
*/
440
- moveChild(child, afterNode, toIndex, lastIndex) {
440
+ moveChild: function(child, afterNode, toIndex, lastIndex) {
441
// If the index of `child` is less than `lastIndex`, then it needs to
442
// be moved. Otherwise, we do not need to move it because a child will be
443
// inserted or moved before `child`.
444
if (child._mountIndex < lastIndex) {
445
return makeMove(child, afterNode, toIndex);
446
}
447
- }
447
+ },
448
449
/**
450
* Creates a child component.
@@ -453,9 +453,9 @@ class ReactMultiChild {
453
* @param {string} mountImage Markup to insert.
454
* @protected
455
*/
456
- createChild(child, afterNode, mountImage) {
456
+ createChild: function(child, afterNode, mountImage) {
457
return makeInsertMarkup(mountImage, afterNode, child._mountIndex);
458
- }
458
+ },
459
460
/**
461
* Removes a child component.
@@ -463,9 +463,9 @@ class ReactMultiChild {
463
* @param {ReactComponent} child Child to remove.
464
* @protected
465
*/
466
- removeChild(child, node) {
466
+ removeChild: function(child, node) {
467
return makeRemove(child, node);
468
- }
468
+ },
469
470
/**
471
* Mounts a child with the supplied name.
@@ -478,7 +478,7 @@ class ReactMultiChild {
478
* @param {ReactReconcileTransaction} transaction
479
* @private
480
*/
481
- _mountChildAtIndex(
481
+ _mountChildAtIndex: function(
482
child,
483
mountImage,
484
afterNode,
@@ -487,7 +487,7 @@ class ReactMultiChild {
487
context) {
488
child._mountIndex = index;
489
return this.createChild(child, afterNode, mountImage);
490
- }
490
+ },
491
492
/**
493
* Unmounts a rendered child.
@@ -497,11 +497,11 @@ class ReactMultiChild {
497
* @param {ReactComponent} child Component to unmount.
498
* @private
499
*/
500
- _unmountChild(child, node) {
500
+ _unmountChild: function(child, node) {
501
var update = this.removeChild(child, node);
502
child._mountIndex = null;
503
return update;
504
- }
504
+ },
505
};
506
507
module.exports = ReactMultiChild;
src/renderers/testing/ReactTestRenderer.js
+5
-2
@@ -48,13 +48,12 @@ function getRenderedHostOrTextFromComponent(component) {
48
return component;
49
}
50
51
-class ReactTestComponent extends ReactMultiChild {
51
+class ReactTestComponent {
52
_currentElement: ReactElement;
53
_renderedChildren: null | Object;
54
_topLevelWrapper: null | ReactInstance;
55
56
constructor(element: ReactElement) {
57
- super();
57
this._currentElement = element;
58
this._renderedChildren = null;
59
this._topLevelWrapper = null;
@@ -67,6 +66,7 @@ class ReactTestComponent extends ReactMultiChild {
66
context: Object,
67
) {
68
var element = this._currentElement;
69
+ // $FlowFixMe https://github.com/facebook/flow/issues/1805
70
this.mountChildren(element.props.children, transaction, context);
71
}
72
@@ -76,6 +76,7 @@ class ReactTestComponent extends ReactMultiChild {
76
context: Object,
77
) {
78
this._currentElement = nextElement;
79
+ // $FlowFixMe https://github.com/facebook/flow/issues/1805
80
this.updateChildren(nextElement.props.children, transaction, context);
81
}
82
@@ -111,6 +112,8 @@ class ReactTestComponent extends ReactMultiChild {
112
unmountComponent(): void {}
113
}
114
115
+Object.assign(ReactTestComponent.prototype, ReactMultiChild);
116
+
117
// =============================================================================
118
119
ReactUpdates.injection.injectReconcileTransaction(