Support rendering different components into same node

var container = ...; // some DOM node
React.renderComponent(<div />, container);
React.renderComponent(<span />, container);

This should replace the rendered <div> with a <span>, effectively
reconciling at the root level.

Author: jeffmo

src/core/ReactMount.js

@@ -106,11 +106,15 @@ var ReactMount = {
   renderComponent: function(nextComponent, container) {
     var prevComponent = instanceByReactRootID[getReactRootID(container)];
     if (prevComponent) {
-      var nextProps = nextComponent.props;
-      ReactMount.scrollMonitor(container, function() {
-        prevComponent.replaceProps(nextProps);
-      });
-      return prevComponent;
+      if (prevComponent.constructor === nextComponent.constructor) {
+        var nextProps = nextComponent.props;
+        ReactMount.scrollMonitor(container, function() {
+          prevComponent.replaceProps(nextProps);
+        });
+        return prevComponent;
+      } else {
+        ReactMount.unmountAndReleaseReactRootNode(container);
+      }
     }
 
     ReactMount.prepareTopLevelEvents(ReactEventTopLevelCallback);

src/core/__tests__/ReactMount-test.js

@@ -0,0 +1,22 @@
+/**
+ * @jsx React.DOM
+ * @emails react-core
+ */
+
+"use strict";
+
+describe('ReactMount', function() {
+  var React = require('React');
+  var ReactMount = require('ReactMount');
+
+  it('should render different components in same root', function() {
+    var container = document.createElement('container');
+    document.documentElement.appendChild(container);
+
+    ReactMount.renderComponent(<div></div>, container);
+    expect(container.firstChild.nodeName).toBe('DIV');
+
+    ReactMount.renderComponent(<span></span>, container);
+    expect(container.firstChild.nodeName).toBe('SPAN');
+  });
+});