Rename receiveProps to receiveComponent
This renames receiveProps and changes it to take the next component to copy props from instead of just the props. That is, component.receiveComponent(nextComponent, transaction) instead of component.receiveProps(nextComponent.props, transaction) This is a precursor to adding contexts, which will also need to get propagated just like props. This change allows ReactCompositeComponent to override `receiveProps` and do something like this._pendingContext = nextComponent.context;
Marshall Roch committed
Nov 13, 2013 at 09:39 UTC
381a3392c65b00d12ce1dee4ec6dc601aeb46b7e
6 files changed
+41
-35
src/core/ReactComponent.js
+10
-9
@@ -127,8 +127,8 @@ function validateChildKeys(component) {
127
* `mountComponent`
128
* Initializes the component, renders markup, and registers event listeners.
129
*
130
- * `receiveProps`
131
- * Updates the rendered DOM nodes given a new set of props.
130
+ * `receiveComponent`
131
+ * Updates the rendered DOM nodes to match the given component.
132
*
133
* `unmountComponent`
134
* Releases any resources allocated by this component.
@@ -151,7 +151,7 @@ var ReactComponent = {
151
return !!(
152
object &&
153
typeof object.mountComponentIntoNode === 'function' &&
154
- typeof object.receiveProps === 'function'
154
+ typeof object.receiveComponent === 'function'
155
);
156
},
157
@@ -369,21 +369,22 @@ var ReactComponent = {
369
},
370
371
/**
372
- * Updates the rendered DOM nodes given a new set of props.
372
+ * Given a new instance of this component, updates the rendered DOM nodes
373
+ * as if that instance was rendered instead.
374
*
375
* Subclasses that override this method should make sure to invoke
375
- * `ReactComponent.Mixin.receiveProps.call(this, ...)`.
376
+ * `ReactComponent.Mixin.receiveComponent.call(this, ...)`.
377
*
377
- * @param {object} nextProps Next set of properties.
378
+ * @param {object} nextComponent Next set of properties.
379
* @param {ReactReconcileTransaction} transaction
380
* @internal
381
*/
381
- receiveProps: function(nextProps, transaction) {
382
+ receiveComponent: function(nextComponent, transaction) {
383
invariant(
384
this.isMounted(),
384
- 'receiveProps(...): Can only update a mounted component.'
385
+ 'receiveComponent(...): Can only update a mounted component.'
386
);
386
- this._pendingProps = nextProps;
387
+ this._pendingProps = nextComponent.props;
388
this._performUpdateIfNecessary(transaction);
389
},
390
src/core/ReactCompositeComponent.js
+1
-1
@@ -794,7 +794,7 @@ var ReactCompositeComponentMixin = {
794
var prevComponent = this._renderedComponent;
795
var nextComponent = this._renderValidatedComponent();
796
if (shouldUpdateReactComponent(prevComponent, nextComponent)) {
797
- prevComponent.receiveProps(nextComponent.props, transaction);
797
+ prevComponent.receiveComponent(nextComponent, transaction);
798
} else {
799
// These two IDs are actually the same! But nothing should rely on that.
800
var thisID = this._rootNodeID;
src/core/ReactDOMComponent.js
+7
-3
@@ -179,9 +179,13 @@ ReactDOMComponent.Mixin = {
179
return '';
180
},
181
182
- receiveProps: function(nextProps, transaction) {
183
- assertValidProps(nextProps);
184
- ReactComponent.Mixin.receiveProps.call(this, nextProps, transaction);
182
+ receiveComponent: function(nextComponent, transaction) {
183
+ assertValidProps(nextComponent.props);
184
+ ReactComponent.Mixin.receiveComponent.call(
185
+ this,
186
+ nextComponent,
187
+ transaction
188
+ );
189
},
190
191
/**
src/core/ReactMultiChild.js
+1
-1
@@ -285,7 +285,7 @@ var ReactMultiChild = {
285
if (shouldUpdateReactComponent(prevChild, nextChild)) {
286
this.moveChild(prevChild, nextIndex, lastIndex);
287
lastIndex = Math.max(prevChild._mountIndex, lastIndex);
288
- prevChild.receiveProps(nextChild.props, transaction);
288
+ prevChild.receiveComponent(nextChild, transaction);
289
prevChild._mountIndex = nextIndex;
290
} else {
291
if (prevChild) {
src/core/ReactTextComponent.js
+3
-2
@@ -74,11 +74,12 @@ mixInto(ReactTextComponent, {
74
/**
75
* Updates this component by updating the text content.
76
*
77
- * @param {object} nextProps Contains the next text content.
77
+ * @param {object} nextComponent Contains the next text content.
78
* @param {ReactReconcileTransaction} transaction
79
* @internal
80
*/
81
- receiveProps: function(nextProps, transaction) {
81
+ receiveComponent: function(nextComponent, transaction) {
82
+ var nextProps = nextComponent.props;
83
if (nextProps.text !== this.props.text) {
84
this.props.text = nextProps.text;
85
ReactComponent.DOMIDOperations.updateTextContentByID(
src/core/__tests__/ReactDOMComponent-test.js
+19
-19
@@ -41,11 +41,11 @@ describe('ReactDOMComponent', function() {
41
it("should handle className", function() {
42
var stub = ReactTestUtils.renderIntoDocument(<div style={{}} />);
43
44
- stub.receiveProps({ className: 'foo' }, transaction);
44
+ stub.receiveComponent({props: { className: 'foo' }}, transaction);
45
expect(stub.getDOMNode().className).toEqual('foo');
46
- stub.receiveProps({ className: 'bar' }, transaction);
46
+ stub.receiveComponent({props: { className: 'bar' }}, transaction);
47
expect(stub.getDOMNode().className).toEqual('bar');
48
- stub.receiveProps({ className: null }, transaction);
48
+ stub.receiveComponent({props: { className: null }}, transaction);
49
expect(stub.getDOMNode().className).toEqual('');
50
});
51
@@ -55,14 +55,14 @@ describe('ReactDOMComponent', function() {
55
56
// set initial style
57
var setup = { display: 'block', left: '1', top: 2, fontFamily: 'Arial' };
58
- stub.receiveProps({ style: setup }, transaction);
58
+ stub.receiveComponent({props: { style: setup }}, transaction);
59
expect(stubStyle.display).toEqual('block');
60
expect(stubStyle.left).toEqual('1px');
61
expect(stubStyle.fontFamily).toEqual('Arial');
62
63
// reset the style to their default state
64
var reset = { display: '', left: null, top: false, fontFamily: true };
65
- stub.receiveProps({ style: reset }, transaction);
65
+ stub.receiveComponent({props: { style: reset }}, transaction);
66
expect(stubStyle.display).toEqual('');
67
expect(stubStyle.left).toEqual('');
68
expect(stubStyle.top).toEqual('');
@@ -79,21 +79,21 @@ describe('ReactDOMComponent', function() {
79
80
styles.display = 'block';
81
82
- stub.receiveProps({ style: styles }, transaction);
82
+ stub.receiveComponent({props: { style: styles }}, transaction);
83
expect(stubStyle.display).toEqual('block');
84
expect(stubStyle.fontFamily).toEqual('Arial');
85
expect(stubStyle.opacity).toEqual('0');
86
87
styles.fontFamily = 'Helvetica';
88
89
- stub.receiveProps({ style: styles }, transaction);
89
+ stub.receiveComponent({props: { style: styles }}, transaction);
90
expect(stubStyle.display).toEqual('block');
91
expect(stubStyle.fontFamily).toEqual('Helvetica');
92
expect(stubStyle.opacity).toEqual('0');
93
94
styles.opacity = 0.5;
95
96
- stub.receiveProps({ style: styles }, transaction);
96
+ stub.receiveComponent({props: { style: styles }}, transaction);
97
expect(stubStyle.display).toEqual('block');
98
expect(stubStyle.fontFamily).toEqual('Helvetica');
99
expect(stubStyle.opacity).toEqual('0.5');
@@ -107,7 +107,7 @@ describe('ReactDOMComponent', function() {
107
108
styles = {display: 'block'};
109
110
- stub.receiveProps({ style: styles }, transaction);
110
+ stub.receiveComponent({props: { style: styles }}, transaction);
111
expect(stubStyle.display).toEqual('block');
112
});
113
@@ -115,7 +115,7 @@ describe('ReactDOMComponent', function() {
115
var stub = ReactTestUtils.renderIntoDocument(<img height='17' />);
116
117
expect(stub.getDOMNode().hasAttribute('height')).toBe(true);
118
- stub.receiveProps({}, transaction);
118
+ stub.receiveComponent({props: {}}, transaction);
119
expect(stub.getDOMNode().hasAttribute('height')).toBe(false);
120
});
121
@@ -123,7 +123,7 @@ describe('ReactDOMComponent', function() {
123
var stub = ReactTestUtils.renderIntoDocument(<div className='monkey' />);
124
125
expect(stub.getDOMNode().className).toEqual('monkey');
126
- stub.receiveProps({}, transaction);
126
+ stub.receiveComponent({props: {}}, transaction);
127
expect(stub.getDOMNode().className).toEqual('');
128
});
129
@@ -134,7 +134,7 @@ describe('ReactDOMComponent', function() {
134
var stubStyle = stub.getDOMNode().style;
135
136
styles = {color: 'green'};
137
- stub.receiveProps({ style: styles }, transaction);
137
+ stub.receiveComponent({props: { style: styles }}, transaction);
138
expect(stubStyle.display).toEqual('');
139
expect(stubStyle.color).toEqual('green');
140
});
@@ -145,7 +145,7 @@ describe('ReactDOMComponent', function() {
145
146
var stubStyle = stub.getDOMNode().style;
147
148
- stub.receiveProps({}, transaction);
148
+ stub.receiveComponent({props: {}}, transaction);
149
expect(stubStyle.display).toEqual('');
150
expect(stubStyle.color).toEqual('');
151
});
@@ -156,7 +156,7 @@ describe('ReactDOMComponent', function() {
156
);
157
158
expect(stub.getDOMNode().innerHTML).toEqual(':)');
159
- stub.receiveProps({}, transaction);
159
+ stub.receiveComponent({props: {}}, transaction);
160
expect(stub.getDOMNode().innerHTML).toEqual('');
161
});
162
@@ -166,8 +166,8 @@ describe('ReactDOMComponent', function() {
166
);
167
168
expect(stub.getDOMNode().innerHTML).toEqual('hello');
169
- stub.receiveProps(
170
- {dangerouslySetInnerHTML: {__html: 'goodbye'}},
169
+ stub.receiveComponent(
170
+ {props: {dangerouslySetInnerHTML: {__html: 'goodbye'}}},
171
transaction
172
);
173
expect(stub.getDOMNode().innerHTML).toEqual('goodbye');
@@ -179,7 +179,7 @@ describe('ReactDOMComponent', function() {
179
);
180
181
expect(stub.getDOMNode().innerHTML).toEqual('bonjour');
182
- stub.receiveProps({children: 'adieu'}, transaction);
182
+ stub.receiveComponent({props: {children: 'adieu'}}, transaction);
183
expect(stub.getDOMNode().innerHTML).toEqual('adieu');
184
});
185
@@ -198,10 +198,10 @@ describe('ReactDOMComponent', function() {
198
})
199
});
200
201
- stub.receiveProps({value: ''}, transaction);
201
+ stub.receiveComponent({props: {value: ''}}, transaction);
202
expect(nodeValueSetter.mock.calls.length).toBe(0);
203
204
- stub.receiveProps({}, transaction);
204
+ stub.receiveComponent({props: {}}, transaction);
205
expect(nodeValueSetter.mock.calls.length).toBe(1);
206
});
207
});