Pass props explicitly instead of getting them off currentElement
We don't store currentElement and I'm trying to get rid of accessing the Fiber directly inside the host config.
Sebastian Markbage committed
Nov 17, 2016 at 15:02 UTC
2ef2a8e6f549d77bcf43e2dbfc184bd911d96a6b
5 files changed
+25
-36
src/renderers/dom/fiber/ReactDOMFiberComponent.js
+11
-12
@@ -453,6 +453,7 @@ var ReactDOMFiberComponent = {
453
454
mountComponent: function(
455
workInProgress : Fiber,
456
+ props : Object,
457
hostParent : Fiber,
458
hostContainerInfo : Object,
459
context : Object
@@ -463,8 +464,6 @@ var ReactDOMFiberComponent = {
464
workInProgress._hostParent = hostParent;
465
workInProgress._hostContainerInfo = hostContainerInfo;
466
466
- var props = workInProgress._currentElement.props;
467
-
467
switch (workInProgress._tag) {
468
case 'audio':
469
case 'form':
@@ -577,13 +576,13 @@ var ReactDOMFiberComponent = {
576
577
switch (workInProgress._tag) {
578
case 'input':
580
- ReactDOMFiberInput.postMountWrapper(workInProgress);
579
+ ReactDOMFiberInput.postMountWrapper(workInProgress, props);
580
if (props.autoFocus) {
581
focusNode(getNode(workInProgress));
582
}
583
break;
584
case 'textarea':
586
- ReactDOMFiberTextarea.postMountWrapper(workInProgress);
585
+ ReactDOMFiberTextarea.postMountWrapper(workInProgress, props);
586
if (props.autoFocus) {
587
focusNode(getNode(workInProgress));
588
}
@@ -599,7 +598,7 @@ var ReactDOMFiberComponent = {
598
}
599
break;
600
case 'option':
602
- ReactDOMFiberOption.postMountWrapper(workInProgress);
601
+ ReactDOMFiberOption.postMountWrapper(workInProgress, props);
602
break;
603
default:
604
if (typeof props.onClick === 'function') {
@@ -652,29 +651,29 @@ var ReactDOMFiberComponent = {
651
// Update the wrapper around inputs *after* updating props. This has to
652
// happen after `updateDOMProperties`. Otherwise HTML5 input validations
653
// raise warnings and prevent the new value from being assigned.
655
- ReactDOMFiberInput.updateWrapper(workInProgress);
654
+ ReactDOMFiberInput.updateWrapper(workInProgress, nextProps);
655
break;
656
case 'textarea':
658
- ReactDOMFiberTextarea.updateWrapper(workInProgress);
657
+ ReactDOMFiberTextarea.updateWrapper(workInProgress, nextProps);
658
break;
659
case 'select':
660
// <select> value update needs to occur after <option> children
661
// reconciliation
663
- ReactDOMFiberSelect.postUpdateWrapper(workInProgress);
662
+ ReactDOMFiberSelect.postUpdateWrapper(workInProgress, nextProps);
663
break;
664
}
665
},
666
668
- restoreControlledState: function(finishedWork : Fiber) {
667
+ restoreControlledState: function(finishedWork : Fiber, props : Object) {
668
switch (finishedWork.type) {
669
case 'input':
671
- ReactDOMFiberInput.restoreControlledState(finishedWork);
670
+ ReactDOMFiberInput.restoreControlledState(finishedWork, props);
671
return;
672
case 'textarea':
674
- ReactDOMFiberTextarea.restoreControlledState(finishedWork);
673
+ ReactDOMFiberTextarea.restoreControlledState(finishedWork, props);
674
return;
675
case 'select':
677
- ReactDOMFiberSelect.restoreControlledState(finishedWork);
676
+ ReactDOMFiberSelect.restoreControlledState(finishedWork, props);
677
return;
678
}
679
},
src/renderers/dom/fiber/wrappers/ReactDOMFiberInput.js
+7
-11
@@ -113,7 +113,7 @@ var ReactDOMInput = {
113
'both). Decide between using a controlled or uncontrolled input ' +
114
'element and remove one of these props. More info: ' +
115
'https://fb.me/react-controlled-components',
116
- owner && owner.getName() || 'A component',
116
+ getCurrentOwnerName() || 'A component',
117
props.type
118
);
119
didWarnValueDefaultValue = true;
@@ -131,9 +131,7 @@ var ReactDOMInput = {
131
}
132
},
133
134
- updateWrapper: function(inst : Fiber) {
135
- var props = inst._currentElement.props;
136
-
134
+ updateWrapper: function(inst : Fiber, props : Object) {
135
if (__DEV__) {
136
var controlled = isControlled(props);
137
@@ -204,9 +202,7 @@ var ReactDOMInput = {
202
}
203
},
204
207
- postMountWrapper: function(inst : Fiber) {
208
- var props = inst._currentElement.props;
209
-
205
+ postMountWrapper: function(inst : Fiber, props : Object) {
206
// This is in postMount because we need access to the DOM node, which is not
207
// available until after the component has mounted.
208
var node = ReactDOMComponentTree.getNodeFromInstance(inst);
@@ -254,9 +250,8 @@ var ReactDOMInput = {
250
}
251
},
252
257
- restoreControlledState: function(inst : Fiber) {
258
- ReactDOMInput.updateWrapper(inst);
259
- var props = inst._currentElement.props;
253
+ restoreControlledState: function(inst : Fiber, props : Object) {
254
+ ReactDOMInput.updateWrapper(inst, props);
255
updateNamedCousins(inst, props);
256
},
257
};
@@ -292,6 +287,7 @@ function updateNamedCousins(thisInstance, props) {
287
// That's probably okay; we don't support it just as we don't support
288
// mixing React radio buttons with non-React ones.
289
var otherInstance = ReactDOMComponentTree.getInstanceFromNode(otherNode);
290
+ // TODO: Ensure that otherInstance is the current Fiber instead of wip.
291
invariant(
292
otherInstance,
293
'ReactDOMInput: Mixing React and non-React radio inputs with the ' +
@@ -300,7 +296,7 @@ function updateNamedCousins(thisInstance, props) {
296
// If this is a controlled radio button group, forcing the input that
297
// was previously checked to update will cause it to be come re-checked
298
// as appropriate.
303
- ReactDOMInput.updateWrapper(otherInstance);
299
+ ReactDOMInput.updateWrapper(otherInstance, otherInstance.memoizedProps);
300
}
301
}
302
}
src/renderers/dom/fiber/wrappers/ReactDOMFiberOption.js
+1
-2
@@ -99,9 +99,8 @@ var ReactDOMOption = {
99
inst._wrapperState = {selected: selected};
100
},
101
102
- postMountWrapper: function(inst : Fiber) {
102
+ postMountWrapper: function(inst : Fiber, props : Object) {
103
// value="" should make a value attribute (#6219)
104
- var props = inst._currentElement.props;
104
if (props.value != null) {
105
var node = ReactDOMComponentTree.getNodeFromInstance(inst);
106
node.setAttribute('value', props.value);
src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js
+2
-5
@@ -154,9 +154,7 @@ var ReactDOMSelect = {
154
return inst._wrapperState.initialValue;
155
},
156
157
- postUpdateWrapper: function(inst : Fiber) {
158
- var props = inst._currentElement.props;
159
-
157
+ postUpdateWrapper: function(inst : Fiber, props : Object) {
158
// After the initial mount, we control selected-ness manually so don't pass
159
// this value down
160
inst._wrapperState.initialValue = undefined;
@@ -178,8 +176,7 @@ var ReactDOMSelect = {
176
}
177
},
178
181
- restoreControlledState: function(inst : Fiber) {
182
- var props = inst._currentElement.props;
179
+ restoreControlledState: function(inst : Fiber, props : Object) {
180
var value = props.value;
181
182
if (value != null) {
src/renderers/dom/fiber/wrappers/ReactDOMFiberTextarea.js
+4
-6
@@ -125,9 +125,7 @@ var ReactDOMTextarea = {
125
};
126
},
127
128
- updateWrapper: function(inst : Fiber) {
129
- var props = inst._currentElement.props;
130
-
128
+ updateWrapper: function(inst : Fiber, props : Object) {
129
var node = ReactDOMComponentTree.getNodeFromInstance(inst);
130
var value = props.value;
131
if (value != null) {
@@ -148,7 +146,7 @@ var ReactDOMTextarea = {
146
}
147
},
148
151
- postMountWrapper: function(inst : Fiber) {
149
+ postMountWrapper: function(inst : Fiber, props : Object) {
150
// This is in postMount because we need access to the DOM node, which is not
151
// available until after the component has mounted.
152
var node = ReactDOMComponentTree.getNodeFromInstance(inst);
@@ -163,9 +161,9 @@ var ReactDOMTextarea = {
161
}
162
},
163
166
- restoreControlledState: function(inst : Fiber) {
164
+ restoreControlledState: function(inst : Fiber, props : Object) {
165
// DOM component is still mounted; update
168
- ReactDOMTextarea.updateWrapper(inst);
166
+ ReactDOMTextarea.updateWrapper(inst, props);
167
},
168
169
};