Walk down internal tree to find DOM node

This reduces our reliance on hierarchical IDs. If facebook#4983 merges, this can look at `._nativeNode` when present.

src/renderers/dom/client/ReactMount.js

@@ -17,9 +17,7 @@ var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
 var ReactCurrentOwner = require('ReactCurrentOwner');
 var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
 var ReactElement = require('ReactElement');
-var ReactEmptyComponentRegistry = require('ReactEmptyComponentRegistry');
 var ReactInstanceHandles = require('ReactInstanceHandles');
-var ReactInstanceMap = require('ReactInstanceMap');
 var ReactMarkupChecksum = require('ReactMarkupChecksum');
 var ReactPerf = require('ReactPerf');
 var ReactReconciler = require('ReactReconciler');
@@ -184,21 +182,6 @@ function getNode(id) {
   }
 }
 
-/**
- * Finds the node with the supplied public React instance.
- *
- * @param {*} instance A public React instance.
- * @return {?DOMElement} DOM node with the suppled `id`.
- * @internal
- */
-function getNodeFromInstance(instance) {
-  var id = ReactInstanceMap.get(instance)._rootNodeID;
-  if (ReactEmptyComponentRegistry.isNullComponentID(id)) {
-    return null;
-  }
-  return getNode(id);
-}
-
 /**
  * A node is "valid" if it is contained by a currently mounted container.
  *
@@ -1095,8 +1078,6 @@ var ReactMount = {
 
   getNode: getNode,
 
-  getNodeFromInstance: getNodeFromInstance,
-
   isValid: isValid,
 
   purgeID: purgeID,

src/renderers/dom/client/findDOMNode.js

@@ -13,12 +13,28 @@
 'use strict';
 
 var ReactCurrentOwner = require('ReactCurrentOwner');
+var ReactDOMComponent = require('ReactDOMComponent');
 var ReactInstanceMap = require('ReactInstanceMap');
-var ReactMount = require('ReactMount');
 
 var invariant = require('invariant');
 var warning = require('warning');
 
+function getNativeComponentFromComposite(inst) {
+  var renderedElement;
+
+  do {
+    renderedElement = inst._renderedElement;
+    if (typeof renderedElement === 'object' && renderedElement != null) {
+      inst = inst._renderedComponent;
+    } else {
+      // Empty or text component
+      return null;
+    }
+  } while (typeof renderedElement.type === 'function');
+
+  return inst;
+}
+
 /**
  * Returns the DOM node rendered by this element.
  *
@@ -47,19 +63,25 @@ function findDOMNode(componentOrElement) {
   if (componentOrElement.nodeType === 1) {
     return componentOrElement;
   }
-  if (ReactInstanceMap.has(componentOrElement)) {
-    return ReactMount.getNodeFromInstance(componentOrElement);
+
+  var inst = ReactInstanceMap.get(componentOrElement);
+  if (inst) {
+    inst = getNativeComponentFromComposite(inst);
+    return inst ? ReactDOMComponent.getNodeFromInstance(inst) : null;
+  }
+
+  if (typeof componentOrElement.render === 'function') {
+    invariant(
+      false,
+      'findDOMNode was called on an unmounted component.'
+    );
+  } else {
+    invariant(
+      false,
+      'Element appears to be neither ReactComponent nor DOMNode (keys: %s)',
+      Object.keys(componentOrElement)
+    );
   }
-  invariant(
-    componentOrElement.render == null ||
-    typeof componentOrElement.render !== 'function',
-    'findDOMNode was called on an unmounted component.'
-  );
-  invariant(
-    false,
-    'Element appears to be neither ReactComponent nor DOMNode (keys: %s)',
-    Object.keys(componentOrElement)
-  );
 }
 
 module.exports = findDOMNode;

src/renderers/dom/shared/ReactDOMComponent.js

@@ -1147,4 +1147,8 @@ assign(
   ReactMultiChild.Mixin
 );
 
+assign(ReactDOMComponent, {
+  getNodeFromInstance: getNode,
+});
+
 module.exports = ReactDOMComponent;

src/renderers/shared/reconciler/ReactCompositeComponent.js

@@ -103,6 +103,7 @@ var ReactCompositeComponentMixin = {
     this._pendingReplaceState = false;
     this._pendingForceUpdate = false;
 
+    this._renderedElement = null;
     this._renderedComponent = null;
 
     this._context = null;
@@ -280,6 +281,7 @@ var ReactCompositeComponentMixin = {
       renderedElement = this._renderValidatedComponent();
     }
 
+    this._renderedElement = renderedElement;
     this._renderedComponent = this._instantiateReactComponent(
       renderedElement
     );
@@ -312,6 +314,7 @@ var ReactCompositeComponentMixin = {
 
     var unmountedNativeNode =
       ReactReconciler.unmountComponent(this._renderedComponent);
+    this._renderedElement = null;
     this._renderedComponent = null;
     this._instance = null;
 
@@ -732,6 +735,7 @@ var ReactCompositeComponentMixin = {
       var oldNativeNode =
         ReactReconciler.unmountComponent(prevComponentInstance);
 
+      this._renderedElement = nextRenderedElement;
       this._renderedComponent = this._instantiateReactComponent(
         nextRenderedElement
       );

src/renderers/shared/reconciler/ReactEmptyComponent.js

@@ -12,7 +12,6 @@
 'use strict';
 
 var ReactElement = require('ReactElement');
-var ReactEmptyComponentRegistry = require('ReactEmptyComponentRegistry');
 var ReactReconciler = require('ReactReconciler');
 
 var assign = require('Object.assign');
@@ -34,7 +33,6 @@ assign(ReactEmptyComponent.prototype, {
   construct: function(element) {
   },
   mountComponent: function(rootID, transaction, context) {
-    ReactEmptyComponentRegistry.registerNullComponentID(rootID);
     this._rootNodeID = rootID;
     return ReactReconciler.mountComponent(
       this._renderedComponent,
@@ -47,7 +45,6 @@ assign(ReactEmptyComponent.prototype, {
   },
   unmountComponent: function(rootID, transaction, context) {
     var nativeNode = ReactReconciler.unmountComponent(this._renderedComponent);
-    ReactEmptyComponentRegistry.deregisterNullComponentID(this._rootNodeID);
     this._rootNodeID = null;
     this._renderedComponent = null;
     return nativeNode;