From 381a3392c65b00d12ce1dee4ec6dc601aeb46b7e Mon Sep 17 00:00:00 2001 From: Marshall Roch Date: Wed, 13 Nov 2013 09:39:46 -0800 Subject: [PATCH] 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; --- src/core/ReactComponent.js | 19 +++++----- src/core/ReactCompositeComponent.js | 2 +- src/core/ReactDOMComponent.js | 10 ++++-- src/core/ReactMultiChild.js | 2 +- src/core/ReactTextComponent.js | 5 +-- src/core/__tests__/ReactDOMComponent-test.js | 38 ++++++++++---------- 6 files changed, 41 insertions(+), 35 deletions(-) diff --git a/src/core/ReactComponent.js b/src/core/ReactComponent.js index 49d6eeb70e..f85c5cce25 100644 --- a/src/core/ReactComponent.js +++ b/src/core/ReactComponent.js @@ -127,8 +127,8 @@ function validateChildKeys(component) { * `mountComponent` * Initializes the component, renders markup, and registers event listeners. * - * `receiveProps` - * Updates the rendered DOM nodes given a new set of props. + * `receiveComponent` + * Updates the rendered DOM nodes to match the given component. * * `unmountComponent` * Releases any resources allocated by this component. @@ -151,7 +151,7 @@ var ReactComponent = { return !!( object && typeof object.mountComponentIntoNode === 'function' && - typeof object.receiveProps === 'function' + typeof object.receiveComponent === 'function' ); }, @@ -369,21 +369,22 @@ var ReactComponent = { }, /** - * Updates the rendered DOM nodes given a new set of props. + * Given a new instance of this component, updates the rendered DOM nodes + * as if that instance was rendered instead. * * Subclasses that override this method should make sure to invoke - * `ReactComponent.Mixin.receiveProps.call(this, ...)`. + * `ReactComponent.Mixin.receiveComponent.call(this, ...)`. * - * @param {object} nextProps Next set of properties. + * @param {object} nextComponent Next set of properties. * @param {ReactReconcileTransaction} transaction * @internal */ - receiveProps: function(nextProps, transaction) { + receiveComponent: function(nextComponent, transaction) { invariant( this.isMounted(), - 'receiveProps(...): Can only update a mounted component.' + 'receiveComponent(...): Can only update a mounted component.' ); - this._pendingProps = nextProps; + this._pendingProps = nextComponent.props; this._performUpdateIfNecessary(transaction); }, diff --git a/src/core/ReactCompositeComponent.js b/src/core/ReactCompositeComponent.js index 8f2a04a4dc..2168128c77 100644 --- a/src/core/ReactCompositeComponent.js +++ b/src/core/ReactCompositeComponent.js @@ -794,7 +794,7 @@ var ReactCompositeComponentMixin = { var prevComponent = this._renderedComponent; var nextComponent = this._renderValidatedComponent(); if (shouldUpdateReactComponent(prevComponent, nextComponent)) { - prevComponent.receiveProps(nextComponent.props, transaction); + prevComponent.receiveComponent(nextComponent, transaction); } else { // These two IDs are actually the same! But nothing should rely on that. var thisID = this._rootNodeID; diff --git a/src/core/ReactDOMComponent.js b/src/core/ReactDOMComponent.js index 1c37a33cc3..dcbc791103 100644 --- a/src/core/ReactDOMComponent.js +++ b/src/core/ReactDOMComponent.js @@ -179,9 +179,13 @@ ReactDOMComponent.Mixin = { return ''; }, - receiveProps: function(nextProps, transaction) { - assertValidProps(nextProps); - ReactComponent.Mixin.receiveProps.call(this, nextProps, transaction); + receiveComponent: function(nextComponent, transaction) { + assertValidProps(nextComponent.props); + ReactComponent.Mixin.receiveComponent.call( + this, + nextComponent, + transaction + ); }, /** diff --git a/src/core/ReactMultiChild.js b/src/core/ReactMultiChild.js index 39011119dd..d16d0d4734 100644 --- a/src/core/ReactMultiChild.js +++ b/src/core/ReactMultiChild.js @@ -285,7 +285,7 @@ var ReactMultiChild = { if (shouldUpdateReactComponent(prevChild, nextChild)) { this.moveChild(prevChild, nextIndex, lastIndex); lastIndex = Math.max(prevChild._mountIndex, lastIndex); - prevChild.receiveProps(nextChild.props, transaction); + prevChild.receiveComponent(nextChild, transaction); prevChild._mountIndex = nextIndex; } else { if (prevChild) { diff --git a/src/core/ReactTextComponent.js b/src/core/ReactTextComponent.js index 235f0dad41..5b1da0f4bd 100644 --- a/src/core/ReactTextComponent.js +++ b/src/core/ReactTextComponent.js @@ -74,11 +74,12 @@ mixInto(ReactTextComponent, { /** * Updates this component by updating the text content. * - * @param {object} nextProps Contains the next text content. + * @param {object} nextComponent Contains the next text content. * @param {ReactReconcileTransaction} transaction * @internal */ - receiveProps: function(nextProps, transaction) { + receiveComponent: function(nextComponent, transaction) { + var nextProps = nextComponent.props; if (nextProps.text !== this.props.text) { this.props.text = nextProps.text; ReactComponent.DOMIDOperations.updateTextContentByID( diff --git a/src/core/__tests__/ReactDOMComponent-test.js b/src/core/__tests__/ReactDOMComponent-test.js index 247257d662..973f03cb04 100644 --- a/src/core/__tests__/ReactDOMComponent-test.js +++ b/src/core/__tests__/ReactDOMComponent-test.js @@ -41,11 +41,11 @@ describe('ReactDOMComponent', function() { it("should handle className", function() { var stub = ReactTestUtils.renderIntoDocument(
); - stub.receiveProps({ className: 'foo' }, transaction); + stub.receiveComponent({props: { className: 'foo' }}, transaction); expect(stub.getDOMNode().className).toEqual('foo'); - stub.receiveProps({ className: 'bar' }, transaction); + stub.receiveComponent({props: { className: 'bar' }}, transaction); expect(stub.getDOMNode().className).toEqual('bar'); - stub.receiveProps({ className: null }, transaction); + stub.receiveComponent({props: { className: null }}, transaction); expect(stub.getDOMNode().className).toEqual(''); }); @@ -55,14 +55,14 @@ describe('ReactDOMComponent', function() { // set initial style var setup = { display: 'block', left: '1', top: 2, fontFamily: 'Arial' }; - stub.receiveProps({ style: setup }, transaction); + stub.receiveComponent({props: { style: setup }}, transaction); expect(stubStyle.display).toEqual('block'); expect(stubStyle.left).toEqual('1px'); expect(stubStyle.fontFamily).toEqual('Arial'); // reset the style to their default state var reset = { display: '', left: null, top: false, fontFamily: true }; - stub.receiveProps({ style: reset }, transaction); + stub.receiveComponent({props: { style: reset }}, transaction); expect(stubStyle.display).toEqual(''); expect(stubStyle.left).toEqual(''); expect(stubStyle.top).toEqual(''); @@ -79,21 +79,21 @@ describe('ReactDOMComponent', function() { styles.display = 'block'; - stub.receiveProps({ style: styles }, transaction); + stub.receiveComponent({props: { style: styles }}, transaction); expect(stubStyle.display).toEqual('block'); expect(stubStyle.fontFamily).toEqual('Arial'); expect(stubStyle.opacity).toEqual('0'); styles.fontFamily = 'Helvetica'; - stub.receiveProps({ style: styles }, transaction); + stub.receiveComponent({props: { style: styles }}, transaction); expect(stubStyle.display).toEqual('block'); expect(stubStyle.fontFamily).toEqual('Helvetica'); expect(stubStyle.opacity).toEqual('0'); styles.opacity = 0.5; - stub.receiveProps({ style: styles }, transaction); + stub.receiveComponent({props: { style: styles }}, transaction); expect(stubStyle.display).toEqual('block'); expect(stubStyle.fontFamily).toEqual('Helvetica'); expect(stubStyle.opacity).toEqual('0.5'); @@ -107,7 +107,7 @@ describe('ReactDOMComponent', function() { styles = {display: 'block'}; - stub.receiveProps({ style: styles }, transaction); + stub.receiveComponent({props: { style: styles }}, transaction); expect(stubStyle.display).toEqual('block'); }); @@ -115,7 +115,7 @@ describe('ReactDOMComponent', function() { var stub = ReactTestUtils.renderIntoDocument(); expect(stub.getDOMNode().hasAttribute('height')).toBe(true); - stub.receiveProps({}, transaction); + stub.receiveComponent({props: {}}, transaction); expect(stub.getDOMNode().hasAttribute('height')).toBe(false); }); @@ -123,7 +123,7 @@ describe('ReactDOMComponent', function() { var stub = ReactTestUtils.renderIntoDocument(
); expect(stub.getDOMNode().className).toEqual('monkey'); - stub.receiveProps({}, transaction); + stub.receiveComponent({props: {}}, transaction); expect(stub.getDOMNode().className).toEqual(''); }); @@ -134,7 +134,7 @@ describe('ReactDOMComponent', function() { var stubStyle = stub.getDOMNode().style; styles = {color: 'green'}; - stub.receiveProps({ style: styles }, transaction); + stub.receiveComponent({props: { style: styles }}, transaction); expect(stubStyle.display).toEqual(''); expect(stubStyle.color).toEqual('green'); }); @@ -145,7 +145,7 @@ describe('ReactDOMComponent', function() { var stubStyle = stub.getDOMNode().style; - stub.receiveProps({}, transaction); + stub.receiveComponent({props: {}}, transaction); expect(stubStyle.display).toEqual(''); expect(stubStyle.color).toEqual(''); }); @@ -156,7 +156,7 @@ describe('ReactDOMComponent', function() { ); expect(stub.getDOMNode().innerHTML).toEqual(':)'); - stub.receiveProps({}, transaction); + stub.receiveComponent({props: {}}, transaction); expect(stub.getDOMNode().innerHTML).toEqual(''); }); @@ -166,8 +166,8 @@ describe('ReactDOMComponent', function() { ); expect(stub.getDOMNode().innerHTML).toEqual('hello'); - stub.receiveProps( - {dangerouslySetInnerHTML: {__html: 'goodbye'}}, + stub.receiveComponent( + {props: {dangerouslySetInnerHTML: {__html: 'goodbye'}}}, transaction ); expect(stub.getDOMNode().innerHTML).toEqual('goodbye'); @@ -179,7 +179,7 @@ describe('ReactDOMComponent', function() { ); expect(stub.getDOMNode().innerHTML).toEqual('bonjour'); - stub.receiveProps({children: 'adieu'}, transaction); + stub.receiveComponent({props: {children: 'adieu'}}, transaction); expect(stub.getDOMNode().innerHTML).toEqual('adieu'); }); @@ -198,10 +198,10 @@ describe('ReactDOMComponent', function() { }) }); - stub.receiveProps({value: ''}, transaction); + stub.receiveComponent({props: {value: ''}}, transaction); expect(nodeValueSetter.mock.calls.length).toBe(0); - stub.receiveProps({}, transaction); + stub.receiveComponent({props: {}}, transaction); expect(nodeValueSetter.mock.calls.length).toBe(1); }); });