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

@@ -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);
     },
 

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;

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
+    );
   },
 
   /**

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) {

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(

src/core/__tests__/ReactDOMComponent-test.js

@@ -41,11 +41,11 @@ describe('ReactDOMComponent', function() {
     it("should handle className", function() {
       var stub = ReactTestUtils.renderIntoDocument(<div style={{}} />);
 
-      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(<img height='17' />);
 
       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(<div className='monkey' />);
 
       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);
     });
   });