Use returned native node for composite type-change

With this change, all unmounted components should be properly purged from ReactMount's cache.

src/renderers/dom/client/ReactDOMIDOperations.js

@@ -63,19 +63,6 @@ var ReactDOMIDOperations = {
     }
   },
 
-  /**
-   * Replaces a DOM node that exists in the document with markup.
-   *
-   * @param {string} id ID of child to be replaced.
-   * @param {string} markup Dangerous markup to inject in place of child.
-   * @internal
-   * @see {Danger.dangerouslyReplaceNodeWithMarkup}
-   */
-  dangerouslyReplaceNodeWithMarkupByID: function(id, markup) {
-    var node = ReactMount.getNode(id);
-    DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup);
-  },
-
   /**
    * Updates a component's children by processing a series of updates.
    *
@@ -92,7 +79,6 @@ var ReactDOMIDOperations = {
 };
 
 ReactPerf.measureMethods(ReactDOMIDOperations, 'ReactDOMIDOperations', {
-  dangerouslyReplaceNodeWithMarkupByID: 'dangerouslyReplaceNodeWithMarkupByID',
   dangerouslyProcessChildrenUpdates: 'dangerouslyProcessChildrenUpdates',
 });
 

src/renderers/dom/shared/ReactComponentBrowserEnvironment.js

@@ -11,8 +11,10 @@
 
 'use strict';
 
+var DOMChildrenOperations = require('DOMChildrenOperations');
 var ReactDOMIDOperations = require('ReactDOMIDOperations');
 var ReactMount = require('ReactMount');
+var ReactPerf = require('ReactPerf');
 
 /**
  * Abstracts away all functionality of the reconciler that requires knowledge of
@@ -24,8 +26,8 @@ var ReactComponentBrowserEnvironment = {
   processChildrenUpdates:
     ReactDOMIDOperations.dangerouslyProcessChildrenUpdates,
 
-  replaceNodeWithMarkupByID:
-    ReactDOMIDOperations.dangerouslyReplaceNodeWithMarkupByID,
+  replaceNodeWithMarkup:
+    DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup,
 
   /**
    * If a particular environment requires that some resources be cleaned up,
@@ -40,4 +42,12 @@ var ReactComponentBrowserEnvironment = {
 
 };
 
+ReactPerf.measureMethods(
+  ReactComponentBrowserEnvironment,
+  'ReactComponentBrowserEnvironment',
+  {
+    replaceNodeWithMarkup: 'replaceNodeWithMarkup',
+  }
+);
+
 module.exports = ReactComponentBrowserEnvironment;

src/renderers/shared/reconciler/ReactComponentEnvironment.js

@@ -28,7 +28,7 @@ var ReactComponentEnvironment = {
    * Optionally injectable hook for swapping out mount images in the middle of
    * the tree.
    */
-  replaceNodeWithMarkupByID: null,
+  replaceNodeWithMarkup: null,
 
   /**
    * Optionally injectable hook for processing a queue of child updates. Will
@@ -44,8 +44,8 @@ var ReactComponentEnvironment = {
       );
       ReactComponentEnvironment.unmountIDFromEnvironment =
         environment.unmountIDFromEnvironment;
-      ReactComponentEnvironment.replaceNodeWithMarkupByID =
-        environment.replaceNodeWithMarkupByID;
+      ReactComponentEnvironment.replaceNodeWithMarkup =
+        environment.replaceNodeWithMarkup;
       ReactComponentEnvironment.processChildrenUpdates =
         environment.processChildrenUpdates;
       injected = true;

src/renderers/shared/reconciler/ReactCompositeComponent.js

@@ -729,30 +729,30 @@ var ReactCompositeComponentMixin = {
         this._processChildContext(context)
       );
     } else {
-      // These two IDs are actually the same! But nothing should rely on that.
-      var thisID = this._rootNodeID;
-      var prevComponentID = prevComponentInstance._rootNodeID;
-      ReactReconciler.unmountComponent(prevComponentInstance);
+      var oldNativeNode =
+        ReactReconciler.unmountComponent(prevComponentInstance);
 
       this._renderedComponent = this._instantiateReactComponent(
         nextRenderedElement
       );
       var nextMarkup = ReactReconciler.mountComponent(
         this._renderedComponent,
-        thisID,
+        this._rootNodeID,
         transaction,
         this._processChildContext(context)
       );
-      this._replaceNodeWithMarkupByID(prevComponentID, nextMarkup);
+      this._replaceNodeWithMarkup(oldNativeNode, nextMarkup);
     }
   },
 
   /**
+   * Overridden in shallow rendering.
+   *
    * @protected
    */
-  _replaceNodeWithMarkupByID: function(prevComponentID, nextMarkup) {
-    ReactComponentEnvironment.replaceNodeWithMarkupByID(
-      prevComponentID,
+  _replaceNodeWithMarkup: function(oldNativeNode, nextMarkup) {
+    ReactComponentEnvironment.replaceNodeWithMarkup(
+      oldNativeNode,
       nextMarkup
     );
   },

src/test/ReactDefaultPerf.js

@@ -169,7 +169,8 @@ var ReactDefaultPerf = {
           moduleName === 'ReactDOMIDOperations' ||
           moduleName === 'CSSPropertyOperations' ||
           moduleName === 'DOMChildrenOperations' ||
-          moduleName === 'DOMPropertyOperations') {
+          moduleName === 'DOMPropertyOperations' ||
+          moduleName === 'ReactComponentBrowserEnvironment') {
         start = performanceNow();
         rv = func.apply(this, args);
         totalTime = performanceNow() - start;

src/test/ReactTestUtils.js

@@ -395,7 +395,7 @@ assign(
     _instantiateReactComponent: function(element) {
       return new NoopInternalComponent(element);
     },
-    _replaceNodeWithMarkupByID: function() {},
+    _replaceNodeWithMarkup: function() {},
     _renderValidatedComponent:
       ReactCompositeComponent.Mixin
         ._renderValidatedComponentWithoutOwnerOrContext,