Move __owner__ off of props
Ben Alpert committed
Nov 20, 2013 at 00:30 UTC
61abc645e50314187850d4e04ed6d257652f1a59
6 files changed
+58
-22
src/core/ReactComponent.js
+22
-14
@@ -81,8 +81,8 @@ function validateExplicitKey(component) {
81
if (!component.isOwnedBy(ReactCurrentOwner.current)) {
82
// Name of the component that originally created this child.
83
var childOwnerName =
84
- component.props.__owner__ &&
85
- component.props.__owner__.constructor.displayName;
84
+ component._owner &&
85
+ component._owner.constructor.displayName;
86
87
// Usually the current owner is the offender, but if it accepts
88
// children as a property, it may be the creator of the child that's
@@ -260,7 +260,7 @@ var ReactComponent = {
260
*/
261
replaceProps: function(props, callback) {
262
invariant(
263
- !this.props.__owner__,
263
+ !this._owner,
264
'replaceProps(...): You called `setProps` or `replaceProps` on a ' +
265
'component with an owner. This is an anti-pattern since props will ' +
266
'get reactively updated when rendered. Instead, change the owner\'s ' +
@@ -288,13 +288,19 @@ var ReactComponent = {
288
construct: function(initialProps, children) {
289
this.props = initialProps || {};
290
// Record the component responsible for creating this component.
291
- this.props.__owner__ = ReactCurrentOwner.current;
291
+ this._owner = ReactCurrentOwner.current;
292
// All components start unmounted.
293
this._lifeCycleState = ComponentLifeCycle.UNMOUNTED;
294
295
this._pendingProps = null;
296
this._pendingCallbacks = null;
297
298
+ // Unlike _pendingProps and _pendingCallbacks, we won't use null to
299
+ // indicate that nothing is pending because it's possible for a component
300
+ // to have a null owner. Instead, an owner change is pending when
301
+ // this._owner !== this._pendingOwner.
302
+ this._pendingOwner = this._owner;
303
+
304
// Children can be more than one argument
305
var childrenLength = arguments.length - 1;
306
if (childrenLength === 1) {
@@ -336,7 +342,7 @@ var ReactComponent = {
342
);
343
var props = this.props;
344
if (props.ref != null) {
339
- ReactOwner.addComponentAsRefTo(this, props.ref, props.__owner__);
345
+ ReactOwner.addComponentAsRefTo(this, props.ref, this._owner);
346
}
347
this._rootNodeID = rootID;
348
this._lifeCycleState = ComponentLifeCycle.MOUNTED;
@@ -361,7 +367,7 @@ var ReactComponent = {
367
);
368
var props = this.props;
369
if (props.ref != null) {
364
- ReactOwner.removeComponentAsRefFrom(this, props.ref, props.__owner__);
370
+ ReactOwner.removeComponentAsRefFrom(this, props.ref, this._owner);
371
}
372
ReactComponent.unmountIDFromEnvironment(this._rootNodeID);
373
this._rootNodeID = null;
@@ -384,6 +390,7 @@ var ReactComponent = {
390
this.isMounted(),
391
'receiveComponent(...): Can only update a mounted component.'
392
);
393
+ this._pendingOwner = nextComponent._owner;
394
this._pendingProps = nextComponent.props;
395
this._performUpdateIfNecessary(transaction);
396
},
@@ -411,9 +418,11 @@ var ReactComponent = {
418
return;
419
}
420
var prevProps = this.props;
421
+ var prevOwner = this._owner;
422
this.props = this._pendingProps;
423
+ this._owner = this._pendingOwner;
424
this._pendingProps = null;
416
- this.updateComponent(transaction, prevProps);
425
+ this.updateComponent(transaction, prevProps, prevOwner);
426
},
427
428
/**
@@ -423,21 +432,20 @@ var ReactComponent = {
432
* @param {object} prevProps
433
* @internal
434
*/
426
- updateComponent: function(transaction, prevProps) {
435
+ updateComponent: function(transaction, prevProps, prevOwner) {
436
var props = this.props;
437
// If either the owner or a `ref` has changed, make sure the newest owner
438
// has stored a reference to `this`, and the previous owner (if different)
439
// has forgotten the reference to `this`.
431
- if (props.__owner__ !== prevProps.__owner__ ||
432
- props.ref !== prevProps.ref) {
440
+ if (this._owner !== prevOwner || props.ref !== prevProps.ref) {
441
if (prevProps.ref != null) {
442
ReactOwner.removeComponentAsRefFrom(
435
- this, prevProps.ref, prevProps.__owner__
443
+ this, prevProps.ref, prevOwner
444
);
445
}
446
// Correct, even if the owner is the same, and only the ref has changed.
447
if (props.ref != null) {
440
- ReactOwner.addComponentAsRefTo(this, props.ref, props.__owner__);
448
+ ReactOwner.addComponentAsRefTo(this, props.ref, this._owner);
449
}
450
}
451
},
@@ -491,7 +499,7 @@ var ReactComponent = {
499
* @internal
500
*/
501
isOwnedBy: function(owner) {
494
- return this.props.__owner__ === owner;
502
+ return this._owner === owner;
503
},
504
505
/**
@@ -503,7 +511,7 @@ var ReactComponent = {
511
* @internal
512
*/
513
getSiblingByRef: function(ref) {
506
- var owner = this.props.__owner__;
514
+ var owner = this._owner;
515
if (!owner || !owner.refs) {
516
return null;
517
}
src/core/ReactCompositeComponent.js
+27
-3
@@ -833,6 +833,12 @@ var ReactCompositeComponentMixin = {
833
834
this._compositeLifeCycleState = CompositeLifeCycle.RECEIVING_STATE;
835
836
+ // Unlike props, state, and context, we specifically don't want to set
837
+ // _pendingOwner to null here because it's possible for a component to have
838
+ // a null owner, so we instead make `this._owner === this._pendingOwner`
839
+ // mean that there's no owner change pending.
840
+ var nextOwner = this._pendingOwner;
841
+
842
var nextState = this._pendingState || this.state;
843
this._pendingState = null;
844
@@ -846,6 +852,7 @@ var ReactCompositeComponentMixin = {
852
// Will set `this.props`, `this.state` and `this.context`.
853
this._performComponentUpdate(
854
nextProps,
855
+ nextOwner,
856
nextState,
857
nextContext,
858
transaction
@@ -854,6 +861,7 @@ var ReactCompositeComponentMixin = {
861
// If it's determined that a component should not update, we still want
862
// to set props and state.
863
this.props = nextProps;
864
+ this._owner = nextOwner;
865
this.state = nextState;
866
this.context = nextContext;
867
}
@@ -866,6 +874,7 @@ var ReactCompositeComponentMixin = {
874
* performs update.
875
*
876
* @param {object} nextProps Next object to set as properties.
877
+ * @param {?ReactComponent} nextOwner Next component to set as owner
878
* @param {?object} nextState Next object to set as state.
879
* @param {?object} nextContext Next object to set as context.
880
* @param {ReactReconcileTransaction} transaction
@@ -873,11 +882,13 @@ var ReactCompositeComponentMixin = {
882
*/
883
_performComponentUpdate: function(
884
nextProps,
885
+ nextOwner,
886
nextState,
887
nextContext,
888
transaction
889
) {
890
var prevProps = this.props;
891
+ var prevOwner = this._owner;
892
var prevState = this.state;
893
var prevContext = this.context;
894
@@ -886,12 +897,19 @@ var ReactCompositeComponentMixin = {
897
}
898
899
this.props = nextProps;
900
+ this._owner = nextOwner;
901
this.state = nextState;
902
903
this._currentContext = nextContext;
904
this.context = this._processContext(nextContext);
905
894
- this.updateComponent(transaction, prevProps, prevState, prevContext);
906
+ this.updateComponent(
907
+ transaction,
908
+ prevProps,
909
+ prevOwner,
910
+ prevState,
911
+ prevContext
912
+ );
913
914
if (this.componentDidUpdate) {
915
transaction.getReactMountReady().enqueue(
@@ -918,6 +936,7 @@ var ReactCompositeComponentMixin = {
936
*
937
* @param {ReactReconcileTransaction} transaction
938
* @param {object} prevProps
939
+ * @param {?ReactComponent} prevOwner
940
* @param {?object} prevState
941
* @param {?object} prevContext
942
* @internal
@@ -926,8 +945,13 @@ var ReactCompositeComponentMixin = {
945
updateComponent: ReactPerf.measure(
946
'ReactCompositeComponent',
947
'updateComponent',
929
- function(transaction, prevProps, prevState, prevContext) {
930
- ReactComponent.Mixin.updateComponent.call(this, transaction, prevProps);
948
+ function(transaction, prevProps, prevOwner, prevState, prevContext) {
949
+ ReactComponent.Mixin.updateComponent.call(
950
+ this,
951
+ transaction,
952
+ prevProps,
953
+ prevOwner
954
+ );
955
var prevComponent = this._renderedComponent;
956
var nextComponent = this._renderValidatedComponent();
957
if (shouldUpdateReactComponent(prevComponent, nextComponent)) {
src/core/ReactDOMComponent.js
+7
-2
@@ -200,8 +200,13 @@ ReactDOMComponent.Mixin = {
200
updateComponent: ReactPerf.measure(
201
'ReactDOMComponent',
202
'updateComponent',
203
- function(transaction, prevProps) {
204
- ReactComponent.Mixin.updateComponent.call(this, transaction, prevProps);
203
+ function(transaction, prevProps, prevOwner) {
204
+ ReactComponent.Mixin.updateComponent.call(
205
+ this,
206
+ transaction,
207
+ prevProps,
208
+ prevOwner
209
+ );
210
this._updateDOMProperties(prevProps);
211
this._updateDOMChildren(prevProps, transaction);
212
}
src/core/ReactPropTransferer.js
+1
-1
@@ -92,7 +92,7 @@ var ReactPropTransferer = {
92
*/
93
transferPropsTo: function(component) {
94
invariant(
95
- component.props.__owner__ === this,
95
+ component._owner === this,
96
'%s: You can\'t call transferPropsTo() on a component that you ' +
97
'don\'t own, %s. This usually means you are calling ' +
98
'transferPropsTo() on a component passed in as props or children.',
src/core/shouldUpdateReactComponent.js
+1
-1
@@ -32,7 +32,7 @@ function shouldUpdateReactComponent(prevComponent, nextComponent) {
32
// TODO: Remove warning after a release.
33
if (prevComponent && nextComponent &&
34
prevComponent.constructor === nextComponent.constructor) {
35
- if (prevComponent.props.__owner__ === nextComponent.props.__owner__) {
35
+ if (prevComponent._owner === nextComponent._owner) {
36
return true;
37
} else {
38
if (__DEV__) {
src/dom/DOMPropertyOperations.js
-1
@@ -30,7 +30,6 @@ var processAttributeNameAndPrefix = memoizeStringOnly(function(name) {
30
31
if (__DEV__) {
32
var reactProps = {
33
- __owner__: true,
33
children: true,
34
dangerouslySetInnerHTML: true,
35
key: true,