Hello World<\/title>\n <\/head>\n <body>\n- Hello world\n+ {'Hello ' + this.props.hello}\n <\/body>\n <\/html>\n );\n },\n });\n \n- var markup = ReactDOMServer.renderToString(<Root \/>);\n+ var markup = ReactDOMServer.renderToString(<Root hello=\"world\" \/>);\n testDocument = getTestDocument(markup);\n- var component = ReactDOM.render(<Root \/>, testDocument);\n+ var body = testDocument.body;\n+\n+ ReactDOM.render(<Root hello=\"world\" \/>, testDocument);\n expect(testDocument.body.innerHTML).toBe('Hello world');\n \n- \/\/ TODO: This is a bad test. I have no idea what this is testing.\n- \/\/ Node IDs is an implementation detail and not part of the public API.\n- var componentID = ReactMount.getReactRootID(testDocument);\n- expect(componentID).toBe(ReactInstanceMap.get(component)._rootNodeID);\n+ ReactDOM.render(<Root hello=\"moon\" \/>, testDocument);\n+ expect(testDocument.body.innerHTML).toBe('Hello moon');\n+\n+ expect(body).toBe(testDocument.body);\n });\n \n it('should not be able to unmount component from document node', function() {\n@@ -223,8 +210,8 @@ describe('rendering React components at document', function() {\n 'quirks by rendering at the document root. You should look for ' +\n 'environment dependent code in your components and ensure ' +\n 'the props are the same client and server side:\\n' +\n- ' (client) ata-reactid=\".-1.1\">Hello world<\/body><\/\\n' +\n- ' (server) ata-reactid=\".-1.1\">Goodbye world<\/body>'\n+ ' (client) dy data-reactid=\"4\">Hello world<\/body><\/\\n' +\n+ ' (server) dy data-reactid=\"4\">Goodbye world<\/body>'\n );\n });\n \ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/BeforeInputEventPlugin.js b\/src\/renderers\/dom\/client\/eventPlugins\/BeforeInputEventPlugin.js\nindex fdcf0bf8de..278104917f 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/BeforeInputEventPlugin.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/BeforeInputEventPlugin.js\n@@ -227,16 +227,11 @@ function getDataFromCustomEvent(nativeEvent) {\n var currentComposition = null;\n \n \/**\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n * @return {?object} A SyntheticCompositionEvent.\n *\/\n function extractCompositionEvent(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n ) {\n@@ -261,7 +256,8 @@ function extractCompositionEvent(\n \/\/ The current composition is stored statically and must not be\n \/\/ overwritten while composition continues.\n if (!currentComposition && eventType === eventTypes.compositionStart) {\n- currentComposition = FallbackCompositionState.getPooled(topLevelTarget);\n+ currentComposition =\n+ FallbackCompositionState.getPooled(nativeEventTarget);\n } else if (eventType === eventTypes.compositionEnd) {\n if (currentComposition) {\n fallbackData = currentComposition.getData();\n@@ -271,7 +267,7 @@ function extractCompositionEvent(\n \n var event = SyntheticCompositionEvent.getPooled(\n eventType,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -403,16 +399,11 @@ function getFallbackBeforeInputChars(topLevelType, nativeEvent) {\n * Extract a SyntheticInputEvent for `beforeInput`, based on either native\n * `textInput` or fallback behavior.\n *\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n * @return {?object} A SyntheticInputEvent.\n *\/\n function extractBeforeInputEvent(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n ) {\n@@ -432,7 +423,7 @@ function extractBeforeInputEvent(\n \n var event = SyntheticInputEvent.getPooled(\n eventTypes.beforeInput,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -464,33 +455,22 @@ var BeforeInputEventPlugin = {\n \n eventTypes: eventTypes,\n \n- \/**\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n- * @see {EventPluginHub.extractEvents}\n- *\/\n extractEvents: function(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n ) {\n return [\n extractCompositionEvent(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n ),\n extractBeforeInputEvent(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n ),\ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/ChangeEventPlugin.js b\/src\/renderers\/dom\/client\/eventPlugins\/ChangeEventPlugin.js\nindex f990004abd..c78827f70e 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/ChangeEventPlugin.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/ChangeEventPlugin.js\n@@ -15,6 +15,7 @@ var EventConstants = require('EventConstants');\n var EventPluginHub = require('EventPluginHub');\n var EventPropagators = require('EventPropagators');\n var ExecutionEnvironment = require('ExecutionEnvironment');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactUpdates = require('ReactUpdates');\n var SyntheticEvent = require('SyntheticEvent');\n \n@@ -48,7 +49,7 @@ var eventTypes = {\n * For IE shims\n *\/\n var activeElement = null;\n-var activeElementID = null;\n+var activeElementInst = null;\n var activeElementValue = null;\n var activeElementValueProp = null;\n \n@@ -74,7 +75,7 @@ if (ExecutionEnvironment.canUseDOM) {\n function manualDispatchChangeEvent(nativeEvent) {\n var event = SyntheticEvent.getPooled(\n eventTypes.change,\n- activeElementID,\n+ activeElementInst,\n nativeEvent,\n getEventTarget(nativeEvent)\n );\n@@ -99,9 +100,9 @@ function runEventInBatch(event) {\n EventPluginHub.processEventQueue(false);\n }\n \n-function startWatchingForChangeEventIE8(target, targetID) {\n+function startWatchingForChangeEventIE8(target, targetInst) {\n activeElement = target;\n- activeElementID = targetID;\n+ activeElementInst = targetInst;\n activeElement.attachEvent('onchange', manualDispatchChangeEvent);\n }\n \n@@ -111,28 +112,27 @@ function stopWatchingForChangeEventIE8() {\n }\n activeElement.detachEvent('onchange', manualDispatchChangeEvent);\n activeElement = null;\n- activeElementID = null;\n+ activeElementInst = null;\n }\n \n-function getTargetIDForChangeEvent(\n+function getTargetInstForChangeEvent(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n+ targetInst\n ) {\n if (topLevelType === topLevelTypes.topChange) {\n- return topLevelTargetID;\n+ return targetInst;\n }\n }\n function handleEventsForChangeEventIE8(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n+ target,\n+ targetInst\n ) {\n if (topLevelType === topLevelTypes.topFocus) {\n \/\/ stopWatching() should be a noop here but we call it just in case we\n \/\/ missed a blur event somehow.\n stopWatchingForChangeEventIE8();\n- startWatchingForChangeEventIE8(topLevelTarget, topLevelTargetID);\n+ startWatchingForChangeEventIE8(target, targetInst);\n } else if (topLevelType === topLevelTypes.topBlur) {\n stopWatchingForChangeEventIE8();\n }\n@@ -173,9 +173,9 @@ var newValueProp = {\n * and override the value property so that we can distinguish user events from\n * value changes in JS.\n *\/\n-function startWatchingForValueChange(target, targetID) {\n+function startWatchingForValueChange(target, targetInst) {\n activeElement = target;\n- activeElementID = targetID;\n+ activeElementInst = targetInst;\n activeElementValue = target.value;\n activeElementValueProp = Object.getOwnPropertyDescriptor(\n target.constructor.prototype,\n@@ -211,7 +211,7 @@ function stopWatchingForValueChange() {\n }\n \n activeElement = null;\n- activeElementID = null;\n+ activeElementInst = null;\n activeElementValue = null;\n activeElementValueProp = null;\n }\n@@ -236,22 +236,21 @@ function handlePropertyChange(nativeEvent) {\n \/**\n * If a `change` event should be fired, returns the target's ID.\n *\/\n-function getTargetIDForInputEvent(\n+function getTargetInstForInputEvent(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n+ targetInst\n ) {\n if (topLevelType === topLevelTypes.topInput) {\n \/\/ In modern browsers (i.e., not IE8 or IE9), the input event is exactly\n \/\/ what we want so fall through here and trigger an abstract event\n- return topLevelTargetID;\n+ return targetInst;\n }\n }\n \n function handleEventsForInputEventIE(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n+ target,\n+ targetInst\n ) {\n if (topLevelType === topLevelTypes.topFocus) {\n \/\/ In IE8, we can capture almost all .value changes by adding a\n@@ -268,17 +267,16 @@ function handleEventsForInputEventIE(\n \/\/ stopWatching() should be a noop here but we call it just in case we\n \/\/ missed a blur event somehow.\n stopWatchingForValueChange();\n- startWatchingForValueChange(topLevelTarget, topLevelTargetID);\n+ startWatchingForValueChange(target, targetInst);\n } else if (topLevelType === topLevelTypes.topBlur) {\n stopWatchingForValueChange();\n }\n }\n \n \/\/ For IE8 and IE9.\n-function getTargetIDForInputEventIE(\n+function getTargetInstForInputEventIE(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n+ targetInst\n ) {\n if (topLevelType === topLevelTypes.topSelectionChange ||\n topLevelType === topLevelTypes.topKeyUp ||\n@@ -295,7 +293,7 @@ function getTargetIDForInputEventIE(\n \/\/ fire selectionchange normally.\n if (activeElement && activeElement.value !== activeElementValue) {\n activeElementValue = activeElement.value;\n- return activeElementID;\n+ return activeElementInst;\n }\n }\n }\n@@ -314,13 +312,12 @@ function shouldUseClickEvent(elem) {\n );\n }\n \n-function getTargetIDForClickEvent(\n+function getTargetInstForClickEvent(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n+ targetInst\n ) {\n if (topLevelType === topLevelTypes.topClick) {\n- return topLevelTargetID;\n+ return targetInst;\n }\n }\n \n@@ -338,49 +335,39 @@ var ChangeEventPlugin = {\n \n eventTypes: eventTypes,\n \n- \/**\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n- * @see {EventPluginHub.extractEvents}\n- *\/\n extractEvents: function(\n- topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n- nativeEvent,\n- nativeEventTarget) {\n-\n- var getTargetIDFunc, handleEventFunc;\n- if (shouldUseChangeEvent(topLevelTarget)) {\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget\n+ ) {\n+ var targetNode = targetInst ?\n+ ReactDOMComponentTree.getNodeFromInstance(targetInst) : window;\n+\n+ var getTargetInstFunc, handleEventFunc;\n+ if (shouldUseChangeEvent(targetNode)) {\n if (doesChangeEventBubble) {\n- getTargetIDFunc = getTargetIDForChangeEvent;\n+ getTargetInstFunc = getTargetInstForChangeEvent;\n } else {\n handleEventFunc = handleEventsForChangeEventIE8;\n }\n- } else if (isTextInputElement(topLevelTarget)) {\n+ } else if (isTextInputElement(targetNode)) {\n if (isInputEventSupported) {\n- getTargetIDFunc = getTargetIDForInputEvent;\n+ getTargetInstFunc = getTargetInstForInputEvent;\n } else {\n- getTargetIDFunc = getTargetIDForInputEventIE;\n+ getTargetInstFunc = getTargetInstForInputEventIE;\n handleEventFunc = handleEventsForInputEventIE;\n }\n- } else if (shouldUseClickEvent(topLevelTarget)) {\n- getTargetIDFunc = getTargetIDForClickEvent;\n+ } else if (shouldUseClickEvent(targetNode)) {\n+ getTargetInstFunc = getTargetInstForClickEvent;\n }\n \n- if (getTargetIDFunc) {\n- var targetID = getTargetIDFunc(\n- topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n- );\n- if (targetID) {\n+ if (getTargetInstFunc) {\n+ var inst = getTargetInstFunc(topLevelType, targetInst);\n+ if (inst) {\n var event = SyntheticEvent.getPooled(\n eventTypes.change,\n- targetID,\n+ inst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -393,8 +380,8 @@ var ChangeEventPlugin = {\n if (handleEventFunc) {\n handleEventFunc(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n+ targetNode,\n+ targetInst\n );\n }\n },\ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/EnterLeaveEventPlugin.js b\/src\/renderers\/dom\/client\/eventPlugins\/EnterLeaveEventPlugin.js\nindex 6eccf1779e..27a9afce51 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/EnterLeaveEventPlugin.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/EnterLeaveEventPlugin.js\n@@ -14,13 +14,12 @@\n \n var EventConstants = require('EventConstants');\n var EventPropagators = require('EventPropagators');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var SyntheticMouseEvent = require('SyntheticMouseEvent');\n \n-var ReactMount = require('ReactMount');\n var keyOf = require('keyOf');\n \n var topLevelTypes = EventConstants.topLevelTypes;\n-var getFirstReactDOM = ReactMount.getFirstReactDOM;\n \n var eventTypes = {\n mouseEnter: {\n@@ -39,8 +38,6 @@ var eventTypes = {\n },\n };\n \n-var extractedEvents = [null, null];\n-\n var EnterLeaveEventPlugin = {\n \n eventTypes: eventTypes,\n@@ -51,20 +48,13 @@ var EnterLeaveEventPlugin = {\n * we do not extract duplicate events. However, moving the mouse into the\n * browser from outside will not fire a `mouseout` event. In this case, we use\n * the `mouseover` top-level event.\n- *\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n- * @see {EventPluginHub.extractEvents}\n *\/\n extractEvents: function(\n- topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n- nativeEvent,\n- nativeEventTarget) {\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget\n+ ) {\n if (topLevelType === topLevelTypes.topMouseOver &&\n (nativeEvent.relatedTarget || nativeEvent.fromElement)) {\n return null;\n@@ -76,12 +66,12 @@ var EnterLeaveEventPlugin = {\n }\n \n var win;\n- if (topLevelTarget.window === topLevelTarget) {\n- \/\/ `topLevelTarget` is probably a window object.\n- win = topLevelTarget;\n+ if (nativeEventTarget.window === nativeEventTarget) {\n+ \/\/ `nativeEventTarget` is probably a window object.\n+ win = nativeEventTarget;\n } else {\n \/\/ TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.\n- var doc = topLevelTarget.ownerDocument;\n+ var doc = nativeEventTarget.ownerDocument;\n if (doc) {\n win = doc.defaultView || doc.parentWindow;\n } else {\n@@ -91,22 +81,15 @@ var EnterLeaveEventPlugin = {\n \n var from;\n var to;\n- var fromID = '';\n- var toID = '';\n if (topLevelType === topLevelTypes.topMouseOut) {\n- from = topLevelTarget;\n- fromID = topLevelTargetID;\n- to = getFirstReactDOM(nativeEvent.relatedTarget || nativeEvent.toElement);\n- if (to) {\n- toID = ReactMount.getID(to);\n- } else {\n- to = win;\n- }\n- to = to || win;\n+ from = targetInst;\n+ var related = nativeEvent.relatedTarget || nativeEvent.toElement;\n+ to = related ?\n+ ReactDOMComponentTree.getClosestInstanceFromNode(related) : null;\n } else {\n- from = win;\n- to = topLevelTarget;\n- toID = topLevelTargetID;\n+ \/\/ Moving to a node from outside the window.\n+ from = null;\n+ to = targetInst;\n }\n \n if (from === to) {\n@@ -114,32 +97,34 @@ var EnterLeaveEventPlugin = {\n return null;\n }\n \n+ var fromNode =\n+ from == null ? win : ReactDOMComponentTree.getNodeFromInstance(from);\n+ var toNode =\n+ to == null ? win : ReactDOMComponentTree.getNodeFromInstance(to);\n+\n var leave = SyntheticMouseEvent.getPooled(\n eventTypes.mouseLeave,\n- fromID,\n+ from,\n nativeEvent,\n nativeEventTarget\n );\n leave.type = 'mouseleave';\n- leave.target = from;\n- leave.relatedTarget = to;\n+ leave.target = fromNode;\n+ leave.relatedTarget = toNode;\n \n var enter = SyntheticMouseEvent.getPooled(\n eventTypes.mouseEnter,\n- toID,\n+ to,\n nativeEvent,\n nativeEventTarget\n );\n enter.type = 'mouseenter';\n- enter.target = to;\n- enter.relatedTarget = from;\n-\n- EventPropagators.accumulateEnterLeaveDispatches(leave, enter, fromID, toID);\n+ enter.target = toNode;\n+ enter.relatedTarget = fromNode;\n \n- extractedEvents[0] = leave;\n- extractedEvents[1] = enter;\n+ EventPropagators.accumulateEnterLeaveDispatches(leave, enter, from, to);\n \n- return extractedEvents;\n+ return [leave, enter];\n },\n \n };\ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/SelectEventPlugin.js b\/src\/renderers\/dom\/client\/eventPlugins\/SelectEventPlugin.js\nindex bda881154a..2acf123570 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/SelectEventPlugin.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/SelectEventPlugin.js\n@@ -14,6 +14,7 @@\n var EventConstants = require('EventConstants');\n var EventPropagators = require('EventPropagators');\n var ExecutionEnvironment = require('ExecutionEnvironment');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactInputSelection = require('ReactInputSelection');\n var SyntheticEvent = require('SyntheticEvent');\n \n@@ -49,12 +50,12 @@ var eventTypes = {\n };\n \n var activeElement = null;\n-var activeElementID = null;\n+var activeElementInst = null;\n var lastSelection = null;\n var mouseDown = false;\n \n \/\/ Track whether a listener exists for this plugin. If none exist, we do\n-\/\/ not extract events.\n+\/\/ not extract events. See #3639.\n var hasListener = false;\n var ON_SELECT_KEY = keyOf({onSelect: null});\n \n@@ -117,7 +118,7 @@ function constructSelectEvent(nativeEvent, nativeEventTarget) {\n \n var syntheticEvent = SyntheticEvent.getPooled(\n eventTypes.select,\n- activeElementID,\n+ activeElementInst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -151,37 +152,32 @@ var SelectEventPlugin = {\n \n eventTypes: eventTypes,\n \n- \/**\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n- * @see {EventPluginHub.extractEvents}\n- *\/\n extractEvents: function(\n- topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n- nativeEvent,\n- nativeEventTarget) {\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget\n+ ) {\n if (!hasListener) {\n return null;\n }\n \n+ var targetNode = targetInst ?\n+ ReactDOMComponentTree.getNodeFromInstance(targetInst) : window;\n+\n switch (topLevelType) {\n \/\/ Track the input node that has focus.\n case topLevelTypes.topFocus:\n- if (isTextInputElement(topLevelTarget) ||\n- topLevelTarget.contentEditable === 'true') {\n- activeElement = topLevelTarget;\n- activeElementID = topLevelTargetID;\n+ if (isTextInputElement(targetNode) ||\n+ targetNode.contentEditable === 'true') {\n+ activeElement = targetNode;\n+ activeElementInst = targetInst;\n lastSelection = null;\n }\n break;\n case topLevelTypes.topBlur:\n activeElement = null;\n- activeElementID = null;\n+ activeElementInst = null;\n lastSelection = null;\n break;\n \n@@ -217,7 +213,7 @@ var SelectEventPlugin = {\n return null;\n },\n \n- didPutListener: function(id, registrationName, listener) {\n+ didPutListener: function(inst, registrationName, listener) {\n if (registrationName === ON_SELECT_KEY) {\n hasListener = true;\n }\ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/SimpleEventPlugin.js b\/src\/renderers\/dom\/client\/eventPlugins\/SimpleEventPlugin.js\nindex 1009a12fa2..2ac7117b09 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/SimpleEventPlugin.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/SimpleEventPlugin.js\n@@ -14,7 +14,7 @@\n var EventConstants = require('EventConstants');\n var EventListener = require('EventListener');\n var EventPropagators = require('EventPropagators');\n-var ReactMount = require('ReactMount');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var SyntheticClipboardEvent = require('SyntheticClipboardEvent');\n var SyntheticEvent = require('SyntheticEvent');\n var SyntheticFocusEvent = require('SyntheticFocusEvent');\n@@ -457,20 +457,11 @@ var SimpleEventPlugin = {\n \n eventTypes: eventTypes,\n \n- \/**\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n- * @see {EventPluginHub.extractEvents}\n- *\/\n extractEvents: function(\n- topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n- nativeEvent,\n- nativeEventTarget\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget\n ) {\n var dispatchConfig = topLevelEventsToDispatchConfig[topLevelType];\n if (!dispatchConfig) {\n@@ -511,7 +502,7 @@ var SimpleEventPlugin = {\n EventConstructor = SyntheticEvent;\n break;\n case topLevelTypes.topKeyPress:\n- \/\/ FireFox creates a keypress event for function keys too. This removes\n+ \/\/ Firefox creates a keypress event for function keys too. This removes\n \/\/ the unwanted keypress events. Enter is however both printable and\n \/\/ non-printable. One would expect Tab to be as well (but it isn't).\n if (getEventCharCode(nativeEvent) === 0) {\n@@ -577,7 +568,7 @@ var SimpleEventPlugin = {\n );\n var event = EventConstructor.getPooled(\n dispatchConfig,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -585,13 +576,14 @@ var SimpleEventPlugin = {\n return event;\n },\n \n- didPutListener: function(id, registrationName, listener) {\n+ didPutListener: function(inst, registrationName, listener) {\n \/\/ Mobile Safari does not fire properly bubble click events on\n \/\/ non-interactive elements, which means delegated click listeners do not\n \/\/ fire. The workaround for this bug involves attaching an empty click\n \/\/ listener on the target node.\n if (registrationName === ON_CLICK_KEY) {\n- var node = ReactMount.getNode(id);\n+ var id = inst._rootNodeID;\n+ var node = ReactDOMComponentTree.getNodeFromInstance(inst);\n if (!onClickListeners[id]) {\n onClickListeners[id] = EventListener.listen(\n node,\n@@ -602,8 +594,9 @@ var SimpleEventPlugin = {\n }\n },\n \n- willDeleteListener: function(id, registrationName) {\n+ willDeleteListener: function(inst, registrationName) {\n if (registrationName === ON_CLICK_KEY) {\n+ var id = inst._rootNodeID;\n onClickListeners[id].remove();\n delete onClickListeners[id];\n }\ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/TapEventPlugin.js b\/src\/renderers\/dom\/client\/eventPlugins\/TapEventPlugin.js\nindex 794d5ee8ba..18140b2025 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/TapEventPlugin.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/TapEventPlugin.js\n@@ -89,20 +89,12 @@ var TapEventPlugin = {\n \n eventTypes: eventTypes,\n \n- \/**\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n- * @see {EventPluginHub.extractEvents}\n- *\/\n extractEvents: function(\n- topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n- nativeEvent,\n- nativeEventTarget) {\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget\n+ ) {\n if (!isStartish(topLevelType) && !isEndish(topLevelType)) {\n return null;\n }\n@@ -122,7 +114,7 @@ var TapEventPlugin = {\n if (isEndish(topLevelType) && distance < tapMoveThreshold) {\n event = SyntheticUIEvent.getPooled(\n eventTypes.touchTap,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n );\ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/EnterLeaveEventPlugin-test.js b\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/EnterLeaveEventPlugin-test.js\nindex 5d3afd3ee8..21d588f7f4 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/EnterLeaveEventPlugin-test.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/EnterLeaveEventPlugin-test.js\n@@ -15,7 +15,7 @@ var EnterLeaveEventPlugin;\n var EventConstants;\n var React;\n var ReactDOM;\n-var ReactMount;\n+var ReactDOMComponentTree;\n \n var topLevelTypes;\n \n@@ -27,7 +27,7 @@ describe('EnterLeaveEventPlugin', function() {\n EventConstants = require('EventConstants');\n React = require('React');\n ReactDOM = require('ReactDOM');\n- ReactMount = require('ReactMount');\n+ ReactDOMComponentTree = require('ReactDOMComponentTree');\n \n topLevelTypes = EventConstants.topLevelTypes;\n });\n@@ -48,8 +48,7 @@ describe('EnterLeaveEventPlugin', function() {\n \n var extracted = EnterLeaveEventPlugin.extractEvents(\n topLevelTypes.topMouseOver,\n- div,\n- ReactMount.getID(div),\n+ ReactDOMComponentTree.getInstanceFromNode(div),\n {target: div},\n div\n );\ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/SelectEventPlugin-test.js b\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/SelectEventPlugin-test.js\nindex e9b8be7347..ef845a0670 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/SelectEventPlugin-test.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/SelectEventPlugin-test.js\n@@ -14,7 +14,7 @@\n var EventConstants;\n var React;\n var ReactDOM;\n-var ReactMount;\n+var ReactDOMComponentTree;\n var ReactTestUtils;\n var SelectEventPlugin;\n \n@@ -24,8 +24,7 @@ describe('SelectEventPlugin', function() {\n function extract(node, topLevelEvent) {\n return SelectEventPlugin.extractEvents(\n topLevelEvent,\n- node,\n- ReactMount.getID(node),\n+ ReactDOMComponentTree.getInstanceFromNode(node),\n {target: node},\n node\n );\n@@ -35,7 +34,7 @@ describe('SelectEventPlugin', function() {\n EventConstants = require('EventConstants');\n React = require('React');\n ReactDOM = require('ReactDOM');\n- ReactMount = require('ReactMount');\n+ ReactDOMComponentTree = require('ReactDOMComponentTree');\n ReactTestUtils = require('ReactTestUtils');\n SelectEventPlugin = require('SelectEventPlugin');\n \ndiff --git a\/src\/renderers\/dom\/client\/findDOMNode.js b\/src\/renderers\/dom\/client\/findDOMNode.js\nindex 27e8c40ca8..9ea1657997 100644\n--- a\/src\/renderers\/dom\/client\/findDOMNode.js\n+++ b\/src\/renderers\/dom\/client\/findDOMNode.js\n@@ -13,27 +13,13 @@\n 'use strict';\n \n var ReactCurrentOwner = require('ReactCurrentOwner');\n-var ReactDOMComponent = require('ReactDOMComponent');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactInstanceMap = require('ReactInstanceMap');\n-var ReactNodeTypes = require('ReactNodeTypes');\n \n+var getNativeComponentFromComposite = require('getNativeComponentFromComposite');\n var invariant = require('invariant');\n var warning = require('warning');\n \n-function getNativeComponentFromComposite(inst) {\n- var type;\n-\n- while ((type = inst._renderedNodeType) === ReactNodeTypes.COMPOSITE) {\n- inst = inst._renderedComponent;\n- }\n-\n- if (type === ReactNodeTypes.NATIVE) {\n- return inst._renderedComponent;\n- } else if (type === ReactNodeTypes.EMPTY) {\n- return null;\n- }\n-}\n-\n \/**\n * Returns the DOM node rendered by this element.\n *\n@@ -66,7 +52,7 @@ function findDOMNode(componentOrElement) {\n var inst = ReactInstanceMap.get(componentOrElement);\n if (inst) {\n inst = getNativeComponentFromComposite(inst);\n- return inst ? ReactDOMComponent.getNodeFromInstance(inst) : null;\n+ return inst ? ReactDOMComponentTree.getNodeFromInstance(inst) : null;\n }\n \n if (typeof componentOrElement.render === 'function') {\ndiff --git a\/src\/renderers\/dom\/client\/syntheticEvents\/SyntheticEvent.js b\/src\/renderers\/dom\/client\/syntheticEvents\/SyntheticEvent.js\nindex fe76ae7c03..eff39b69f8 100644\n--- a\/src\/renderers\/dom\/client\/syntheticEvents\/SyntheticEvent.js\n+++ b\/src\/renderers\/dom\/client\/syntheticEvents\/SyntheticEvent.js\n@@ -50,12 +50,13 @@ var EventInterface = {\n * DOM interface; custom application-specific events can also subclass this.\n *\n * @param {object} dispatchConfig Configuration used to dispatch this event.\n- * @param {string} dispatchMarker Marker identifying the event target.\n+ * @param {*} targetInst Marker identifying the event target.\n * @param {object} nativeEvent Native browser event.\n *\/\n-function SyntheticEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {\n+function SyntheticEvent(dispatchConfig, targetInst, nativeEvent, nativeEventTarget) {\n this.dispatchConfig = dispatchConfig;\n- this.dispatchMarker = dispatchMarker;\n+ this._targetInst = targetInst;\n+\n this.nativeEvent = nativeEvent;\n this.target = nativeEventTarget;\n this.currentTarget = nativeEventTarget;\n@@ -158,7 +159,7 @@ assign(SyntheticEvent.prototype, {\n this[propName] = null;\n }\n this.dispatchConfig = null;\n- this.dispatchMarker = null;\n+ this._targetInst = null;\n this.nativeEvent = null;\n },\n \ndiff --git a\/src\/renderers\/dom\/client\/wrappers\/AutoFocusUtils.js b\/src\/renderers\/dom\/client\/wrappers\/AutoFocusUtils.js\nindex 0cc675d3e4..be865e4a82 100644\n--- a\/src\/renderers\/dom\/client\/wrappers\/AutoFocusUtils.js\n+++ b\/src\/renderers\/dom\/client\/wrappers\/AutoFocusUtils.js\n@@ -12,13 +12,13 @@\n \n 'use strict';\n \n-var ReactMount = require('ReactMount');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n \n var focusNode = require('focusNode');\n \n var AutoFocusUtils = {\n focusDOMComponent: function() {\n- focusNode(ReactMount.getNode(this._rootNodeID));\n+ focusNode(ReactDOMComponentTree.getNodeFromInstance(this));\n },\n };\n \ndiff --git a\/src\/renderers\/dom\/client\/wrappers\/ReactDOMInput.js b\/src\/renderers\/dom\/client\/wrappers\/ReactDOMInput.js\nindex 0633add1fa..682a34961a 100644\n--- a\/src\/renderers\/dom\/client\/wrappers\/ReactDOMInput.js\n+++ b\/src\/renderers\/dom\/client\/wrappers\/ReactDOMInput.js\n@@ -11,9 +11,9 @@\n \n 'use strict';\n \n-var ReactDOMIDOperations = require('ReactDOMIDOperations');\n+var DOMPropertyOperations = require('DOMPropertyOperations');\n var LinkedValueUtils = require('LinkedValueUtils');\n-var ReactMount = require('ReactMount');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactUpdates = require('ReactUpdates');\n \n var assign = require('Object.assign');\n@@ -131,8 +131,8 @@ var ReactDOMInput = {\n \/\/ TODO: Shouldn't this be getChecked(props)?\n var checked = props.checked;\n if (checked != null) {\n- ReactDOMIDOperations.updatePropertyByID(\n- inst._rootNodeID,\n+ DOMPropertyOperations.setValueForProperty(\n+ ReactDOMComponentTree.getNodeFromInstance(inst),\n 'checked',\n checked || false\n );\n@@ -142,8 +142,8 @@ var ReactDOMInput = {\n if (value != null) {\n \/\/ Cast `value` to a string to ensure the value is set correctly. While\n \/\/ browsers typically do this as necessary, jsdom doesn't.\n- ReactDOMIDOperations.updatePropertyByID(\n- inst._rootNodeID,\n+ DOMPropertyOperations.setValueForProperty(\n+ ReactDOMComponentTree.getNodeFromInstance(inst),\n 'value',\n '' + value\n );\n@@ -163,7 +163,7 @@ function _handleChange(event) {\n \n var name = props.name;\n if (props.type === 'radio' && name != null) {\n- var rootNode = ReactMount.getNode(this._rootNodeID);\n+ var rootNode = ReactDOMComponentTree.getNodeFromInstance(this);\n var queryRoot = rootNode;\n \n while (queryRoot.parentNode) {\n@@ -188,19 +188,13 @@ function _handleChange(event) {\n \/\/ This will throw if radio buttons rendered by different copies of React\n \/\/ and the same name are rendered into the same form (same as #1939).\n \/\/ That's probably okay; we don't support it just as we don't support\n- \/\/ mixing React with non-React.\n- var otherID = ReactMount.getID(otherNode);\n+ \/\/ mixing React radio buttons with non-React ones.\n+ var otherInstance = ReactDOMComponentTree.getInstanceFromNode(otherNode);\n invariant(\n- otherID,\n+ otherInstance,\n 'ReactDOMInput: Mixing React and non-React radio inputs with the ' +\n 'same `name` is not supported.'\n );\n- var otherInstance = instancesByReactID[otherID];\n- invariant(\n- otherInstance,\n- 'ReactDOMInput: Unknown radio button ID %s.',\n- otherID\n- );\n \/\/ If this is a controlled radio button group, forcing the input that\n \/\/ was previously checked to update will cause it to be come re-checked\n \/\/ as appropriate.\ndiff --git a\/src\/renderers\/dom\/client\/wrappers\/ReactDOMSelect.js b\/src\/renderers\/dom\/client\/wrappers\/ReactDOMSelect.js\nindex c8d12eb969..bf36fc19c2 100644\n--- a\/src\/renderers\/dom\/client\/wrappers\/ReactDOMSelect.js\n+++ b\/src\/renderers\/dom\/client\/wrappers\/ReactDOMSelect.js\n@@ -12,7 +12,7 @@\n 'use strict';\n \n var LinkedValueUtils = require('LinkedValueUtils');\n-var ReactMount = require('ReactMount');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactUpdates = require('ReactUpdates');\n \n var assign = require('Object.assign');\n@@ -112,7 +112,7 @@ function checkSelectPropTypes(inst, props) {\n *\/\n function updateOptions(inst, multiple, propValue) {\n var selectedValue, i;\n- var options = ReactMount.getNode(inst._rootNodeID).options;\n+ var options = ReactDOMComponentTree.getNodeFromInstance(inst).options;\n \n if (multiple) {\n selectedValue = {};\ndiff --git a\/src\/renderers\/dom\/client\/wrappers\/ReactDOMTextarea.js b\/src\/renderers\/dom\/client\/wrappers\/ReactDOMTextarea.js\nindex 5ed8dbae32..b206c57d6c 100644\n--- a\/src\/renderers\/dom\/client\/wrappers\/ReactDOMTextarea.js\n+++ b\/src\/renderers\/dom\/client\/wrappers\/ReactDOMTextarea.js\n@@ -11,8 +11,9 @@\n \n 'use strict';\n \n+var DOMPropertyOperations = require('DOMPropertyOperations');\n var LinkedValueUtils = require('LinkedValueUtils');\n-var ReactDOMIDOperations = require('ReactDOMIDOperations');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactUpdates = require('ReactUpdates');\n \n var assign = require('Object.assign');\n@@ -144,8 +145,8 @@ var ReactDOMTextarea = {\n if (value != null) {\n \/\/ Cast `value` to a string to ensure the value is set correctly. While\n \/\/ browsers typically do this as necessary, jsdom doesn't.\n- ReactDOMIDOperations.updatePropertyByID(\n- inst._rootNodeID,\n+ DOMPropertyOperations.setValueForProperty(\n+ ReactDOMComponentTree.getNodeFromInstance(inst),\n 'value',\n '' + value\n );\ndiff --git a\/src\/renderers\/dom\/server\/ReactServerRendering.js b\/src\/renderers\/dom\/server\/ReactServerRendering.js\nindex ec543920c7..c80c1dad95 100644\n--- a\/src\/renderers\/dom\/server\/ReactServerRendering.js\n+++ b\/src\/renderers\/dom\/server\/ReactServerRendering.js\n@@ -11,15 +11,14 @@\n *\/\n 'use strict';\n \n+var ReactDOMContainerInfo = require('ReactDOMContainerInfo');\n var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy');\n var ReactElement = require('ReactElement');\n-var ReactInstanceHandles = require('ReactInstanceHandles');\n var ReactMarkupChecksum = require('ReactMarkupChecksum');\n var ReactServerBatchingStrategy = require('ReactServerBatchingStrategy');\n var ReactServerRenderingTransaction =\n require('ReactServerRenderingTransaction');\n var ReactUpdates = require('ReactUpdates');\n-var ServerReactRootIndex = require('ServerReactRootIndex');\n \n var emptyObject = require('emptyObject');\n var instantiateReactComponent = require('instantiateReactComponent');\n@@ -39,18 +38,14 @@ function renderToStringImpl(element, makeStaticMarkup) {\n try {\n ReactUpdates.injection.injectBatchingStrategy(ReactServerBatchingStrategy);\n \n- var id = ReactInstanceHandles.createReactRootID(\n- ServerReactRootIndex.createReactRootIndex()\n- );\n transaction = ReactServerRenderingTransaction.getPooled(makeStaticMarkup);\n \n return transaction.perform(function() {\n var componentInstance = instantiateReactComponent(element, null);\n var markup = componentInstance.mountComponent(\n- id,\n transaction,\n null,\n- null,\n+ ReactDOMContainerInfo(),\n emptyObject\n );\n if (!makeStaticMarkup) {\ndiff --git a\/src\/renderers\/dom\/server\/ServerReactRootIndex.js b\/src\/renderers\/dom\/server\/ServerReactRootIndex.js\ndeleted file mode 100644\nindex 5341ccdeb2..0000000000\n--- a\/src\/renderers\/dom\/server\/ServerReactRootIndex.js\n+++ \/dev\/null\n@@ -1,29 +0,0 @@\n-\/**\n- * Copyright 2013-2015, Facebook, Inc.\n- * All rights reserved.\n- *\n- * This source code is licensed under the BSD-style license found in the\n- * LICENSE file in the root directory of this source tree. An additional grant\n- * of patent rights can be found in the PATENTS file in the same directory.\n- *\n- * @providesModule ServerReactRootIndex\n- * @typechecks\n- *\/\n-\n-'use strict';\n-\n-\/**\n- * Size of the reactRoot ID space. We generate random numbers for React root\n- * IDs and if there's a collision the events and DOM update system will\n- * get confused. In the future we need a way to generate GUIDs but for\n- * now this will work on a smaller scale.\n- *\/\n-var GLOBAL_MOUNT_POINT_MAX = Math.pow(2, 53);\n-\n-var ServerReactRootIndex = {\n- createReactRootIndex: function() {\n- return Math.ceil(Math.random() * GLOBAL_MOUNT_POINT_MAX);\n- },\n-};\n-\n-module.exports = ServerReactRootIndex;\ndiff --git a\/src\/renderers\/dom\/server\/__tests__\/ReactServerRendering-test.js b\/src\/renderers\/dom\/server\/__tests__\/ReactServerRendering-test.js\nindex 83c54a8741..2462d7e853 100644\n--- a\/src\/renderers\/dom\/server\/__tests__\/ReactServerRendering-test.js\n+++ b\/src\/renderers\/dom\/server\/__tests__\/ReactServerRendering-test.js\n@@ -20,6 +20,7 @@ var ReactTestUtils;\n var ReactServerRendering;\n \n var ID_ATTRIBUTE_NAME;\n+var ROOT_ATTRIBUTE_NAME;\n \n describe('ReactServerRendering', function() {\n beforeEach(function() {\n@@ -36,7 +37,7 @@ describe('ReactServerRendering', function() {\n \n var DOMProperty = require('DOMProperty');\n ID_ATTRIBUTE_NAME = DOMProperty.ID_ATTRIBUTE_NAME;\n- spyOn(console, 'error');\n+ ROOT_ATTRIBUTE_NAME = DOMProperty.ROOT_ATTRIBUTE_NAME;\n });\n \n describe('renderToString', function() {\n@@ -45,7 +46,8 @@ describe('ReactServerRendering', function() {\n <span>hello world<\/span>\n );\n expect(response).toMatch(\n- '<span ' + ID_ATTRIBUTE_NAME + '=\"[^\"]+\" ' +\n+ '<span ' + ROOT_ATTRIBUTE_NAME + '=\"\" ' +\n+ ID_ATTRIBUTE_NAME + '=\"[^\"]+\" ' +\n ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '=\"[^\"]+\">hello world<\/span>'\n );\n });\n@@ -55,7 +57,8 @@ describe('ReactServerRendering', function() {\n <img \/>\n );\n expect(response).toMatch(\n- '<img ' + ID_ATTRIBUTE_NAME + '=\"[^\"]+\" ' +\n+ '<img ' + ROOT_ATTRIBUTE_NAME + '=\"\" ' +\n+ ID_ATTRIBUTE_NAME + '=\"[^\"]+\" ' +\n ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '=\"[^\"]+\"\/>'\n );\n });\n@@ -65,7 +68,8 @@ describe('ReactServerRendering', function() {\n <img data-attr=\">\" \/>\n );\n expect(response).toMatch(\n- '<img data-attr=\">\" ' + ID_ATTRIBUTE_NAME + '=\"[^\"]+\" ' +\n+ '<img data-attr=\">\" ' + ROOT_ATTRIBUTE_NAME + '=\"\" ' +\n+ ID_ATTRIBUTE_NAME + '=\"[^\"]+\" ' +\n ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '=\"[^\"]+\"\/>'\n );\n });\n@@ -95,7 +99,8 @@ describe('ReactServerRendering', function() {\n <Parent \/>\n );\n expect(response).toMatch(\n- '<div ' + ID_ATTRIBUTE_NAME + '=\"[^\"]+\" ' +\n+ '<div ' + ROOT_ATTRIBUTE_NAME + '=\"\" ' +\n+ ID_ATTRIBUTE_NAME + '=\"[^\"]+\" ' +\n ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '=\"[^\"]+\">' +\n '<span ' + ID_ATTRIBUTE_NAME + '=\"[^\"]+\">' +\n '<span ' + ID_ATTRIBUTE_NAME + '=\"[^\"]+\">My name is <\/span>' +\n@@ -145,7 +150,8 @@ describe('ReactServerRendering', function() {\n );\n \n expect(response).toMatch(\n- '<span ' + ID_ATTRIBUTE_NAME + '=\"[^\"]+\" ' +\n+ '<span ' + ROOT_ATTRIBUTE_NAME + '=\"\" ' +\n+ ID_ATTRIBUTE_NAME + '=\"[^\"]+\" ' +\n ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '=\"[^\"]+\">' +\n '<span ' + ID_ATTRIBUTE_NAME + '=\"[^\"]+\">Component name: <\/span>' +\n '<span ' + ID_ATTRIBUTE_NAME + '=\"[^\"]+\">TestComponent<\/span>' +\n@@ -225,6 +231,7 @@ describe('ReactServerRendering', function() {\n \/\/ Now simulate a situation where the app is not idempotent. React should\n \/\/ warn but do the right thing.\n element.innerHTML = lastMarkup;\n+ spyOn(console, 'error');\n var instance = ReactDOM.render(<TestComponent name=\"y\" \/>, element);\n expect(mountCount).toEqual(4);\n expect(console.error.argsForCall.length).toBe(1);\ndiff --git a\/src\/renderers\/dom\/shared\/CSSPropertyOperations.js b\/src\/renderers\/dom\/shared\/CSSPropertyOperations.js\nindex af79e74f8c..178de629d8 100644\n--- a\/src\/renderers\/dom\/shared\/CSSPropertyOperations.js\n+++ b\/src\/renderers\/dom\/shared\/CSSPropertyOperations.js\n@@ -140,7 +140,8 @@ var CSSPropertyOperations = {\n }\n if (styleValue != null) {\n serialized += processStyleName(styleName) + ':';\n- serialized += dangerousStyleValue(styleName, styleValue, component) + ';';\n+ serialized +=\n+ dangerousStyleValue(styleName, styleValue, component) + ';';\n }\n }\n return serialized || null;\n@@ -153,7 +154,7 @@ var CSSPropertyOperations = {\n * @param {DOMElement} node\n * @param {object} styles\n *\/\n- setValueForStyles: function(node, styles) {\n+ setValueForStyles: function(node, styles, component) {\n var style = node.style;\n for (var styleName in styles) {\n if (!styles.hasOwnProperty(styleName)) {\n@@ -162,7 +163,11 @@ var CSSPropertyOperations = {\n if (__DEV__) {\n warnValidStyle(styleName, styles[styleName]);\n }\n- var styleValue = dangerousStyleValue(styleName, styles[styleName]);\n+ var styleValue = dangerousStyleValue(\n+ styleName,\n+ styles[styleName],\n+ component\n+ );\n if (styleName === 'float') {\n styleName = styleFloatAccessor;\n }\ndiff --git a\/src\/renderers\/dom\/shared\/DOMProperty.js b\/src\/renderers\/dom\/shared\/DOMProperty.js\nindex 69c18dd56e..2da8d2d651 100644\n--- a\/src\/renderers\/dom\/shared\/DOMProperty.js\n+++ b\/src\/renderers\/dom\/shared\/DOMProperty.js\n@@ -167,6 +167,7 @@ var defaultValueCache = {};\n var DOMProperty = {\n \n ID_ATTRIBUTE_NAME: 'data-reactid',\n+ ROOT_ATTRIBUTE_NAME: 'data-reactroot',\n \n \/**\n * Map from property \"standard name\" to an object with info about how to set\ndiff --git a\/src\/renderers\/dom\/shared\/DOMPropertyOperations.js b\/src\/renderers\/dom\/shared\/DOMPropertyOperations.js\nindex 00aa1a5e56..092ea8af2b 100644\n--- a\/src\/renderers\/dom\/shared\/DOMPropertyOperations.js\n+++ b\/src\/renderers\/dom\/shared\/DOMPropertyOperations.js\n@@ -125,6 +125,14 @@ var DOMPropertyOperations = {\n node.setAttribute(DOMProperty.ID_ATTRIBUTE_NAME, id);\n },\n \n+ createMarkupForRoot: function() {\n+ return DOMProperty.ROOT_ATTRIBUTE_NAME + '=\"\"';\n+ },\n+\n+ setAttributeForRoot: function(node) {\n+ node.setAttribute(DOMProperty.ROOT_ATTRIBUTE_NAME, '');\n+ },\n+\n \/**\n * Creates markup for a property.\n *\ndiff --git a\/src\/renderers\/dom\/shared\/ReactComponentBrowserEnvironment.js b\/src\/renderers\/dom\/shared\/ReactComponentBrowserEnvironment.js\nindex 3f31a52a21..d10cca3054 100644\n--- a\/src\/renderers\/dom\/shared\/ReactComponentBrowserEnvironment.js\n+++ b\/src\/renderers\/dom\/shared\/ReactComponentBrowserEnvironment.js\n@@ -13,7 +13,6 @@\n \n var DOMChildrenOperations = require('DOMChildrenOperations');\n var ReactDOMIDOperations = require('ReactDOMIDOperations');\n-var ReactMount = require('ReactMount');\n var ReactPerf = require('ReactPerf');\n \n \/**\n@@ -37,7 +36,6 @@ var ReactComponentBrowserEnvironment = {\n * @private\n *\/\n unmountIDFromEnvironment: function(rootNodeID) {\n- ReactMount.purgeID(rootNodeID);\n },\n \n };\ndiff --git a\/src\/renderers\/dom\/shared\/ReactDOMComponent.js b\/src\/renderers\/dom\/shared\/ReactDOMComponent.js\nindex 75f404a1bd..97f6e2b1bb 100644\n--- a\/src\/renderers\/dom\/shared\/ReactDOMComponent.js\n+++ b\/src\/renderers\/dom\/shared\/ReactDOMComponent.js\n@@ -27,11 +27,12 @@ var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');\n var ReactComponentBrowserEnvironment =\n require('ReactComponentBrowserEnvironment');\n var ReactDOMButton = require('ReactDOMButton');\n+var ReactDOMComponentFlags = require('ReactDOMComponentFlags');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactDOMInput = require('ReactDOMInput');\n var ReactDOMOption = require('ReactDOMOption');\n var ReactDOMSelect = require('ReactDOMSelect');\n var ReactDOMTextarea = require('ReactDOMTextarea');\n-var ReactMount = require('ReactMount');\n var ReactMultiChild = require('ReactMultiChild');\n var ReactPerf = require('ReactPerf');\n var ReactUpdateQueue = require('ReactUpdateQueue');\n@@ -46,7 +47,9 @@ var shallowEqual = require('shallowEqual');\n var validateDOMNesting = require('validateDOMNesting');\n var warning = require('warning');\n \n+var Flags = ReactDOMComponentFlags;\n var deleteListener = EventPluginHub.deleteListener;\n+var getNode = ReactDOMComponentTree.getNodeFromInstance;\n var listenTo = ReactBrowserEventEmitter.listenTo;\n var registrationNameModules = EventPluginRegistry.registrationNameModules;\n \n@@ -57,8 +60,6 @@ var CHILDREN = keyOf({children: null});\n var STYLE = keyOf({style: null});\n var HTML = keyOf({__html: null});\n \n-var ELEMENT_NODE_TYPE = 1;\n-\n function getDeclarationErrorAddendum(internalInstance) {\n if (internalInstance) {\n var owner = internalInstance._currentElement._owner || null;\n@@ -78,7 +79,7 @@ if (__DEV__) {\n props: {\n enumerable: false,\n get: function() {\n- var component = this._reactInternalComponent;\n+ var component = ReactDOMComponentTree.getInstanceFromNode(this);\n warning(\n false,\n 'ReactDOMComponent: Do not access .props of a DOM node; instead, ' +\n@@ -95,7 +96,7 @@ if (__DEV__) {\n \n function legacyGetDOMNode() {\n if (__DEV__) {\n- var component = this._reactInternalComponent;\n+ var component = ReactDOMComponentTree.getInstanceFromNode(this);\n warning(\n false,\n 'ReactDOMComponent: Do not access .getDOMNode() of a DOM node; ' +\n@@ -107,7 +108,7 @@ function legacyGetDOMNode() {\n }\n \n function legacyIsMounted() {\n- var component = this._reactInternalComponent;\n+ var component = ReactDOMComponentTree.getInstanceFromNode(this);\n if (__DEV__) {\n warning(\n false,\n@@ -120,7 +121,7 @@ function legacyIsMounted() {\n \n function legacySetStateEtc() {\n if (__DEV__) {\n- var component = this._reactInternalComponent;\n+ var component = ReactDOMComponentTree.getInstanceFromNode(this);\n warning(\n false,\n 'ReactDOMComponent: Do not access .setState(), .replaceState(), or ' +\n@@ -131,7 +132,7 @@ function legacySetStateEtc() {\n }\n \n function legacySetProps(partialProps, callback) {\n- var component = this._reactInternalComponent;\n+ var component = ReactDOMComponentTree.getInstanceFromNode(this);\n if (__DEV__) {\n warning(\n false,\n@@ -150,7 +151,7 @@ function legacySetProps(partialProps, callback) {\n }\n \n function legacyReplaceProps(partialProps, callback) {\n- var component = this._reactInternalComponent;\n+ var component = ReactDOMComponentTree.getInstanceFromNode(this);\n if (__DEV__) {\n warning(\n false,\n@@ -290,7 +291,7 @@ function assertValidProps(component, props) {\n );\n }\n \n-function enqueuePutListener(id, registrationName, listener, transaction) {\n+function enqueuePutListener(inst, registrationName, listener, transaction) {\n if (__DEV__) {\n \/\/ IE8 has no API for event capturing and the `onScroll` event doesn't\n \/\/ bubble.\n@@ -299,15 +300,15 @@ function enqueuePutListener(id, registrationName, listener, transaction) {\n 'This browser doesn\\'t support the `onScroll` event'\n );\n }\n- var container = ReactMount.findReactContainerForID(id);\n- if (container) {\n- var doc = container.nodeType === ELEMENT_NODE_TYPE ?\n- container.ownerDocument :\n- container;\n- listenTo(registrationName, doc);\n+ var containerInfo = inst._nativeContainerInfo;\n+ var doc = containerInfo._ownerDocument;\n+ if (!doc) {\n+ \/\/ Server rendering.\n+ return;\n }\n+ listenTo(registrationName, doc);\n transaction.getReactMountReady().enqueue(putListener, {\n- id: id,\n+ inst: inst,\n registrationName: registrationName,\n listener: listener,\n });\n@@ -316,7 +317,7 @@ function enqueuePutListener(id, registrationName, listener, transaction) {\n function putListener() {\n var listenerToPut = this;\n EventPluginHub.putListener(\n- listenerToPut.id,\n+ listenerToPut.inst,\n listenerToPut.registrationName,\n listenerToPut.listener\n );\n@@ -493,13 +494,7 @@ function isCustomComponent(tagName, props) {\n return tagName.indexOf('-') >= 0 || props.is != null;\n }\n \n-function getNode(inst) {\n- if (inst._nativeNode) {\n- return inst._nativeNode;\n- } else {\n- return inst._nativeNode = ReactMount.getNode(inst._rootNodeID);\n- }\n-}\n+var globalIdCounter = 1;\n \n \/**\n * Creates a new React class that is idempotent and capable of containing other\n@@ -523,11 +518,13 @@ function ReactDOMComponent(tag) {\n this._previousStyle = null;\n this._previousStyleCopy = null;\n this._nativeNode = null;\n+ this._nativeParent = null;\n this._rootNodeID = null;\n+ this._domID = null;\n this._nativeContainerInfo = null;\n this._wrapperState = null;\n this._topLevelWrapper = null;\n- this._nodeHasLegacyProperties = false;\n+ this._flags = 0;\n if (__DEV__) {\n this._ancestorInfo = null;\n }\n@@ -546,7 +543,6 @@ ReactDOMComponent.Mixin = {\n * is not idempotent.\n *\n * @internal\n- * @param {string} rootID The root DOM ID for this node.\n * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction\n * @param {?ReactDOMComponent} the containing DOM component instance\n * @param {?object} info about the native container\n@@ -554,13 +550,14 @@ ReactDOMComponent.Mixin = {\n * @return {string} The computed markup.\n *\/\n mountComponent: function(\n- rootID,\n transaction,\n nativeParent,\n nativeContainerInfo,\n context\n ) {\n- this._rootNodeID = rootID;\n+ this._rootNodeID = globalIdCounter++;\n+ this._domID = nativeContainerInfo._idCounter++;\n+ this._nativeParent = nativeParent;\n this._nativeContainerInfo = nativeContainerInfo;\n \n var props = this._currentElement.props;\n@@ -609,7 +606,7 @@ ReactDOMComponent.Mixin = {\n if (nativeParent != null) {\n namespaceURI = nativeParent._namespaceURI;\n parentTag = nativeParent._tag;\n- } else if (nativeContainerInfo != null) {\n+ } else if (nativeContainerInfo._tag) {\n namespaceURI = nativeContainerInfo._namespaceURI;\n parentTag = nativeContainerInfo._tag;\n }\n@@ -630,7 +627,7 @@ ReactDOMComponent.Mixin = {\n var parentInfo;\n if (nativeParent != null) {\n parentInfo = nativeParent._ancestorInfo;\n- } else if (nativeContainerInfo != null) {\n+ } else if (nativeContainerInfo._tag) {\n parentInfo = nativeContainerInfo._ancestorInfo;\n }\n if (parentInfo) {\n@@ -663,10 +660,11 @@ ReactDOMComponent.Mixin = {\n this._currentElement.type\n );\n }\n- this._nativeNode = el;\n- DOMPropertyOperations.setAttributeForID(el, this._rootNodeID);\n- \/\/ Populate node cache\n- ReactMount.getID(el);\n+ ReactDOMComponentTree.precacheNode(this, el);\n+ this._flags |= Flags.hasCachedChildNodes;\n+ if (!this._nativeParent) {\n+ DOMPropertyOperations.setAttributeForRoot(el);\n+ }\n this._updateDOMProperties(null, props, transaction);\n var lazyTree = DOMLazyTree(el);\n this._createInitialChildren(transaction, props, context, lazyTree);\n@@ -730,7 +728,7 @@ ReactDOMComponent.Mixin = {\n }\n if (registrationNameModules.hasOwnProperty(propKey)) {\n if (propValue) {\n- enqueuePutListener(this._rootNodeID, propKey, propValue, transaction);\n+ enqueuePutListener(this, propKey, propValue, transaction);\n }\n } else {\n if (propKey === STYLE) {\n@@ -763,8 +761,11 @@ ReactDOMComponent.Mixin = {\n return ret;\n }\n \n- var markupForID = DOMPropertyOperations.createMarkupForID(this._rootNodeID);\n- return ret + ' ' + markupForID;\n+ if (!this._nativeParent) {\n+ ret += ' ' + DOMPropertyOperations.createMarkupForRoot();\n+ }\n+ ret += ' ' + DOMPropertyOperations.createMarkupForID(this._domID);\n+ return ret;\n },\n \n \/**\n@@ -907,7 +908,7 @@ ReactDOMComponent.Mixin = {\n context\n );\n \n- if (!canDefineProperty && this._nodeHasLegacyProperties) {\n+ if (!canDefineProperty && this._flags & Flags.nodeHasLegacyProperties) {\n this._nativeNode.props = nextProps;\n }\n \n@@ -958,7 +959,7 @@ ReactDOMComponent.Mixin = {\n \/\/ Only call deleteListener if there was a listener previously or\n \/\/ else willDeleteListener gets called when there wasn't actually a\n \/\/ listener (e.g., onClick={null})\n- deleteListener(this._rootNodeID, propKey);\n+ deleteListener(this, propKey);\n }\n } else if (\n DOMProperty.properties[propKey] ||\n@@ -1013,9 +1014,9 @@ ReactDOMComponent.Mixin = {\n }\n } else if (registrationNameModules.hasOwnProperty(propKey)) {\n if (nextProp) {\n- enqueuePutListener(this._rootNodeID, propKey, nextProp, transaction);\n+ enqueuePutListener(this, propKey, nextProp, transaction);\n } else if (lastProp) {\n- deleteListener(this._rootNodeID, propKey);\n+ deleteListener(this, propKey);\n }\n } else if (isCustomComponent(this._tag, nextProps)) {\n if (propKey === CHILDREN) {\n@@ -1041,7 +1042,11 @@ ReactDOMComponent.Mixin = {\n }\n }\n if (styleUpdates) {\n- CSSPropertyOperations.setValueForStyles(getNode(this), styleUpdates);\n+ CSSPropertyOperations.setValueForStyles(\n+ getNode(this),\n+ styleUpdates,\n+ this\n+ );\n }\n },\n \n@@ -1142,25 +1147,20 @@ ReactDOMComponent.Mixin = {\n break;\n }\n \n- if (this._nodeHasLegacyProperties) {\n- this._nativeNode._reactInternalComponent = null;\n- }\n- this._nativeNode = null;\n-\n+ ReactDOMComponentTree.uncacheNode(this);\n this.unmountChildren();\n- EventPluginHub.deleteAllListeners(this._rootNodeID);\n+ EventPluginHub.deleteAllListeners(this);\n ReactComponentBrowserEnvironment.unmountIDFromEnvironment(this._rootNodeID);\n this._rootNodeID = null;\n+ this._domID = null;\n this._wrapperState = null;\n },\n \n getPublicInstance: function() {\n- if (this._nodeHasLegacyProperties) {\n- return this._nativeNode;\n+ var node = getNode(this);\n+ if (this._flags & Flags.nodeHasLegacyProperties) {\n+ return node;\n } else {\n- var node = getNode(this);\n-\n- node._reactInternalComponent = this;\n node.getDOMNode = legacyGetDOMNode;\n node.isMounted = legacyIsMounted;\n node.setState = legacySetStateEtc;\n@@ -1181,26 +1181,30 @@ ReactDOMComponent.Mixin = {\n node.props = this._currentElement.props;\n }\n \n- this._nodeHasLegacyProperties = true;\n+ this._flags |= Flags.nodeHasLegacyProperties;\n return node;\n }\n },\n \n };\n \n-ReactPerf.measureMethods(ReactDOMComponent, 'ReactDOMComponent', {\n+ReactPerf.measureMethods(ReactDOMComponent.Mixin, 'ReactDOMComponent', {\n mountComponent: 'mountComponent',\n- updateComponent: 'updateComponent',\n+ receiveComponent: 'receiveComponent',\n });\n \n assign(\n ReactDOMComponent.prototype,\n ReactDOMComponent.Mixin,\n- ReactMultiChild.Mixin\n+ ReactMultiChild.Mixin,\n+ {\n+ prepareToManageChildren: function() {\n+ \/\/ Before we add, remove, or reorder the children of a node, make sure\n+ \/\/ we have references to all of its children so we don't lose them, even\n+ \/\/ if nefarious browser plugins add extra nodes to our tree.\n+ ReactDOMComponentTree.precacheChildNodes(this, getNode(this));\n+ },\n+ }\n );\n \n-assign(ReactDOMComponent, {\n- getNodeFromInstance: getNode,\n-});\n-\n module.exports = ReactDOMComponent;\ndiff --git a\/src\/renderers\/dom\/client\/ClientReactRootIndex.js b\/src\/renderers\/dom\/shared\/ReactDOMComponentFlags.js\nsimilarity index 51%\nrename from src\/renderers\/dom\/client\/ClientReactRootIndex.js\nrename to src\/renderers\/dom\/shared\/ReactDOMComponentFlags.js\nindex 7720ba7b7b..2578f90f75 100644\n--- a\/src\/renderers\/dom\/client\/ClientReactRootIndex.js\n+++ b\/src\/renderers\/dom\/shared\/ReactDOMComponentFlags.js\n@@ -1,23 +1,19 @@\n \/**\n- * Copyright 2013-2015, Facebook, Inc.\n+ * Copyright 2015, Facebook, Inc.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n- * @providesModule ClientReactRootIndex\n- * @typechecks\n+ * @providesModule ReactDOMComponentFlags\n *\/\n \n 'use strict';\n \n-var nextReactRootIndex = 0;\n-\n-var ClientReactRootIndex = {\n- createReactRootIndex: function() {\n- return nextReactRootIndex++;\n- },\n+var ReactDOMComponentFlags = {\n+ nodeHasLegacyProperties: 1 << 0,\n+ hasCachedChildNodes: 1 << 1,\n };\n \n-module.exports = ClientReactRootIndex;\n+module.exports = ReactDOMComponentFlags;\ndiff --git a\/src\/renderers\/dom\/shared\/ReactDOMContainerInfo.js b\/src\/renderers\/dom\/shared\/ReactDOMContainerInfo.js\nindex cbee0b5e7d..f0b97c037f 100644\n--- a\/src\/renderers\/dom\/shared\/ReactDOMContainerInfo.js\n+++ b\/src\/renderers\/dom\/shared\/ReactDOMContainerInfo.js\n@@ -15,15 +15,19 @@ var validateDOMNesting = require('validateDOMNesting');\n \n var DOC_NODE_TYPE = 9;\n \n-function ReactDOMContainerInfo(node) {\n+function ReactDOMContainerInfo(topLevelWrapper, node) {\n var info = {\n- _ownerDocument: node.nodeType === DOC_NODE_TYPE ? node : node.ownerDocument,\n- _tag: node.nodeName.toLowerCase(),\n- _namespaceURI: node.namespaceURI,\n+ _topLevelWrapper: topLevelWrapper,\n+ _idCounter: 1,\n+ _ownerDocument: node ?\n+ node.nodeType === DOC_NODE_TYPE ? node : node.ownerDocument :\n+ null,\n+ _tag: node ? node.nodeName.toLowerCase() : null,\n+ _namespaceURI: node ? node.namespaceURI : null,\n };\n if (__DEV__) {\n- info._ancestorInfo =\n- validateDOMNesting.updatedAncestorInfo(null, info._tag, null);\n+ info._ancestorInfo = node ?\n+ validateDOMNesting.updatedAncestorInfo(null, info._tag, null) : null;\n }\n return info;\n }\ndiff --git a\/src\/renderers\/dom\/shared\/ReactDOMTextComponent.js b\/src\/renderers\/dom\/shared\/ReactDOMTextComponent.js\nindex 9858379d04..262748fc6d 100644\n--- a\/src\/renderers\/dom\/shared\/ReactDOMTextComponent.js\n+++ b\/src\/renderers\/dom\/shared\/ReactDOMTextComponent.js\n@@ -15,21 +15,14 @@\n var DOMChildrenOperations = require('DOMChildrenOperations');\n var DOMLazyTree = require('DOMLazyTree');\n var DOMPropertyOperations = require('DOMPropertyOperations');\n-var ReactComponentBrowserEnvironment =\n- require('ReactComponentBrowserEnvironment');\n-var ReactMount = require('ReactMount');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n+var ReactPerf = require('ReactPerf');\n \n var assign = require('Object.assign');\n var escapeTextContentForBrowser = require('escapeTextContentForBrowser');\n var validateDOMNesting = require('validateDOMNesting');\n \n-function getNode(inst) {\n- if (inst._nativeNode) {\n- return inst._nativeNode;\n- } else {\n- return inst._nativeNode = ReactMount.getNode(inst._rootNodeID);\n- }\n-}\n+var getNode = ReactDOMComponentTree.getNodeFromInstance;\n \n \/**\n * Text nodes violate a couple assumptions that React makes about components:\n@@ -61,9 +54,11 @@ assign(ReactDOMTextComponent.prototype, {\n this._currentElement = text;\n this._stringText = '' + text;\n this._nativeNode = null;\n+ \/\/ ReactDOMComponentTree uses this:\n+ this._nativeParent = null;\n \n \/\/ Properties\n- this._rootNodeID = null;\n+ this._domID = null;\n this._mountIndex = 0;\n },\n \n@@ -71,13 +66,11 @@ assign(ReactDOMTextComponent.prototype, {\n * Creates the markup for this text node. This node is not intended to have\n * any features besides containing text content.\n *\n- * @param {string} rootID DOM ID of the root node.\n * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction\n * @return {string} Markup for this text node.\n * @internal\n *\/\n mountComponent: function(\n- rootID,\n transaction,\n nativeParent,\n nativeContainerInfo,\n@@ -97,14 +90,13 @@ assign(ReactDOMTextComponent.prototype, {\n }\n }\n \n- this._rootNodeID = rootID;\n+ var domID = nativeContainerInfo._idCounter++;\n+ this._domID = domID;\n+ this._nativeParent = nativeParent;\n if (transaction.useCreateElement) {\n var ownerDocument = nativeContainerInfo._ownerDocument;\n var el = ownerDocument.createElement('span');\n- this._nativeNode = el;\n- DOMPropertyOperations.setAttributeForID(el, rootID);\n- \/\/ Populate node cache\n- ReactMount.getID(el);\n+ ReactDOMComponentTree.precacheNode(this, el);\n var lazyTree = DOMLazyTree(el);\n DOMLazyTree.queueText(lazyTree, this._stringText);\n return lazyTree;\n@@ -119,7 +111,7 @@ assign(ReactDOMTextComponent.prototype, {\n }\n \n return (\n- '<span ' + DOMPropertyOperations.createMarkupForID(rootID) + '>' +\n+ '<span ' + DOMPropertyOperations.createMarkupForID(domID) + '>' +\n escapedText +\n '<\/span>'\n );\n@@ -152,10 +144,18 @@ assign(ReactDOMTextComponent.prototype, {\n },\n \n unmountComponent: function() {\n- this._nativeNode = null;\n- ReactComponentBrowserEnvironment.unmountIDFromEnvironment(this._rootNodeID);\n+ ReactDOMComponentTree.uncacheNode(this);\n },\n \n });\n \n+ReactPerf.measureMethods(\n+ ReactDOMTextComponent.prototype,\n+ 'ReactDOMTextComponent',\n+ {\n+ mountComponent: 'mountComponent',\n+ receiveComponent: 'receiveComponent',\n+ }\n+);\n+\n module.exports = ReactDOMTextComponent;\ndiff --git a\/src\/renderers\/dom\/shared\/ReactDefaultInjection.js b\/src\/renderers\/dom\/shared\/ReactDefaultInjection.js\nindex 5c6dbb979a..b6f8edd745 100644\n--- a\/src\/renderers\/dom\/shared\/ReactDefaultInjection.js\n+++ b\/src\/renderers\/dom\/shared\/ReactDefaultInjection.js\n@@ -20,17 +20,17 @@ var HTMLDOMPropertyConfig = require('HTMLDOMPropertyConfig');\n var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');\n var ReactComponentBrowserEnvironment =\n require('ReactComponentBrowserEnvironment');\n-var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy');\n var ReactDOMComponent = require('ReactDOMComponent');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n+var ReactDOMTreeTraversal = require('ReactDOMTreeTraversal');\n var ReactDOMTextComponent = require('ReactDOMTextComponent');\n+var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy');\n var ReactEventListener = require('ReactEventListener');\n var ReactInjection = require('ReactInjection');\n-var ReactInstanceHandles = require('ReactInstanceHandles');\n-var ReactMount = require('ReactMount');\n var ReactReconcileTransaction = require('ReactReconcileTransaction');\n+var SVGDOMPropertyConfig = require('SVGDOMPropertyConfig');\n var SelectEventPlugin = require('SelectEventPlugin');\n var SimpleEventPlugin = require('SimpleEventPlugin');\n-var SVGDOMPropertyConfig = require('SVGDOMPropertyConfig');\n \n var alreadyInjected = false;\n \n@@ -51,8 +51,8 @@ function inject() {\n * Inject modules for resolving DOM hierarchy and plugin ordering.\n *\/\n ReactInjection.EventPluginHub.injectEventPluginOrder(DefaultEventPluginOrder);\n- ReactInjection.EventPluginHub.injectInstanceHandle(ReactInstanceHandles);\n- ReactInjection.EventPluginHub.injectMount(ReactMount);\n+ ReactInjection.EventPluginUtils.injectComponentTree(ReactDOMComponentTree);\n+ ReactInjection.EventPluginUtils.injectTreeTraversal(ReactDOMTreeTraversal);\n \n \/**\n * Some important event plugins included by default (without having to require\ndiff --git a\/src\/renderers\/dom\/shared\/ReactInjection.js b\/src\/renderers\/dom\/shared\/ReactInjection.js\nindex dc114c4661..0e8c0dc90e 100644\n--- a\/src\/renderers\/dom\/shared\/ReactInjection.js\n+++ b\/src\/renderers\/dom\/shared\/ReactInjection.js\n@@ -13,6 +13,7 @@\n \n var DOMProperty = require('DOMProperty');\n var EventPluginHub = require('EventPluginHub');\n+var EventPluginUtils = require('EventPluginUtils');\n var ReactComponentEnvironment = require('ReactComponentEnvironment');\n var ReactClass = require('ReactClass');\n var ReactEmptyComponent = require('ReactEmptyComponent');\n@@ -27,6 +28,7 @@ var ReactInjection = {\n DOMProperty: DOMProperty.injection,\n EmptyComponent: ReactEmptyComponent.injection,\n EventPluginHub: EventPluginHub.injection,\n+ EventPluginUtils: EventPluginUtils.injection,\n EventEmitter: ReactBrowserEventEmitter.injection,\n NativeComponent: ReactNativeComponent.injection,\n Perf: ReactPerf.injection,\ndiff --git a\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js b\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js\nindex 5d2999f7de..9f6528c35b 100644\n--- a\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js\n+++ b\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js\n@@ -51,7 +51,7 @@ describe('ReactDOMComponent', function() {\n var stubStyle = container.firstChild.style;\n \n \/\/ set initial style\n- var setup = {display: 'block', left: '1', top: 2, fontFamily: 'Arial'};\n+ var setup = {display: 'block', left: '1px', top: 2, fontFamily: 'Arial'};\n ReactDOM.render(<div style={setup} \/>, container);\n expect(stubStyle.display).toEqual('block');\n expect(stubStyle.left).toEqual('1px');\n@@ -152,7 +152,9 @@ describe('ReactDOMComponent', function() {\n var div = document.createElement('div');\n var One = React.createClass({\n render: function() {\n- return this.props.inline ? <span style={{fontSize: '1'}} \/> : <div style={{fontSize: '1'}} \/>;\n+ return this.props.inline ?\n+ <span style={{fontSize: '1'}} \/> :\n+ <div style={{fontSize: '1'}} \/>;\n },\n });\n var Two = React.createClass({\n@@ -841,7 +843,7 @@ describe('ReactDOMComponent', function() {\n describe('unmountComponent', function() {\n it('should clean up listeners', function() {\n var EventPluginHub = require('EventPluginHub');\n- var ReactMount = require('ReactMount');\n+ var ReactDOMComponentTree = require('ReactDOMComponentTree');\n \n var container = document.createElement('div');\n document.body.appendChild(container);\n@@ -851,16 +853,16 @@ describe('ReactDOMComponent', function() {\n instance = ReactDOM.render(instance, container);\n \n var rootNode = ReactDOM.findDOMNode(instance);\n- var rootNodeID = ReactMount.getID(rootNode);\n+ var inst = ReactDOMComponentTree.getInstanceFromNode(rootNode);\n expect(\n- EventPluginHub.getListener(rootNodeID, 'onClick')\n+ EventPluginHub.getListener(inst, 'onClick')\n ).toBe(callback);\n expect(rootNode).toBe(ReactDOM.findDOMNode(instance));\n \n ReactDOM.unmountComponentAtNode(container);\n \n expect(\n- EventPluginHub.getListener(rootNodeID, 'onClick')\n+ EventPluginHub.getListener(inst, 'onClick')\n ).toBe(undefined);\n });\n });\ndiff --git a\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMTextComponent-test.js b\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMTextComponent-test.js\nindex 049ecf0b0a..85f4cfa4f0 100644\n--- a\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMTextComponent-test.js\n+++ b\/src\/renderers\/dom\/shared\/__tests__\/ReactDOMTextComponent-test.js\n@@ -13,22 +13,11 @@\n \n var React;\n var ReactDOM;\n-var ReactDOMServer;\n \n describe('ReactDOMTextComponent', function() {\n beforeEach(function() {\n React = require('React');\n ReactDOM = require('ReactDOM');\n- ReactDOMServer = require('ReactDOMServer');\n- });\n-\n- it('should escape the rootID', function() {\n- var ThisThingShouldBeEscaped = '\">>> LULZ <<<\"';\n- var ThisThingWasBeEscaped = '">>> LULZ <<<"';\n- var thing = <div><span key={ThisThingShouldBeEscaped}>LULZ<\/span><\/div>;\n- var html = ReactDOMServer.renderToString(thing);\n- expect(html).not.toContain(ThisThingShouldBeEscaped);\n- expect(html).toContain(ThisThingWasBeEscaped);\n });\n \n it('updates a mounted text component in place', function() {\ndiff --git a\/src\/renderers\/shared\/event\/EventPluginHub.js b\/src\/renderers\/shared\/event\/EventPluginHub.js\nindex d5078f5e00..d8b5dc1b51 100644\n--- a\/src\/renderers\/shared\/event\/EventPluginHub.js\n+++ b\/src\/renderers\/shared\/event\/EventPluginHub.js\n@@ -18,7 +18,6 @@ var ReactErrorUtils = require('ReactErrorUtils');\n var accumulateInto = require('accumulateInto');\n var forEachAccumulated = require('forEachAccumulated');\n var invariant = require('invariant');\n-var warning = require('warning');\n \n \/**\n * Internal store for event listeners\n@@ -54,23 +53,6 @@ var executeDispatchesAndReleaseTopLevel = function(e) {\n return executeDispatchesAndRelease(e, false);\n };\n \n-\/**\n- * - `InstanceHandle`: [required] Module that performs logical traversals of DOM\n- * hierarchy given ids of the logical DOM elements involved.\n- *\/\n-var InstanceHandle = null;\n-\n-function validateInstanceHandle() {\n- var valid =\n- InstanceHandle &&\n- InstanceHandle.traverseTwoPhase &&\n- InstanceHandle.traverseEnterLeave;\n- warning(\n- valid,\n- 'InstanceHandle not injected before use!'\n- );\n-}\n-\n \/**\n * This is a unified interface for event plugins to be installed and configured.\n *\n@@ -100,30 +82,6 @@ var EventPluginHub = {\n *\/\n injection: {\n \n- \/**\n- * @param {object} InjectedMount\n- * @public\n- *\/\n- injectMount: EventPluginUtils.injection.injectMount,\n-\n- \/**\n- * @param {object} InjectedInstanceHandle\n- * @public\n- *\/\n- injectInstanceHandle: function(InjectedInstanceHandle) {\n- InstanceHandle = InjectedInstanceHandle;\n- if (__DEV__) {\n- validateInstanceHandle();\n- }\n- },\n-\n- getInstanceHandle: function() {\n- if (__DEV__) {\n- validateInstanceHandle();\n- }\n- return InstanceHandle;\n- },\n-\n \/**\n * @param {array} InjectedEventPluginOrder\n * @public\n@@ -144,7 +102,7 @@ var EventPluginHub = {\n * @param {string} registrationName Name of listener (e.g. `onClick`).\n * @param {?function} listener The callback to store.\n *\/\n- putListener: function(id, registrationName, listener) {\n+ putListener: function(inst, registrationName, listener) {\n invariant(\n typeof listener === 'function',\n 'Expected %s listener to be a function, instead got type %s',\n@@ -153,12 +111,12 @@ var EventPluginHub = {\n \n var bankForRegistrationName =\n listenerBank[registrationName] || (listenerBank[registrationName] = {});\n- bankForRegistrationName[id] = listener;\n+ bankForRegistrationName[inst._rootNodeID] = listener;\n \n var PluginModule =\n EventPluginRegistry.registrationNameModules[registrationName];\n if (PluginModule && PluginModule.didPutListener) {\n- PluginModule.didPutListener(id, registrationName, listener);\n+ PluginModule.didPutListener(inst, registrationName, listener);\n }\n },\n \n@@ -167,9 +125,9 @@ var EventPluginHub = {\n * @param {string} registrationName Name of listener (e.g. `onClick`).\n * @return {?function} The stored callback.\n *\/\n- getListener: function(id, registrationName) {\n+ getListener: function(inst, registrationName) {\n var bankForRegistrationName = listenerBank[registrationName];\n- return bankForRegistrationName && bankForRegistrationName[id];\n+ return bankForRegistrationName && bankForRegistrationName[inst._rootNodeID];\n },\n \n \/**\n@@ -178,17 +136,17 @@ var EventPluginHub = {\n * @param {string} id ID of the DOM element.\n * @param {string} registrationName Name of listener (e.g. `onClick`).\n *\/\n- deleteListener: function(id, registrationName) {\n+ deleteListener: function(inst, registrationName) {\n var PluginModule =\n EventPluginRegistry.registrationNameModules[registrationName];\n if (PluginModule && PluginModule.willDeleteListener) {\n- PluginModule.willDeleteListener(id, registrationName);\n+ PluginModule.willDeleteListener(inst, registrationName);\n }\n \n var bankForRegistrationName = listenerBank[registrationName];\n \/\/ TODO: This should never be null -- when is it?\n if (bankForRegistrationName) {\n- delete bankForRegistrationName[id];\n+ delete bankForRegistrationName[inst._rootNodeID];\n }\n },\n \n@@ -197,19 +155,19 @@ var EventPluginHub = {\n *\n * @param {string} id ID of the DOM element.\n *\/\n- deleteAllListeners: function(id) {\n+ deleteAllListeners: function(inst) {\n for (var registrationName in listenerBank) {\n- if (!listenerBank[registrationName][id]) {\n+ if (!listenerBank[registrationName][inst._rootNodeID]) {\n continue;\n }\n \n var PluginModule =\n EventPluginRegistry.registrationNameModules[registrationName];\n if (PluginModule && PluginModule.willDeleteListener) {\n- PluginModule.willDeleteListener(id, registrationName);\n+ PluginModule.willDeleteListener(inst, registrationName);\n }\n \n- delete listenerBank[registrationName][id];\n+ delete listenerBank[registrationName][inst._rootNodeID];\n }\n },\n \n@@ -217,17 +175,12 @@ var EventPluginHub = {\n * Allows registered plugins an opportunity to extract events from top-level\n * native browser events.\n *\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n * @return {*} An accumulation of synthetic events.\n * @internal\n *\/\n extractEvents: function(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget) {\n var events;\n@@ -238,8 +191,7 @@ var EventPluginHub = {\n if (possiblePlugin) {\n var extractedEvents = possiblePlugin.extractEvents(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n );\ndiff --git a\/src\/renderers\/shared\/event\/EventPluginUtils.js b\/src\/renderers\/shared\/event\/EventPluginUtils.js\nindex bff374799e..9154882242 100644\n--- a\/src\/renderers\/shared\/event\/EventPluginUtils.js\n+++ b\/src\/renderers\/shared\/event\/EventPluginUtils.js\n@@ -22,18 +22,31 @@ var warning = require('warning');\n *\/\n \n \/**\n- * - `Mount`: [required] Module that can convert between React dom IDs and\n- * actual node references.\n+ * - `ComponentTree`: [required] Module that can convert between React instances\n+ * and actual node references.\n *\/\n+var ComponentTree;\n+var TreeTraversal;\n var injection = {\n- Mount: null,\n- injectMount: function(InjectedMount) {\n- injection.Mount = InjectedMount;\n+ injectComponentTree: function(Injected) {\n+ ComponentTree = Injected;\n if (__DEV__) {\n warning(\n- InjectedMount && InjectedMount.getNode && InjectedMount.getID,\n- 'EventPluginUtils.injection.injectMount(...): Injected Mount ' +\n- 'module is missing getNode or getID.'\n+ Injected &&\n+ Injected.getNodeFromInstance &&\n+ Injected.getInstanceFromNode,\n+ 'EventPluginUtils.injection.injectComponentTree(...): Injected ' +\n+ 'module is missing getNodeFromInstance or getInstanceFromNode.'\n+ );\n+ }\n+ },\n+ injectTreeTraversal: function(Injected) {\n+ TreeTraversal = Injected;\n+ if (__DEV__) {\n+ warning(\n+ Injected && Injected.isAncestor && Injected.getLowestCommonAncestor,\n+ 'EventPluginUtils.injection.injectTreeTraversal(...): Injected ' +\n+ 'module is missing isAncestor or getLowestCommonAncestor.'\n );\n }\n },\n@@ -61,17 +74,20 @@ var validateEventDispatches;\n if (__DEV__) {\n validateEventDispatches = function(event) {\n var dispatchListeners = event._dispatchListeners;\n- var dispatchIDs = event._dispatchIDs;\n+ var dispatchInstances = event._dispatchInstances;\n \n var listenersIsArr = Array.isArray(dispatchListeners);\n- var idsIsArr = Array.isArray(dispatchIDs);\n- var IDsLen = idsIsArr ? dispatchIDs.length : dispatchIDs ? 1 : 0;\n var listenersLen = listenersIsArr ?\n dispatchListeners.length :\n dispatchListeners ? 1 : 0;\n \n+ var instancesIsArr = Array.isArray(dispatchInstances);\n+ var instancesLen = instancesIsArr ?\n+ dispatchInstances.length :\n+ dispatchInstances ? 1 : 0;\n+\n warning(\n- idsIsArr === listenersIsArr && IDsLen === listenersLen,\n+ instancesIsArr === listenersIsArr && instancesLen === listenersLen,\n 'EventPluginUtils: Invalid `event`.'\n );\n };\n@@ -82,20 +98,19 @@ if (__DEV__) {\n * @param {SyntheticEvent} event SyntheticEvent to handle\n * @param {boolean} simulated If the event is simulated (changes exn behavior)\n * @param {function} listener Application-level callback\n- * @param {string} domID DOM id to pass to the callback.\n+ * @param {*} inst Internal component instance\n *\/\n-function executeDispatch(event, simulated, listener, domID) {\n+function executeDispatch(event, simulated, listener, inst) {\n var type = event.type || 'unknown-event';\n- event.currentTarget = injection.Mount.getNode(domID);\n+ event.currentTarget = EventPluginUtils.getNodeFromInstance(inst);\n if (simulated) {\n ReactErrorUtils.invokeGuardedCallbackWithCatch(\n type,\n listener,\n- event,\n- domID\n+ event\n );\n } else {\n- ReactErrorUtils.invokeGuardedCallback(type, listener, event, domID);\n+ ReactErrorUtils.invokeGuardedCallback(type, listener, event);\n }\n event.currentTarget = null;\n }\n@@ -105,7 +120,7 @@ function executeDispatch(event, simulated, listener, domID) {\n *\/\n function executeDispatchesInOrder(event, simulated) {\n var dispatchListeners = event._dispatchListeners;\n- var dispatchIDs = event._dispatchIDs;\n+ var dispatchInstances = event._dispatchInstances;\n if (__DEV__) {\n validateEventDispatches(event);\n }\n@@ -114,14 +129,19 @@ function executeDispatchesInOrder(event, simulated) {\n if (event.isPropagationStopped()) {\n break;\n }\n- \/\/ Listeners and IDs are two parallel arrays that are always in sync.\n- executeDispatch(event, simulated, dispatchListeners[i], dispatchIDs[i]);\n+ \/\/ Listeners and Instances are two parallel arrays that are always in sync.\n+ executeDispatch(\n+ event,\n+ simulated,\n+ dispatchListeners[i],\n+ dispatchInstances[i]\n+ );\n }\n } else if (dispatchListeners) {\n- executeDispatch(event, simulated, dispatchListeners, dispatchIDs);\n+ executeDispatch(event, simulated, dispatchListeners, dispatchInstances);\n }\n event._dispatchListeners = null;\n- event._dispatchIDs = null;\n+ event._dispatchInstances = null;\n }\n \n \/**\n@@ -133,7 +153,7 @@ function executeDispatchesInOrder(event, simulated) {\n *\/\n function executeDispatchesInOrderStopAtTrueImpl(event) {\n var dispatchListeners = event._dispatchListeners;\n- var dispatchIDs = event._dispatchIDs;\n+ var dispatchInstances = event._dispatchInstances;\n if (__DEV__) {\n validateEventDispatches(event);\n }\n@@ -142,14 +162,14 @@ function executeDispatchesInOrderStopAtTrueImpl(event) {\n if (event.isPropagationStopped()) {\n break;\n }\n- \/\/ Listeners and IDs are two parallel arrays that are always in sync.\n- if (dispatchListeners[i](event, dispatchIDs[i])) {\n- return dispatchIDs[i];\n+ \/\/ Listeners and Instances are two parallel arrays that are always in sync.\n+ if (dispatchListeners[i](event, dispatchInstances[i])) {\n+ return dispatchInstances[i];\n }\n }\n } else if (dispatchListeners) {\n- if (dispatchListeners(event, dispatchIDs)) {\n- return dispatchIDs;\n+ if (dispatchListeners(event, dispatchInstances)) {\n+ return dispatchInstances;\n }\n }\n return null;\n@@ -160,7 +180,7 @@ function executeDispatchesInOrderStopAtTrueImpl(event) {\n *\/\n function executeDispatchesInOrderStopAtTrue(event) {\n var ret = executeDispatchesInOrderStopAtTrueImpl(event);\n- event._dispatchIDs = null;\n+ event._dispatchInstances = null;\n event._dispatchListeners = null;\n return ret;\n }\n@@ -179,16 +199,16 @@ function executeDirectDispatch(event) {\n validateEventDispatches(event);\n }\n var dispatchListener = event._dispatchListeners;\n- var dispatchID = event._dispatchIDs;\n+ var dispatchInstance = event._dispatchInstances;\n invariant(\n !Array.isArray(dispatchListener),\n 'executeDirectDispatch(...): Invalid `event`.'\n );\n- var res = dispatchListener ?\n- dispatchListener(event, dispatchID) :\n- null;\n+ event.currentTarget = EventPluginUtils.getNodeFromInstance(dispatchInstance);\n+ var res = dispatchListener ? dispatchListener(event) : null;\n+ event.curentTarget = null;\n event._dispatchListeners = null;\n- event._dispatchIDs = null;\n+ event._dispatchInstances = null;\n return res;\n }\n \n@@ -213,11 +233,26 @@ var EventPluginUtils = {\n executeDispatchesInOrderStopAtTrue: executeDispatchesInOrderStopAtTrue,\n hasDispatches: hasDispatches,\n \n- getNode: function(id) {\n- return injection.Mount.getNode(id);\n+ getInstanceFromNode: function(node) {\n+ return ComponentTree.getInstanceFromNode(node);\n+ },\n+ getNodeFromInstance: function(node) {\n+ return ComponentTree.getNodeFromInstance(node);\n+ },\n+ isAncestor: function(a, b) {\n+ return TreeTraversal.isAncestor(a, b);\n+ },\n+ getLowestCommonAncestor: function(a, b) {\n+ return TreeTraversal.getLowestCommonAncestor(a, b);\n+ },\n+ getParentInstance: function(inst) {\n+ return TreeTraversal.getParentInstance(inst);\n+ },\n+ traverseTwoPhase: function(target, fn, arg) {\n+ return TreeTraversal.traverseTwoPhase(target, fn, arg);\n },\n- getID: function(node) {\n- return injection.Mount.getID(node);\n+ traverseEnterLeave: function(from, to, fn, argFrom, argTo) {\n+ return TreeTraversal.traverseEnterLeave(from, to, fn, argFrom, argTo);\n },\n \n injection: injection,\ndiff --git a\/src\/renderers\/shared\/event\/EventPropagators.js b\/src\/renderers\/shared\/event\/EventPropagators.js\nindex 896382aba0..27b363a0d4 100644\n--- a\/src\/renderers\/shared\/event\/EventPropagators.js\n+++ b\/src\/renderers\/shared\/event\/EventPropagators.js\n@@ -13,11 +13,11 @@\n \n var EventConstants = require('EventConstants');\n var EventPluginHub = require('EventPluginHub');\n-\n-var warning = require('warning');\n+var EventPluginUtils = require('EventPluginUtils');\n \n var accumulateInto = require('accumulateInto');\n var forEachAccumulated = require('forEachAccumulated');\n+var warning = require('warning');\n \n var PropagationPhases = EventConstants.PropagationPhases;\n var getListener = EventPluginHub.getListener;\n@@ -26,10 +26,10 @@ var getListener = EventPluginHub.getListener;\n * Some event types have a notion of different registration names for different\n * \"phases\" of propagation. This finds listeners by a given phase.\n *\/\n-function listenerAtPhase(id, event, propagationPhase) {\n+function listenerAtPhase(inst, event, propagationPhase) {\n var registrationName =\n event.dispatchConfig.phasedRegistrationNames[propagationPhase];\n- return getListener(id, registrationName);\n+ return getListener(inst, registrationName);\n }\n \n \/**\n@@ -38,19 +38,19 @@ function listenerAtPhase(id, event, propagationPhase) {\n * Mutating the event's members allows us to not have to create a wrapping\n * \"dispatch\" object that pairs the event with the listener.\n *\/\n-function accumulateDirectionalDispatches(domID, upwards, event) {\n+function accumulateDirectionalDispatches(inst, upwards, event) {\n if (__DEV__) {\n warning(\n- domID,\n- 'Dispatching id must not be null'\n+ inst,\n+ 'Dispatching inst must not be null'\n );\n }\n var phase = upwards ? PropagationPhases.bubbled : PropagationPhases.captured;\n- var listener = listenerAtPhase(domID, event, phase);\n+ var listener = listenerAtPhase(inst, event, phase);\n if (listener) {\n event._dispatchListeners =\n accumulateInto(event._dispatchListeners, listener);\n- event._dispatchIDs = accumulateInto(event._dispatchIDs, domID);\n+ event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);\n }\n }\n \n@@ -63,8 +63,8 @@ function accumulateDirectionalDispatches(domID, upwards, event) {\n *\/\n function accumulateTwoPhaseDispatchesSingle(event) {\n if (event && event.dispatchConfig.phasedRegistrationNames) {\n- EventPluginHub.injection.getInstanceHandle().traverseTwoPhase(\n- event.dispatchMarker,\n+ EventPluginUtils.traverseTwoPhase(\n+ event._targetInst,\n accumulateDirectionalDispatches,\n event\n );\n@@ -76,8 +76,11 @@ function accumulateTwoPhaseDispatchesSingle(event) {\n *\/\n function accumulateTwoPhaseDispatchesSingleSkipTarget(event) {\n if (event && event.dispatchConfig.phasedRegistrationNames) {\n- EventPluginHub.injection.getInstanceHandle().traverseTwoPhaseSkipTarget(\n- event.dispatchMarker,\n+ var targetInst = event._targetInst;\n+ var parentInst =\n+ targetInst ? EventPluginUtils.getParentInstance(targetInst) : null;\n+ EventPluginUtils.traverseTwoPhase(\n+ parentInst,\n accumulateDirectionalDispatches,\n event\n );\n@@ -90,14 +93,14 @@ function accumulateTwoPhaseDispatchesSingleSkipTarget(event) {\n * registration names. Same as `accumulateDirectDispatchesSingle` but without\n * requiring that the `dispatchMarker` be the same as the dispatched ID.\n *\/\n-function accumulateDispatches(id, ignoredDirection, event) {\n+function accumulateDispatches(inst, ignoredDirection, event) {\n if (event && event.dispatchConfig.registrationName) {\n var registrationName = event.dispatchConfig.registrationName;\n- var listener = getListener(id, registrationName);\n+ var listener = getListener(inst, registrationName);\n if (listener) {\n event._dispatchListeners =\n accumulateInto(event._dispatchListeners, listener);\n- event._dispatchIDs = accumulateInto(event._dispatchIDs, id);\n+ event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);\n }\n }\n }\n@@ -109,7 +112,7 @@ function accumulateDispatches(id, ignoredDirection, event) {\n *\/\n function accumulateDirectDispatchesSingle(event) {\n if (event && event.dispatchConfig.registrationName) {\n- accumulateDispatches(event.dispatchMarker, null, event);\n+ accumulateDispatches(event._targetInst, null, event);\n }\n }\n \n@@ -121,10 +124,10 @@ function accumulateTwoPhaseDispatchesSkipTarget(events) {\n forEachAccumulated(events, accumulateTwoPhaseDispatchesSingleSkipTarget);\n }\n \n-function accumulateEnterLeaveDispatches(leave, enter, fromID, toID) {\n- EventPluginHub.injection.getInstanceHandle().traverseEnterLeave(\n- fromID,\n- toID,\n+function accumulateEnterLeaveDispatches(leave, enter, from, to) {\n+ EventPluginUtils.traverseEnterLeave(\n+ from,\n+ to,\n accumulateDispatches,\n leave,\n enter\ndiff --git a\/src\/renderers\/shared\/event\/eventPlugins\/ResponderEventPlugin.js b\/src\/renderers\/shared\/event\/eventPlugins\/ResponderEventPlugin.js\nindex 065cee28ab..32f81e044c 100644\n--- a\/src\/renderers\/shared\/event\/eventPlugins\/ResponderEventPlugin.js\n+++ b\/src\/renderers\/shared\/event\/eventPlugins\/ResponderEventPlugin.js\n@@ -14,7 +14,6 @@\n var EventConstants = require('EventConstants');\n var EventPluginUtils = require('EventPluginUtils');\n var EventPropagators = require('EventPropagators');\n-var ReactInstanceHandles = require('ReactInstanceHandles');\n var ResponderSyntheticEvent = require('ResponderSyntheticEvent');\n var ResponderTouchHistoryStore = require('ResponderTouchHistoryStore');\n \n@@ -31,10 +30,10 @@ var executeDispatchesInOrderStopAtTrue =\n EventPluginUtils.executeDispatchesInOrderStopAtTrue;\n \n \/**\n- * ID of element that should respond to touch\/move types of interactions, as\n+ * Instance of element that should respond to touch\/move types of interactions, as\n * indicated explicitly by relevant callbacks.\n *\/\n-var responderID = null;\n+var responderInst = null;\n \n \/**\n * Count of current touches. A textInput should become responder iff the\n@@ -47,13 +46,13 @@ var trackedTouchCount = 0;\n *\/\n var previousActiveTouches = 0;\n \n-var changeResponder = function(nextResponderID) {\n- var oldResponderID = responderID;\n- responderID = nextResponderID;\n+var changeResponder = function(nextResponderInst) {\n+ var oldResponderInst = responderInst;\n+ responderInst = nextResponderInst;\n if (ResponderEventPlugin.GlobalResponderHandler !== null) {\n ResponderEventPlugin.GlobalResponderHandler.onChange(\n- oldResponderID,\n- nextResponderID\n+ oldResponderInst,\n+ nextResponderInst\n );\n }\n };\n@@ -149,7 +148,7 @@ var eventTypes = {\n * - If nothing is currently the responder, the \"appropriate place\" is the\n * initiating event's `targetID`.\n * - If something *is* already the responder, the \"appropriate place\" is the\n- * first common ancestor of the event target and the current `responderID`.\n+ * first common ancestor of the event target and the current `responderInst`.\n * - Some negotiation happens: See the timing diagram below.\n * - Scrolled views automatically become responder. The reasoning is that a\n * platform scroll view that isn't built on top of the responder system has\n@@ -158,7 +157,7 @@ var eventTypes = {\n *\n * - Responder being released:\n * As soon as no more touches that *started* inside of descendents of the\n- * *current* responderID, an `onResponderRelease` event is dispatched to the\n+ * *current* responderInst, an `onResponderRelease` event is dispatched to the\n * current responder, and the responder lock is released.\n *\n * TODO:\n@@ -316,15 +315,11 @@ to return true:wantsResponderID| |\n * - `touchStartCapture` (`EventPluginHub` dispatches as usual)\n * - `touchStart` (`EventPluginHub` dispatches as usual)\n * - `responderGrant\/Reject` (`EventPluginHub` dispatches as usual)\n- *\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {string} topLevelTargetID ID of deepest React rendered element.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n *\/\n+\n function setResponderAndExtractTransfer(\n topLevelType,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n ) {\n@@ -336,15 +331,15 @@ function setResponderAndExtractTransfer(\n eventTypes.scrollShouldSetResponder;\n \n \/\/ TODO: stop one short of the the current responder.\n- var bubbleShouldSetFrom = !responderID ?\n- topLevelTargetID :\n- ReactInstanceHandles.getFirstCommonAncestorID(responderID, topLevelTargetID);\n+ var bubbleShouldSetFrom = !responderInst ?\n+ targetInst :\n+ EventPluginUtils.getLowestCommonAncestor(responderInst, targetInst);\n \n \/\/ When capturing\/bubbling the \"shouldSet\" event, we want to skip the target\n \/\/ (deepest ID) if it happens to be the current responder. The reasoning:\n \/\/ It's strange to get an `onMoveShouldSetResponder` when you're *already*\n \/\/ the responder.\n- var skipOverBubbleShouldSetFrom = bubbleShouldSetFrom === responderID;\n+ var skipOverBubbleShouldSetFrom = bubbleShouldSetFrom === responderInst;\n var shouldSetEvent = ResponderSyntheticEvent.getPooled(\n shouldSetEventType,\n bubbleShouldSetFrom,\n@@ -357,29 +352,29 @@ function setResponderAndExtractTransfer(\n } else {\n EventPropagators.accumulateTwoPhaseDispatches(shouldSetEvent);\n }\n- var wantsResponderID = executeDispatchesInOrderStopAtTrue(shouldSetEvent);\n+ var wantsResponderInst = executeDispatchesInOrderStopAtTrue(shouldSetEvent);\n if (!shouldSetEvent.isPersistent()) {\n shouldSetEvent.constructor.release(shouldSetEvent);\n }\n \n- if (!wantsResponderID || wantsResponderID === responderID) {\n+ if (!wantsResponderInst || wantsResponderInst === responderInst) {\n return null;\n }\n var extracted;\n var grantEvent = ResponderSyntheticEvent.getPooled(\n eventTypes.responderGrant,\n- wantsResponderID,\n+ wantsResponderInst,\n nativeEvent,\n nativeEventTarget\n );\n grantEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;\n \n EventPropagators.accumulateDirectDispatches(grantEvent);\n- if (responderID) {\n+ if (responderInst) {\n \n var terminationRequestEvent = ResponderSyntheticEvent.getPooled(\n eventTypes.responderTerminationRequest,\n- responderID,\n+ responderInst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -392,21 +387,20 @@ function setResponderAndExtractTransfer(\n }\n \n if (shouldSwitch) {\n- var terminateType = eventTypes.responderTerminate;\n var terminateEvent = ResponderSyntheticEvent.getPooled(\n- terminateType,\n- responderID,\n+ eventTypes.responderTerminate,\n+ responderInst,\n nativeEvent,\n nativeEventTarget\n );\n terminateEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;\n EventPropagators.accumulateDirectDispatches(terminateEvent);\n extracted = accumulate(extracted, [grantEvent, terminateEvent]);\n- changeResponder(wantsResponderID);\n+ changeResponder(wantsResponderInst);\n } else {\n var rejectEvent = ResponderSyntheticEvent.getPooled(\n eventTypes.responderReject,\n- wantsResponderID,\n+ wantsResponderInst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -416,7 +410,7 @@ function setResponderAndExtractTransfer(\n }\n } else {\n extracted = accumulate(extracted, grantEvent);\n- changeResponder(wantsResponderID);\n+ changeResponder(wantsResponderInst);\n }\n return extracted;\n }\n@@ -424,13 +418,13 @@ function setResponderAndExtractTransfer(\n \/**\n * A transfer is a negotiation between a currently set responder and the next\n * element to claim responder status. Any start event could trigger a transfer\n- * of responderID. Any move event could trigger a transfer.\n+ * of responderInst. Any move event could trigger a transfer.\n *\n * @param {string} topLevelType Record from `EventConstants`.\n * @return {boolean} True if a transfer of responder could possibly occur.\n *\/\n-function canTriggerTransfer(topLevelType, topLevelTargetID) {\n- return topLevelTargetID && (\n+function canTriggerTransfer(topLevelType, targetInst) {\n+ return !!targetInst && (\n topLevelType === EventConstants.topLevelTypes.topScroll ||\n (trackedTouchCount > 0 &&\n topLevelType === EventConstants.topLevelTypes.topSelectionChange) ||\n@@ -441,7 +435,7 @@ function canTriggerTransfer(topLevelType, topLevelTargetID) {\n \n \/**\n * Returns whether or not this touch end event makes it such that there are no\n- * longer any touches that started inside of the current `responderID`.\n+ * longer any touches that started inside of the current `responderInst`.\n *\n * @param {NativeEvent} nativeEvent Native touch end event.\n * @return {boolean} Whether or not this touch end event ends the responder.\n@@ -456,12 +450,8 @@ function noResponderTouches(nativeEvent) {\n var target = activeTouch.target;\n if (target !== null && target !== undefined && target !== 0) {\n \/\/ Is the original touch location inside of the current responder?\n- var isAncestor =\n- ReactInstanceHandles.isAncestorIDOf(\n- responderID,\n- EventPluginUtils.getID(target)\n- );\n- if (isAncestor) {\n+ var targetInst = EventPluginUtils.getInstanceFromNode(target);\n+ if (EventPluginUtils.isAncestor(responderInst, targetInst)) {\n return false;\n }\n }\n@@ -472,30 +462,24 @@ function noResponderTouches(nativeEvent) {\n \n var ResponderEventPlugin = {\n \n- getResponderID: function() {\n- return responderID;\n+ \/* For unit testing only *\/\n+ _getResponderID: function() {\n+ return responderInst ? responderInst._rootNodeID : null;\n },\n \n eventTypes: eventTypes,\n \n \/**\n- * We must be resilient to `topLevelTargetID` being `undefined` on\n- * `touchMove`, or `touchEnd`. On certain platforms, this means that a native\n- * scroll has assumed control and the original touch targets are destroyed.\n- *\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n- * @see {EventPluginHub.extractEvents}\n+ * We must be resilient to `targetInst` being `null` on `touchMove` or\n+ * `touchEnd`. On certain platforms, this means that a native scroll has\n+ * assumed control and the original touch targets are destroyed.\n *\/\n extractEvents: function(\n- topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n- nativeEvent,\n- nativeEventTarget) {\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget\n+ ) {\n if (isStartish(topLevelType)) {\n trackedTouchCount += 1;\n } else if (isEndish(topLevelType)) {\n@@ -508,10 +492,10 @@ var ResponderEventPlugin = {\n \n ResponderTouchHistoryStore.recordTouchTrack(topLevelType, nativeEvent, nativeEventTarget);\n \n- var extracted = canTriggerTransfer(topLevelType, topLevelTargetID) ?\n+ var extracted = canTriggerTransfer(topLevelType, targetInst) ?\n setResponderAndExtractTransfer(\n topLevelType,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget) :\n null;\n@@ -525,9 +509,9 @@ var ResponderEventPlugin = {\n \/\/ These multiple individual change touch events are are always bookended\n \/\/ by `onResponderGrant`, and one of\n \/\/ (`onResponderRelease\/onResponderTerminate`).\n- var isResponderTouchStart = responderID && isStartish(topLevelType);\n- var isResponderTouchMove = responderID && isMoveish(topLevelType);\n- var isResponderTouchEnd = responderID && isEndish(topLevelType);\n+ var isResponderTouchStart = responderInst && isStartish(topLevelType);\n+ var isResponderTouchMove = responderInst && isMoveish(topLevelType);\n+ var isResponderTouchEnd = responderInst && isEndish(topLevelType);\n var incrementalTouch =\n isResponderTouchStart ? eventTypes.responderStart :\n isResponderTouchMove ? eventTypes.responderMove :\n@@ -538,7 +522,7 @@ var ResponderEventPlugin = {\n var gesture =\n ResponderSyntheticEvent.getPooled(\n incrementalTouch,\n- responderID,\n+ responderInst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -548,10 +532,10 @@ var ResponderEventPlugin = {\n }\n \n var isResponderTerminate =\n- responderID &&\n+ responderInst &&\n topLevelType === EventConstants.topLevelTypes.topTouchCancel;\n var isResponderRelease =\n- responderID &&\n+ responderInst &&\n !isResponderTerminate &&\n isEndish(topLevelType) &&\n noResponderTouches(nativeEvent);\n@@ -560,8 +544,9 @@ var ResponderEventPlugin = {\n isResponderRelease ? eventTypes.responderRelease :\n null;\n if (finalTouch) {\n- var finalEvent =\n- ResponderSyntheticEvent.getPooled(finalTouch, responderID, nativeEvent, nativeEventTarget);\n+ var finalEvent = ResponderSyntheticEvent.getPooled(\n+ finalTouch, responderInst, nativeEvent, nativeEventTarget\n+ );\n finalEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;\n EventPropagators.accumulateDirectDispatches(finalEvent);\n extracted = accumulate(extracted, finalEvent);\ndiff --git a\/src\/renderers\/shared\/event\/eventPlugins\/__tests__\/ResponderEventPlugin-test.js b\/src\/renderers\/shared\/event\/eventPlugins\/__tests__\/ResponderEventPlugin-test.js\nindex 21c719aabe..e9a640e6d3 100644\n--- a\/src\/renderers\/shared\/event\/eventPlugins\/__tests__\/ResponderEventPlugin-test.js\n+++ b\/src\/renderers\/shared\/event\/eventPlugins\/__tests__\/ResponderEventPlugin-test.js\n@@ -17,11 +17,6 @@ var ReactInstanceHandles;\n var ResponderEventPlugin;\n var EventPluginUtils;\n \n-var GRANDPARENT_ID = '.0';\n-var PARENT_ID = '.0.0';\n-var CHILD_ID = '.0.0.0';\n-var CHILD_ID2 = '.0.0.1';\n-\n var topLevelTypes;\n \n var touch = function(nodeHandle, i) {\n@@ -89,8 +84,7 @@ var _touchConfig = function(\n changedTouchObjects\n ),\n topLevelType: topType,\n- target: targetNodeHandle,\n- targetID: targetNodeHandle,\n+ targetInst: idToInstance[targetNodeHandle],\n };\n };\n \n@@ -243,7 +237,7 @@ var registerTestHandlers = function(eventTestConfig, readableIDToID) {\n }\n return nodeConfig.returnVal;\n }.bind(null, readableID, nodeConfig);\n- EventPluginHub.putListener(id, registrationName, handler);\n+ EventPluginHub.putListener(idToInstance[id], registrationName, handler);\n }\n };\n \/*eslint-enable no-loop-func, no-shadow *\/\n@@ -296,8 +290,7 @@ var run = function(config, hierarchyConfig, nativeEventConfig) {\n \/\/ Trigger the event\n var extractedEvents = ResponderEventPlugin.extractEvents(\n nativeEventConfig.topLevelType,\n- nativeEventConfig.target,\n- nativeEventConfig.targetID,\n+ nativeEventConfig.targetInst,\n nativeEventConfig.nativeEvent,\n nativeEventConfig.target\n );\n@@ -316,6 +309,16 @@ var run = function(config, hierarchyConfig, nativeEventConfig) {\n ); \/\/ +1 for extra ++\n };\n \n+var GRANDPARENT_ID = '.0';\n+var PARENT_ID = '.0.0';\n+var CHILD_ID = '.0.0.0';\n+var CHILD_ID2 = '.0.0.1';\n+\n+var idToInstance = {};\n+[GRANDPARENT_ID, PARENT_ID, CHILD_ID, CHILD_ID2].forEach(function(id) {\n+ idToInstance[id] = {_rootNodeID: id};\n+});\n+\n var three = {\n grandParent: GRANDPARENT_ID,\n parent: PARENT_ID,\n@@ -338,16 +341,44 @@ describe('ResponderEventPlugin', function() {\n ReactInstanceHandles = require('ReactInstanceHandles');\n ResponderEventPlugin = require('ResponderEventPlugin');\n \n- EventPluginHub.injection.injectInstanceHandle(ReactInstanceHandles);\n+ EventPluginUtils.injection.injectComponentTree({\n+ getInstanceFromNode: function(id) {\n+ return idToInstance[id];\n+ },\n+ getNodeFromInstance: function(inst) {\n+ return inst._rootNodeID;\n+ },\n+ });\n \n- \/\/ Only needed because SyntheticEvent supports the `currentTarget`\n- \/\/ property.\n- EventPluginUtils.injection.injectMount({\n- getNode: function(id) {\n- return id;\n+ EventPluginUtils.injection.injectTreeTraversal({\n+ isAncestor: function(a, b) {\n+ return ReactInstanceHandles.isAncestorIDOf(\n+ a._rootNodeID,\n+ b._rootNodeID\n+ );\n+ },\n+ getLowestCommonAncestor: function(a, b) {\n+ if (!a || !b) {\n+ return null;\n+ }\n+ var commonID = ReactInstanceHandles.getFirstCommonAncestorID(\n+ a._rootNodeID,\n+ b._rootNodeID\n+ );\n+ return idToInstance[commonID] || null;\n },\n- getID: function(nodeHandle) {\n- return nodeHandle;\n+ getParentInstance: function(inst) {\n+ var id = inst._rootNodeID;\n+ var parentID = id.substr(0, id.lastIndexOf('.'));\n+ return idToInstance[parentID] || null;\n+ },\n+ traverseTwoPhase: function(target, fn, arg) {\n+ ReactInstanceHandles.traverseTwoPhase(\n+ target._rootNodeID,\n+ function(id, upwards) {\n+ fn(idToInstance[id], upwards, arg);\n+ }\n+ );\n },\n });\n \n@@ -363,12 +394,12 @@ describe('ResponderEventPlugin', function() {\n config.startShouldSetResponder.bubbled.parent = {order: 4, returnVal: false};\n config.startShouldSetResponder.bubbled.grandParent = {order: 5, returnVal: false};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n \n \/\/ Now no handlers should be called on `touchEnd`.\n config = oneEventLoopTestConfig(three);\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n \n@@ -384,13 +415,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.grandParent = {order: 1};\n config.responderStart.grandParent = {order: 2};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(GRANDPARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.grandParent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.grandParent = {order: 0};\n config.responderRelease.grandParent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder parent while capturing', () => {\n@@ -400,13 +431,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.parent = {order: 2};\n config.responderStart.parent = {order: 3};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.parent = {order: 0};\n config.responderRelease.parent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder child while capturing', () => {\n@@ -417,13 +448,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.child = {order: 3};\n config.responderStart.child = {order: 4};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.child = {order: 0};\n config.responderRelease.child = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder child while bubbling', () => {\n@@ -435,13 +466,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.child = {order: 4};\n config.responderStart.child = {order: 5};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.child = {order: 0};\n config.responderRelease.child = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder parent while bubbling', () => {\n@@ -454,13 +485,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.parent = {order: 5};\n config.responderStart.parent = {order: 6};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.parent = {order: 0};\n config.responderRelease.parent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder grandParent while bubbling', () => {\n@@ -474,13 +505,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.grandParent = {order: 6};\n config.responderStart.grandParent = {order: 7};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(GRANDPARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.grandParent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.grandParent = {order: 0};\n config.responderRelease.grandParent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n \n@@ -506,13 +537,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.grandParent = {order: 1};\n config.responderMove.grandParent = {order: 2};\n run(config, three, moveConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(GRANDPARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.grandParent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.grandParent = {order: 0};\n config.responderRelease.grandParent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder parent while capturing move', () => {\n@@ -532,13 +563,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.parent = {order: 2};\n config.responderMove.parent = {order: 3};\n run(config, three, moveConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.parent = {order: 0};\n config.responderRelease.parent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder child while capturing move', () => {\n@@ -559,13 +590,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.child = {order: 3};\n config.responderMove.child = {order: 4};\n run(config, three, moveConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.child = {order: 0};\n config.responderRelease.child = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder child while bubbling move', () => {\n@@ -587,13 +618,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.child = {order: 4};\n config.responderMove.child = {order: 5};\n run(config, three, moveConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.child = {order: 0};\n config.responderRelease.child = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder parent while bubbling move', () => {\n@@ -616,13 +647,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.parent = {order: 5};\n config.responderMove.parent = {order: 6};\n run(config, three, moveConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.parent = {order: 0};\n config.responderRelease.parent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder grandParent while bubbling move', () => {\n@@ -646,13 +677,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.grandParent = {order: 6};\n config.responderMove.grandParent = {order: 7};\n run(config, three, moveConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(GRANDPARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.grandParent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.grandParent = {order: 0};\n config.responderRelease.grandParent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n \n@@ -668,9 +699,9 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.parent = {order: 2};\n config.responderStart.parent = {order: 3};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n- \/\/ While `PARENT_ID` is still responder, we create new handlers that verify\n+ \/\/ While `parent` is still responder, we create new handlers that verify\n \/\/ the ordering of propagation, restarting the count at `0`.\n config = oneEventLoopTestConfig(three);\n config.startShouldSetResponder.captured.grandParent = {order: 0, returnVal: false};\n@@ -678,13 +709,13 @@ describe('ResponderEventPlugin', function() {\n config.startShouldSetResponder.bubbled.grandParent = {order: 1, returnVal: false};\n config.responderStart.parent = {order: 2};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.parent = {order: 0};\n config.responderRelease.parent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should bubble negotiation to first common ancestor of responder then transfer', () => {\n@@ -694,7 +725,7 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.parent = {order: 2};\n config.responderStart.parent = {order: 3};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n config = oneEventLoopTestConfig(three);\n \n@@ -705,19 +736,19 @@ describe('ResponderEventPlugin', function() {\n config.responderTerminate.parent = {order: 3};\n config.responderStart.grandParent = {order: 4};\n run(config, three, startConfig(three.child, [three.child, three.child], [1]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(GRANDPARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.grandParent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.grandParent = {order: 0};\n \/\/ one remains\\ \/one ended \\\n run(config, three, endConfig(three.child, [three.child, three.child], [1]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(GRANDPARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.grandParent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.grandParent = {order: 0};\n config.responderRelease.grandParent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n \/**\n@@ -733,7 +764,7 @@ describe('ResponderEventPlugin', function() {\n config.startShouldSetResponder.bubbled.grandParent = {order: 3, returnVal: false};\n \n run(config, three, startConfig(three.parent, [three.parent], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n \n config = oneEventLoopTestConfig(three);\n \n@@ -749,7 +780,7 @@ describe('ResponderEventPlugin', function() {\n config.responderStart.child = {order: 5};\n \/\/ \/ Two active touches \\ \/one of them new\\\n run(config, three, startConfig(three.child, [three.parent, three.child], [1]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n \n \/\/ Now we remove the original first touch, keeping the second touch that\n@@ -759,7 +790,7 @@ describe('ResponderEventPlugin', function() {\n config.responderEnd.child = {order: 0};\n \/\/ \/ one ended\\ \/one remains \\\n run(config, three, endConfig(three.child, [three.parent, three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n \/\/ Okay, now let's add back that first touch (nothing should change) and\n \/\/ then we'll try peeling back the touches in the opposite order to make\n@@ -775,7 +806,7 @@ describe('ResponderEventPlugin', function() {\n config.responderStart.child = {order: 4};\n \/\/ \/ Two active touches \\ \/one of them new\\\n run(config, three, startConfig(three.parent, [three.child, three.parent], [1]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n \n \/\/ Now, move that new touch that had no effect, and did not start within\n@@ -790,7 +821,7 @@ describe('ResponderEventPlugin', function() {\n config.responderMove.child = {order: 4};\n \/\/ \/ Two active touches \\ \/one of them moved\\\n run(config, three, moveConfig(three.parent, [three.child, three.parent], [1]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n \n config = oneEventLoopTestConfig(three);\n@@ -798,7 +829,7 @@ describe('ResponderEventPlugin', function() {\n config.responderRelease.child = {order: 1};\n \/\/ \/child end \\ \/parent remain\\\n run(config, three, endConfig(three.child, [three.child, three.parent], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n \n@@ -816,7 +847,7 @@ describe('ResponderEventPlugin', function() {\n config.responderStart.childOne = {order: 4};\n \n run(config, siblings, startConfig(siblings.childOne, [siblings.childOne], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(siblings.childOne);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(siblings.childOne);\n \n \/\/ If the touch target is the sibling item, the negotiation should only\n \/\/ propagate to first common ancestor of current responder and sibling (so\n@@ -829,7 +860,7 @@ describe('ResponderEventPlugin', function() {\n var touchConfig =\n startConfig(siblings.childTwo, [siblings.childOne, siblings.childTwo], [1]);\n run(config, siblings, touchConfig);\n- expect(ResponderEventPlugin.getResponderID()).toBe(siblings.childOne);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(siblings.childOne);\n \n \n \/\/ move childOne\n@@ -838,7 +869,7 @@ describe('ResponderEventPlugin', function() {\n config.moveShouldSetResponder.bubbled.parent = {order: 1, returnVal: false};\n config.responderMove.childOne = {order: 2};\n run(config, siblings, moveConfig(siblings.childOne, [siblings.childOne, siblings.childTwo], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(siblings.childOne);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(siblings.childOne);\n \n \/\/ move childTwo: Only negotiates to `parent`.\n config = oneEventLoopTestConfig(siblings);\n@@ -846,7 +877,7 @@ describe('ResponderEventPlugin', function() {\n config.moveShouldSetResponder.bubbled.parent = {order: 1, returnVal: false};\n config.responderMove.childOne = {order: 2};\n run(config, siblings, moveConfig(siblings.childTwo, [siblings.childOne, siblings.childTwo], [1]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(siblings.childOne);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(siblings.childOne);\n \n });\n \n@@ -862,7 +893,7 @@ describe('ResponderEventPlugin', function() {\n config.responderStart.child = {order: 5};\n \n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n \/\/ Suppose parent wants to become responder on move, and is rejected\n config = oneEventLoopTestConfig(three);\n@@ -877,7 +908,7 @@ describe('ResponderEventPlugin', function() {\n var touchConfig =\n moveConfig(three.child, [three.child], [0]);\n run(config, three, touchConfig);\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n config = oneEventLoopTestConfig(three);\n config.startShouldSetResponder.captured.grandParent = {order: 0, returnVal: false};\n@@ -891,7 +922,7 @@ describe('ResponderEventPlugin', function() {\n touchConfig =\n startConfig(three.child, [three.child, three.child], [1]);\n run(config, three, touchConfig);\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n });\n \n@@ -907,7 +938,7 @@ describe('ResponderEventPlugin', function() {\n config.responderStart.child = {order: 5};\n \n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n \/\/ If the touch target is the sibling item, the negotiation should only\n \/\/ propagate to first common ancestor of current responder and sibling (so\n@@ -921,11 +952,10 @@ describe('ResponderEventPlugin', function() {\n \n run(config, three, {\n topLevelType: topLevelTypes.topScroll,\n- target: three.parent,\n- targetID: three.parent,\n+ targetInst: idToInstance[three.parent],\n nativeEvent: {},\n });\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n \n \/\/ Now lets let the scroll take control this time.\n@@ -939,11 +969,10 @@ describe('ResponderEventPlugin', function() {\n \n run(config, three, {\n topLevelType: topLevelTypes.topScroll,\n- target: three.parent,\n- targetID: three.parent,\n+ targetInst: idToInstance[three.parent],\n nativeEvent: {},\n });\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.parent);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n \n });\n@@ -959,7 +988,7 @@ describe('ResponderEventPlugin', function() {\n config.responderStart.child = {order: 5};\n \n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.child = {order: 0};\n@@ -972,6 +1001,6 @@ describe('ResponderEventPlugin', function() {\n [0]\n );\n run(config, three, nativeEvent);\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n });\ndiff --git a\/src\/renderers\/shared\/reconciler\/ReactCompositeComponent.js b\/src\/renderers\/shared\/reconciler\/ReactCompositeComponent.js\nindex 22e5cc2b9a..b341eec2f8 100644\n--- a\/src\/renderers\/shared\/reconciler\/ReactCompositeComponent.js\n+++ b\/src\/renderers\/shared\/reconciler\/ReactCompositeComponent.js\n@@ -120,7 +120,6 @@ var ReactCompositeComponentMixin = {\n \/**\n * Initializes the component, renders markup, and registers event listeners.\n *\n- * @param {string} rootID DOM ID of the root node.\n * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction\n * @param {?object} nativeParent\n * @param {?object} nativeContainerInfo\n@@ -130,7 +129,6 @@ var ReactCompositeComponentMixin = {\n * @internal\n *\/\n mountComponent: function(\n- rootID,\n transaction,\n nativeParent,\n nativeContainerInfo,\n@@ -138,7 +136,6 @@ var ReactCompositeComponentMixin = {\n ) {\n this._context = context;\n this._mountOrder = nextMountID++;\n- this._rootNodeID = rootID;\n this._nativeParent = nativeParent;\n this._nativeContainerInfo = nativeContainerInfo;\n \n@@ -302,7 +299,6 @@ var ReactCompositeComponentMixin = {\n \n var markup = ReactReconciler.mountComponent(\n this._renderedComponent,\n- rootID,\n transaction,\n nativeParent,\n nativeContainerInfo,\n@@ -764,7 +760,6 @@ var ReactCompositeComponentMixin = {\n );\n var nextMarkup = ReactReconciler.mountComponent(\n this._renderedComponent,\n- this._rootNodeID,\n transaction,\n this._nativeParent,\n this._nativeContainerInfo,\ndiff --git a\/src\/renderers\/shared\/reconciler\/ReactEmptyComponent.js b\/src\/renderers\/shared\/reconciler\/ReactEmptyComponent.js\nindex c9df64d031..3095638b4e 100644\n--- a\/src\/renderers\/shared\/reconciler\/ReactEmptyComponent.js\n+++ b\/src\/renderers\/shared\/reconciler\/ReactEmptyComponent.js\n@@ -26,23 +26,19 @@ var ReactEmptyComponentInjection = {\n \n var ReactEmptyComponent = function(instantiate) {\n this._currentElement = null;\n- this._rootNodeID = null;\n this._renderedComponent = instantiate(placeholderElement);\n };\n assign(ReactEmptyComponent.prototype, {\n construct: function(element) {\n },\n mountComponent: function(\n- rootID,\n transaction,\n nativeParent,\n nativeContainerInfo,\n context\n ) {\n- this._rootNodeID = rootID;\n return ReactReconciler.mountComponent(\n this._renderedComponent,\n- rootID,\n transaction,\n nativeParent,\n nativeContainerInfo,\n@@ -54,9 +50,8 @@ assign(ReactEmptyComponent.prototype, {\n getNativeNode: function() {\n return ReactReconciler.getNativeNode(this._renderedComponent);\n },\n- unmountComponent: function(rootID, transaction, context) {\n+ unmountComponent: function() {\n ReactReconciler.unmountComponent(this._renderedComponent);\n- this._rootNodeID = null;\n this._renderedComponent = null;\n },\n });\ndiff --git a\/src\/renderers\/shared\/reconciler\/ReactEventEmitterMixin.js b\/src\/renderers\/shared\/reconciler\/ReactEventEmitterMixin.js\nindex 6ab34f0050..9295e2675e 100644\n--- a\/src\/renderers\/shared\/reconciler\/ReactEventEmitterMixin.js\n+++ b\/src\/renderers\/shared\/reconciler\/ReactEventEmitterMixin.js\n@@ -23,22 +23,15 @@ var ReactEventEmitterMixin = {\n \/**\n * Streams a fired top-level event to `EventPluginHub` where plugins have the\n * opportunity to create `ReactEvent`s to be dispatched.\n- *\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {object} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native environment event.\n *\/\n handleTopLevel: function(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget) {\n var events = EventPluginHub.extractEvents(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n );\ndiff --git a\/src\/renderers\/shared\/reconciler\/ReactMultiChild.js b\/src\/renderers\/shared\/reconciler\/ReactMultiChild.js\nindex 31c073168c..39c5a7a2fd 100644\n--- a\/src\/renderers\/shared\/reconciler\/ReactMultiChild.js\n+++ b\/src\/renderers\/shared\/reconciler\/ReactMultiChild.js\n@@ -51,15 +51,15 @@ var markupQueue = [];\n \/**\n * Enqueues markup to be rendered and inserted at a supplied index.\n *\n- * @param {string} parentID ID of the parent component.\n+ * @param {object} parentInst parent component.\n * @param {string} markup Markup that renders into an element.\n * @param {number} toIndex Destination index.\n * @private\n *\/\n-function enqueueInsertMarkup(parentID, markup, toIndex) {\n+function enqueueInsertMarkup(parentInst, markup, toIndex) {\n \/\/ NOTE: Null values reduce hidden classes.\n updateQueue.push({\n- parentID: parentID,\n+ parentInst: parentInst,\n parentNode: null,\n type: ReactMultiChildUpdateTypes.INSERT_MARKUP,\n markupIndex: markupQueue.push(markup) - 1,\n@@ -72,15 +72,15 @@ function enqueueInsertMarkup(parentID, markup, toIndex) {\n \/**\n * Enqueues moving an existing element to another index.\n *\n- * @param {string} parentID ID of the parent component.\n+ * @param {object} parentInst parent component.\n * @param {number} fromIndex Source index of the existing element.\n * @param {number} toIndex Destination index of the element.\n * @private\n *\/\n-function enqueueMove(parentID, fromIndex, toIndex) {\n+function enqueueMove(parentInst, fromIndex, toIndex) {\n \/\/ NOTE: Null values reduce hidden classes.\n updateQueue.push({\n- parentID: parentID,\n+ parentInst: parentInst,\n parentNode: null,\n type: ReactMultiChildUpdateTypes.MOVE_EXISTING,\n markupIndex: null,\n@@ -93,14 +93,14 @@ function enqueueMove(parentID, fromIndex, toIndex) {\n \/**\n * Enqueues removing an element at an index.\n *\n- * @param {string} parentID ID of the parent component.\n+ * @param {object} parentInst parent component.\n * @param {number} fromIndex Index of the element to remove.\n * @private\n *\/\n-function enqueueRemove(parentID, fromIndex) {\n+function enqueueRemove(parentInst, fromIndex) {\n \/\/ NOTE: Null values reduce hidden classes.\n updateQueue.push({\n- parentID: parentID,\n+ parentInst: parentInst,\n parentNode: null,\n type: ReactMultiChildUpdateTypes.REMOVE_NODE,\n markupIndex: null,\n@@ -113,14 +113,14 @@ function enqueueRemove(parentID, fromIndex) {\n \/**\n * Enqueues setting the markup of a node.\n *\n- * @param {string} parentID ID of the parent component.\n+ * @param {object} parentInst parent component.\n * @param {string} markup Markup that renders into an element.\n * @private\n *\/\n-function enqueueSetMarkup(parentID, markup) {\n+function enqueueSetMarkup(parentInst, markup) {\n \/\/ NOTE: Null values reduce hidden classes.\n updateQueue.push({\n- parentID: parentID,\n+ parentInst: parentInst,\n parentNode: null,\n type: ReactMultiChildUpdateTypes.SET_MARKUP,\n markupIndex: null,\n@@ -133,14 +133,14 @@ function enqueueSetMarkup(parentID, markup) {\n \/**\n * Enqueues setting the text content.\n *\n- * @param {string} parentID ID of the parent component.\n+ * @param {object} parentInst parent component.\n * @param {string} textContent Text content to set.\n * @private\n *\/\n-function enqueueTextContent(parentID, textContent) {\n+function enqueueTextContent(parentInst, textContent) {\n \/\/ NOTE: Null values reduce hidden classes.\n updateQueue.push({\n- parentID: parentID,\n+ parentInst: parentInst,\n parentNode: null,\n type: ReactMultiChildUpdateTypes.TEXT_CONTENT,\n markupIndex: null,\n@@ -249,11 +249,8 @@ var ReactMultiChild = {\n for (var name in children) {\n if (children.hasOwnProperty(name)) {\n var child = children[name];\n- \/\/ Inlined for performance, see `ReactInstanceHandles.createReactID`.\n- var rootID = this._rootNodeID + name;\n var mountImage = ReactReconciler.mountComponent(\n child,\n- rootID,\n transaction,\n this,\n this._nativeContainerInfo,\n@@ -371,7 +368,6 @@ var ReactMultiChild = {\n var nextChildren = this._reconcilerUpdateChildren(\n prevChildren, nextNestedChildrenElements, transaction, context\n );\n- this._renderedChildren = nextChildren;\n if (!nextChildren && !prevChildren) {\n return;\n }\n@@ -397,8 +393,8 @@ var ReactMultiChild = {\n this._unmountChild(prevChild);\n }\n \/\/ The child must be instantiated before it's mounted.\n- this._mountChildByNameAtIndex(\n- nextChild, name, nextIndex, transaction, context\n+ this._mountChildAtIndex(\n+ nextChild, nextIndex, transaction, context\n );\n }\n nextIndex++;\n@@ -410,6 +406,7 @@ var ReactMultiChild = {\n this._unmountChild(prevChildren[name]);\n }\n }\n+ this._renderedChildren = nextChildren;\n },\n \n \/**\n@@ -424,6 +421,14 @@ var ReactMultiChild = {\n this._renderedChildren = null;\n },\n \n+ \/**\n+ * Hook used by the DOM implementation to precache the nodes before we apply\n+ * any reorders here.\n+ *\/\n+ prepareToManageChildren: function() {\n+ \/\/ TODO: This sucks. Figure out a better design here.\n+ },\n+\n \/**\n * Moves a child component to the supplied index.\n *\n@@ -437,7 +442,8 @@ var ReactMultiChild = {\n \/\/ be moved. Otherwise, we do not need to move it because a child will be\n \/\/ inserted or moved before `child`.\n if (child._mountIndex < lastIndex) {\n- enqueueMove(this._rootNodeID, child._mountIndex, toIndex);\n+ this.prepareToManageChildren();\n+ enqueueMove(this, child._mountIndex, toIndex);\n }\n },\n \n@@ -449,7 +455,8 @@ var ReactMultiChild = {\n * @protected\n *\/\n createChild: function(child, mountImage) {\n- enqueueInsertMarkup(this._rootNodeID, mountImage, child._mountIndex);\n+ this.prepareToManageChildren();\n+ enqueueInsertMarkup(this, mountImage, child._mountIndex);\n },\n \n \/**\n@@ -459,7 +466,8 @@ var ReactMultiChild = {\n * @protected\n *\/\n removeChild: function(child) {\n- enqueueRemove(this._rootNodeID, child._mountIndex);\n+ this.prepareToManageChildren();\n+ enqueueRemove(this, child._mountIndex);\n },\n \n \/**\n@@ -469,7 +477,7 @@ var ReactMultiChild = {\n * @protected\n *\/\n setTextContent: function(textContent) {\n- enqueueTextContent(this._rootNodeID, textContent);\n+ enqueueTextContent(this, textContent);\n },\n \n \/**\n@@ -479,7 +487,7 @@ var ReactMultiChild = {\n * @protected\n *\/\n setMarkup: function(markup) {\n- enqueueSetMarkup(this._rootNodeID, markup);\n+ enqueueSetMarkup(this, markup);\n },\n \n \/**\n@@ -493,17 +501,13 @@ var ReactMultiChild = {\n * @param {ReactReconcileTransaction} transaction\n * @private\n *\/\n- _mountChildByNameAtIndex: function(\n+ _mountChildAtIndex: function(\n child,\n- name,\n index,\n transaction,\n context) {\n- \/\/ Inlined for performance, see `ReactInstanceHandles.createReactID`.\n- var rootID = this._rootNodeID + name;\n var mountImage = ReactReconciler.mountComponent(\n child,\n- rootID,\n transaction,\n this,\n this._nativeContainerInfo,\ndiff --git a\/src\/renderers\/shared\/reconciler\/ReactReconciler.js b\/src\/renderers\/shared\/reconciler\/ReactReconciler.js\nindex 7b3f453e1a..795933f2d7 100644\n--- a\/src\/renderers\/shared\/reconciler\/ReactReconciler.js\n+++ b\/src\/renderers\/shared\/reconciler\/ReactReconciler.js\n@@ -27,7 +27,6 @@ var ReactReconciler = {\n * Initializes the component, renders markup, and registers event listeners.\n *\n * @param {ReactComponent} internalInstance\n- * @param {string} rootID DOM ID of the root node.\n * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction\n * @param {?object} the containing native component instance\n * @param {?object} info about the native container\n@@ -37,14 +36,12 @@ var ReactReconciler = {\n *\/\n mountComponent: function(\n internalInstance,\n- rootID,\n transaction,\n nativeParent,\n nativeContainerInfo,\n context\n ) {\n var markup = internalInstance.mountComponent(\n- rootID,\n transaction,\n nativeParent,\n nativeContainerInfo,\ndiff --git a\/src\/renderers\/shared\/reconciler\/ReactUpdates.js b\/src\/renderers\/shared\/reconciler\/ReactUpdates.js\nindex 479488b8ed..841213f7c1 100644\n--- a\/src\/renderers\/shared\/reconciler\/ReactUpdates.js\n+++ b\/src\/renderers\/shared\/reconciler\/ReactUpdates.js\n@@ -68,8 +68,9 @@ function ReactUpdatesFlushTransaction() {\n this.reinitializeTransaction();\n this.dirtyComponentsLength = null;\n this.callbackQueue = CallbackQueue.getPooled();\n- this.reconcileTransaction =\n- ReactUpdates.ReactReconcileTransaction.getPooled(\/* forceHTML *\/ false);\n+ this.reconcileTransaction = ReactUpdates.ReactReconcileTransaction.getPooled(\n+ \/* useCreateElement *\/ true\n+ );\n }\n \n assign(\ndiff --git a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactCompositeComponent-test.js b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactCompositeComponent-test.js\nindex 298c5a1be2..c5ff51e1df 100644\n--- a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactCompositeComponent-test.js\n+++ b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactCompositeComponent-test.js\n@@ -16,7 +16,6 @@ var MorphingComponent;\n var React;\n var ReactDOM;\n var ReactCurrentOwner;\n-var ReactMount;\n var ReactPropTypes;\n var ReactServerRendering;\n var ReactTestUtils;\n@@ -34,7 +33,6 @@ describe('ReactCompositeComponent', function() {\n ReactCurrentOwner = require('ReactCurrentOwner');\n ReactPropTypes = require('ReactPropTypes');\n ReactTestUtils = require('ReactTestUtils');\n- ReactMount = require('ReactMount');\n ReactServerRendering = require('ReactServerRendering');\n ReactUpdates = require('ReactUpdates');\n \n@@ -487,8 +485,6 @@ describe('ReactCompositeComponent', function() {\n var container = document.createElement('div');\n var innerUnmounted = false;\n \n- spyOn(ReactMount, 'purgeID').andCallThrough();\n-\n var Component = React.createClass({\n render: function() {\n return (\n@@ -501,11 +497,6 @@ describe('ReactCompositeComponent', function() {\n });\n var Inner = React.createClass({\n componentWillUnmount: function() {\n- \/\/ It's important that ReactMount.purgeID is called after any component\n- \/\/ lifecycle methods, because a componentWillUnmount implementation is\n- \/\/ likely to call ReactDOM.findDOMNode(this), which will repopulate the\n- \/\/ node cache after it's been cleared, causing a memory leak.\n- expect(ReactMount.purgeID.calls.length).toBe(0);\n innerUnmounted = true;\n },\n render: function() {\n@@ -516,12 +507,6 @@ describe('ReactCompositeComponent', function() {\n ReactDOM.render(<Component \/>, container);\n ReactDOM.unmountComponentAtNode(container);\n expect(innerUnmounted).toBe(true);\n-\n- \/\/ The text and both <div \/> elements and their wrappers each call\n- \/\/ unmountIDFromEnvironment which calls purgeID, for a total of 3.\n- \/\/ TODO: Test the effect of this. E.g. does the node cache get repopulated\n- \/\/ after a getDOMNode call?\n- expect(ReactMount.purgeID.calls.length).toBe(3);\n });\n \n it('should warn when shouldComponentUpdate() returns undefined', function() {\ndiff --git a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactEmptyComponent-test.js b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactEmptyComponent-test.js\nindex c19863f65c..cf88eaeba3 100644\n--- a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactEmptyComponent-test.js\n+++ b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactEmptyComponent-test.js\n@@ -18,6 +18,8 @@ var TogglingComponent;\n \n var reactComponentExpect;\n \n+var log;\n+\n describe('ReactEmptyComponent', function() {\n beforeEach(function() {\n jest.resetModuleRegistry();\n@@ -28,16 +30,18 @@ describe('ReactEmptyComponent', function() {\n \n reactComponentExpect = require('reactComponentExpect');\n \n+ log = jasmine.createSpy();\n+\n TogglingComponent = React.createClass({\n getInitialState: function() {\n return {component: this.props.firstComponent};\n },\n componentDidMount: function() {\n- console.log(ReactDOM.findDOMNode(this));\n+ log(ReactDOM.findDOMNode(this));\n this.setState({component: this.props.secondComponent});\n },\n componentDidUpdate: function() {\n- console.log(ReactDOM.findDOMNode(this));\n+ log(ReactDOM.findDOMNode(this));\n },\n render: function() {\n var Component = this.state.component;\n@@ -81,8 +85,6 @@ describe('ReactEmptyComponent', function() {\n });\n \n it('should be able to switch between rendering null and a normal tag', () => {\n- spyOn(console, 'log');\n-\n var instance1 =\n <TogglingComponent\n firstComponent={null}\n@@ -97,17 +99,15 @@ describe('ReactEmptyComponent', function() {\n ReactTestUtils.renderIntoDocument(instance1);\n ReactTestUtils.renderIntoDocument(instance2);\n \n- expect(console.log.argsForCall.length).toBe(4);\n- expect(console.log.argsForCall[0][0]).toBe(null);\n- expect(console.log.argsForCall[1][0].tagName).toBe('DIV');\n- expect(console.log.argsForCall[2][0].tagName).toBe('DIV');\n- expect(console.log.argsForCall[3][0]).toBe(null);\n+ expect(log.argsForCall.length).toBe(4);\n+ expect(log.argsForCall[0][0]).toBe(null);\n+ expect(log.argsForCall[1][0].tagName).toBe('DIV');\n+ expect(log.argsForCall[2][0].tagName).toBe('DIV');\n+ expect(log.argsForCall[3][0]).toBe(null);\n });\n \n it('should distinguish between a script placeholder and an actual script tag',\n () => {\n- spyOn(console, 'log');\n-\n var instance1 =\n <TogglingComponent\n firstComponent={null}\n@@ -126,19 +126,17 @@ describe('ReactEmptyComponent', function() {\n ReactTestUtils.renderIntoDocument(instance2);\n }).not.toThrow();\n \n- expect(console.log.argsForCall.length).toBe(4);\n- expect(console.log.argsForCall[0][0]).toBe(null);\n- expect(console.log.argsForCall[1][0].tagName).toBe('SCRIPT');\n- expect(console.log.argsForCall[2][0].tagName).toBe('SCRIPT');\n- expect(console.log.argsForCall[3][0]).toBe(null);\n+ expect(log.argsForCall.length).toBe(4);\n+ expect(log.argsForCall[0][0]).toBe(null);\n+ expect(log.argsForCall[1][0].tagName).toBe('SCRIPT');\n+ expect(log.argsForCall[2][0].tagName).toBe('SCRIPT');\n+ expect(log.argsForCall[3][0]).toBe(null);\n }\n );\n \n it('should have getDOMNode return null when multiple layers of composite ' +\n 'components render to the same null placeholder',\n () => {\n- spyOn(console, 'log');\n-\n var GrandChild = React.createClass({\n render: function() {\n return null;\n@@ -169,11 +167,11 @@ describe('ReactEmptyComponent', function() {\n ReactTestUtils.renderIntoDocument(instance2);\n }).not.toThrow();\n \n- expect(console.log.argsForCall.length).toBe(4);\n- expect(console.log.argsForCall[0][0].tagName).toBe('DIV');\n- expect(console.log.argsForCall[1][0]).toBe(null);\n- expect(console.log.argsForCall[2][0]).toBe(null);\n- expect(console.log.argsForCall[3][0].tagName).toBe('DIV');\n+ expect(log.argsForCall.length).toBe(4);\n+ expect(log.argsForCall[0][0].tagName).toBe('DIV');\n+ expect(log.argsForCall[1][0]).toBe(null);\n+ expect(log.argsForCall[2][0]).toBe(null);\n+ expect(log.argsForCall[3][0].tagName).toBe('DIV');\n }\n );\n \ndiff --git a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactIdentity-test.js b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactIdentity-test.js\nindex f0b6b5bd9f..f5918b4abf 100644\n--- a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactIdentity-test.js\n+++ b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactIdentity-test.js\n@@ -15,7 +15,6 @@ var React;\n var ReactDOM;\n var ReactFragment;\n var ReactTestUtils;\n-var ReactMount;\n \n describe('ReactIdentity', function() {\n \n@@ -25,81 +24,50 @@ describe('ReactIdentity', function() {\n ReactDOM = require('ReactDOM');\n ReactFragment = require('ReactFragment');\n ReactTestUtils = require('ReactTestUtils');\n- ReactMount = require('ReactMount');\n });\n \n- var idExp = \/^\\.[^.]+(.*)$\/;\n- function checkID(child, expectedID) {\n- var actual = idExp.exec(ReactMount.getID(child));\n- var expected = idExp.exec(expectedID);\n- expect(actual).toBeTruthy();\n- expect(expected).toBeTruthy();\n- expect(actual[1]).toEqual(expected[1]);\n- }\n-\n function frag(obj) {\n return ReactFragment.create(obj);\n }\n \n- it('should allow keyed objects to express identity', function() {\n- var instance =\n- <div>\n- {frag({\n- first: <div \/>,\n- second: <div \/>,\n- })}\n- <\/div>;\n-\n- instance = ReactDOM.render(instance, document.createElement('div'));\n- var node = ReactDOM.findDOMNode(instance);\n- expect(node.childNodes.length).toBe(2);\n- checkID(node.childNodes[0], '.0.$first\/=10');\n- checkID(node.childNodes[1], '.0.$second\/=10');\n- });\n-\n it('should allow key property to express identity', function() {\n- var instance =\n- <div>\n- <div key=\"apple\" \/>\n- <div key=\"banana\" \/>\n- <div key={0} \/>\n- <div key={123} \/>\n+ var node;\n+ var Component = (props) =>\n+ <div ref={(c) => node = c}>\n+ <div key={props.swap ? 'banana' : 'apple'} \/>\n+ <div key={props.swap ? 'apple' : 'banana'} \/>\n <\/div>;\n \n- instance = ReactDOM.render(instance, document.createElement('div'));\n- var node = ReactDOM.findDOMNode(instance);\n- expect(node.childNodes.length).toBe(4);\n- checkID(node.childNodes[0], '.0.$apple');\n- checkID(node.childNodes[1], '.0.$banana');\n- checkID(node.childNodes[2], '.0.$0');\n- checkID(node.childNodes[3], '.0.$123');\n+ var container = document.createElement('div');\n+ ReactDOM.render(<Component \/>, container);\n+ var origChildren = Array.from(node.childNodes);\n+ ReactDOM.render(<Component swap={true} \/>, container);\n+ var newChildren = Array.from(node.childNodes);\n+ expect(origChildren[0]).toBe(newChildren[1]);\n+ expect(origChildren[1]).toBe(newChildren[0]);\n });\n \n- it('should use instance identity', function() {\n+ it('should use composite identity', function() {\n \n var Wrapper = React.createClass({\n render: function() {\n- return <a key=\"i_get_overwritten\">{this.props.children}<\/a>;\n+ return <a>{this.props.children}<\/a>;\n },\n });\n \n- var instance =\n- <div>\n- <Wrapper key=\"wrap1\"><span key=\"squirrel\" \/><\/Wrapper>\n- <Wrapper key=\"wrap2\"><span key=\"bunny\" \/><\/Wrapper>\n- <Wrapper><span key=\"chipmunk\" \/><\/Wrapper>\n- <\/div>;\n-\n- instance = ReactDOM.render(instance, document.createElement('div'));\n- var node = ReactDOM.findDOMNode(instance);\n- expect(node.childNodes.length).toBe(3);\n+ var container = document.createElement('div');\n+ var node1;\n+ var node2;\n+ ReactDOM.render(\n+ <Wrapper key=\"wrap1\"><span ref={(c) => node1 = c} \/><\/Wrapper>,\n+ container\n+ );\n+ ReactDOM.render(\n+ <Wrapper key=\"wrap2\"><span ref={(c) => node2 = c} \/><\/Wrapper>,\n+ container\n+ );\n \n- checkID(node.childNodes[0], '.0.$wrap1');\n- checkID(node.childNodes[0].firstChild, '.0.$wrap1.$squirrel');\n- checkID(node.childNodes[1], '.0.$wrap2');\n- checkID(node.childNodes[1].firstChild, '.0.$wrap2.$bunny');\n- checkID(node.childNodes[2], '.0.2');\n- checkID(node.childNodes[2].firstChild, '.0.2.$chipmunk');\n+ expect(node1).not.toBe(node2);\n });\n \n function renderAComponentWithKeyIntoContainer(key, container) {\n@@ -123,11 +91,6 @@ describe('ReactIdentity', function() {\n \n expect(ReactDOM.findDOMNode(span1)).not.toBe(null);\n expect(ReactDOM.findDOMNode(span2)).not.toBe(null);\n-\n- key = key.replace(\/=\/g, '=0');\n- checkID(ReactDOM.findDOMNode(span1), '.0.$' + key);\n- key = key.replace(\/\\\/\/g, '\/\/');\n- checkID(ReactDOM.findDOMNode(span2), '.0.1:$' + key + '\/=10');\n }\n \n it('should allow any character as a key, in a detached parent', function() {\n@@ -297,14 +260,16 @@ describe('ReactIdentity', function() {\n var wrapped = <TestContainer first={instance0} second={instance1} \/>;\n \n wrapped = ReactDOM.render(wrapped, document.createElement('div'));\n+ var div = ReactDOM.findDOMNode(wrapped);\n \n- var beforeID = ReactMount.getID(ReactDOM.findDOMNode(wrapped).firstChild);\n-\n+ var beforeA = div.childNodes[0];\n+ var beforeB = div.childNodes[1];\n wrapped.swap();\n+ var afterA = div.childNodes[1];\n+ var afterB = div.childNodes[0];\n \n- var afterID = ReactMount.getID(ReactDOM.findDOMNode(wrapped).firstChild);\n-\n- expect(beforeID).not.toEqual(afterID);\n+ expect(beforeA).toBe(afterA);\n+ expect(beforeB).toBe(afterB);\n \n });\n \ndiff --git a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactInstanceHandles-test.js b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactInstanceHandles-test.js\ndeleted file mode 100644\nindex c31af66422..0000000000\n--- a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactInstanceHandles-test.js\n+++ \/dev\/null\n@@ -1,422 +0,0 @@\n-\/**\n- * Copyright 2013-2015, Facebook, Inc.\n- * All rights reserved.\n- *\n- * This source code is licensed under the BSD-style license found in the\n- * LICENSE file in the root directory of this source tree. An additional grant\n- * of patent rights can be found in the PATENTS file in the same directory.\n- *\n- * @emails react-core\n- *\/\n-\n-'use strict';\n-\n-var React = require('React');\n-var ReactTestUtils = require('ReactTestUtils');\n-var ReactMount = require('ReactMount');\n-\n-\/**\n- * Ensure that all callbacks are invoked, passing this unique argument.\n- *\/\n-var ARG = {arg: true};\n-var ARG2 = {arg2: true};\n-\n-var ChildComponent = React.createClass({\n- render: function() {\n- return (\n- <div ref=\"DIV\">\n- <div ref=\"DIV_1\" \/>\n- <div ref=\"DIV_2\" \/>\n- <\/div>\n- );\n- },\n-});\n-\n-var ParentComponent = React.createClass({\n- render: function() {\n- return (\n- <div ref=\"P\">\n- <div ref=\"P_P1\">\n- <ChildComponent ref=\"P_P1_C1\" \/>\n- <ChildComponent ref=\"P_P1_C2\" \/>\n- <\/div>\n- <div ref=\"P_OneOff\" \/>\n- <\/div>\n- );\n- },\n-});\n-\n-function renderParentIntoDocument() {\n- return ReactTestUtils.renderIntoDocument(<ParentComponent \/>);\n-}\n-\n-describe('ReactInstanceHandles', function() {\n- var ReactInstanceHandles;\n-\n- var aggregatedArgs;\n- function argAggregator(id, isUp, arg) {\n- aggregatedArgs.push({\n- id: id,\n- isUp: isUp,\n- arg: arg,\n- });\n- }\n-\n- function getNodeID(el) {\n- if (el === null) {\n- return '';\n- }\n- return el.getAttribute('data-reactid');\n- }\n-\n- beforeEach(function() {\n- ReactInstanceHandles = require('ReactInstanceHandles');\n- aggregatedArgs = [];\n- });\n-\n- describe('findComponentRoot', function() {\n- it('should find the correct node with prefix sibling IDs', function() {\n- var parentNode = ReactTestUtils.renderIntoDocument(\n- <div>\n- <div \/>\n- {[<div key=\"x\" \/>]}\n- <\/div>\n- );\n- var childNodeB = parentNode.childNodes[1];\n-\n- expect(\n- ReactMount.getNode(\n- getNodeID(childNodeB)\n- )\n- ).toBe(childNodeB);\n- });\n-\n- it('should work around unidentified nodes', function() {\n- var parentNode = ReactTestUtils.renderIntoDocument(\n- <div>\n- {[<div key=\"x\" \/>]}\n- <\/div>\n- );\n- var childNodeB = parentNode.childNodes[0];\n-\n- \/\/ No ID on `childNodeA`.\n- var childNodeA = document.createElement('div');\n- parentNode.insertBefore(childNodeA, childNodeB);\n-\n- expect(\n- ReactMount.getNode(\n- getNodeID(childNodeB)\n- )\n- ).toBe(childNodeB);\n- });\n-\n- it('should throw if a rendered element cannot be found', function() {\n- spyOn(console, 'error');\n- var parentNode = ReactTestUtils.renderIntoDocument(\n- <table>\n- <tr \/>\n- <\/table>\n- );\n- var childNodeA = parentNode.childNodes[0];\n- var childNodeB;\n- if (childNodeA.tagName === 'TR') {\n- childNodeB = childNodeA;\n- \/\/ No ID on `childNodeA`, it was \"rendered by the browser\".\n- childNodeA = document.createElement('tbody');\n- childNodeA.appendChild(childNodeB);\n- parentNode.appendChild(childNodeA);\n- } else {\n- childNodeB = childNodeA.childNodes[0];\n- }\n- expect(childNodeA.tagName).toBe('TBODY');\n-\n- expect(\n- ReactMount.getNode(\n- getNodeID(childNodeB)\n- )\n- ).toBe(childNodeB);\n-\n- var junkID = getNodeID(childNodeB) + ':junk';\n- expect(function() {\n- ReactMount.getNode(\n- junkID\n- );\n- }).toThrow(\n- 'findComponentRoot(..., ' + junkID + '): Unable to find element. ' +\n- 'This probably means the DOM was unexpectedly mutated (e.g., by the ' +\n- 'browser), usually due to forgetting a <tbody> when using tables, ' +\n- 'nesting tags like <form>, <p>, or <a>, or using non-SVG elements in ' +\n- 'an <svg> parent. Try inspecting the child nodes of the element with ' +\n- 'React ID ``.'\n- );\n-\n- expect(console.error.argsForCall.length).toBe(1);\n- expect(console.error.argsForCall[0][0]).toContain(\n- '<tr> cannot appear as a child of <table>'\n- );\n- });\n- });\n-\n- describe('getReactRootIDFromNodeID', function() {\n- it('should support strings', function() {\n- var test = '.s_0_1.0..1';\n- var expected = '.s_0_1';\n- var actual = ReactInstanceHandles.getReactRootIDFromNodeID(test);\n- expect(actual).toEqual(expected);\n- });\n- });\n-\n- describe('getReactRootIDFromNodeID', function() {\n- it('should return null for invalid IDs', function() {\n- var getReactRootIDFromNodeID = (\n- ReactInstanceHandles.getReactRootIDFromNodeID\n- );\n-\n- expect(getReactRootIDFromNodeID(null)).toEqual(null);\n- expect(getReactRootIDFromNodeID('.')).toEqual(null);\n- expect(getReactRootIDFromNodeID('#')).toEqual(null);\n- });\n- });\n-\n- describe('traverseTwoPhase', function() {\n- it('should not traverse when traversing outside DOM', function() {\n- var targetID = '';\n- var expectedAggregation = [];\n- ReactInstanceHandles.traverseTwoPhase(targetID, argAggregator, ARG);\n- expect(aggregatedArgs).toEqual(expectedAggregation);\n- });\n-\n- it('should traverse two phase across component boundary', function() {\n- var parent = renderParentIntoDocument();\n- var targetID = getNodeID(parent.refs.P_P1_C1.refs.DIV_1);\n- var expectedAggregation = [\n- {id: getNodeID(parent.refs.P), isUp: false, arg: ARG},\n- {id: getNodeID(parent.refs.P_P1), isUp: false, arg: ARG},\n- {id: getNodeID(parent.refs.P_P1_C1.refs.DIV), isUp: false, arg: ARG},\n- {id: getNodeID(parent.refs.P_P1_C1.refs.DIV_1), isUp: false, arg: ARG},\n-\n- {id: getNodeID(parent.refs.P_P1_C1.refs.DIV_1), isUp: true, arg: ARG},\n- {id: getNodeID(parent.refs.P_P1_C1.refs.DIV), isUp: true, arg: ARG},\n- {id: getNodeID(parent.refs.P_P1), isUp: true, arg: ARG},\n- {id: getNodeID(parent.refs.P), isUp: true, arg: ARG},\n- ];\n- ReactInstanceHandles.traverseTwoPhase(targetID, argAggregator, ARG);\n- expect(aggregatedArgs).toEqual(expectedAggregation);\n- });\n-\n- it('should traverse two phase at shallowest node', function() {\n- var parent = renderParentIntoDocument();\n- var targetID = getNodeID(parent.refs.P);\n- var expectedAggregation = [\n- {id: getNodeID(parent.refs.P), isUp: false, arg: ARG},\n- {id: getNodeID(parent.refs.P), isUp: true, arg: ARG},\n- ];\n- ReactInstanceHandles.traverseTwoPhase(targetID, argAggregator, ARG);\n- expect(aggregatedArgs).toEqual(expectedAggregation);\n- });\n- });\n-\n- describe('traverseEnterLeave', function() {\n- it('should not traverse when enter\/leaving outside DOM', function() {\n- var targetID = '';\n- var expectedAggregation = [];\n- ReactInstanceHandles.traverseEnterLeave(\n- targetID, targetID, argAggregator, ARG, ARG2\n- );\n- expect(aggregatedArgs).toEqual(expectedAggregation);\n- });\n-\n- it('should not traverse if enter\/leave the same node', function() {\n- var parent = renderParentIntoDocument();\n- var leaveID = getNodeID(parent.refs.P_P1_C1.refs.DIV_1);\n- var enterID = getNodeID(parent.refs.P_P1_C1.refs.DIV_1);\n- var expectedAggregation = [];\n- ReactInstanceHandles.traverseEnterLeave(\n- leaveID, enterID, argAggregator, ARG, ARG2\n- );\n- expect(aggregatedArgs).toEqual(expectedAggregation);\n- });\n-\n- it('should traverse enter\/leave to sibling - avoids parent', function() {\n- var parent = renderParentIntoDocument();\n- var leaveID = getNodeID(parent.refs.P_P1_C1.refs.DIV_1);\n- var enterID = getNodeID(parent.refs.P_P1_C1.refs.DIV_2);\n- var expectedAggregation = [\n- {id: getNodeID(parent.refs.P_P1_C1.refs.DIV_1), isUp: true, arg: ARG},\n- \/\/ enter\/leave shouldn't fire antyhing on the parent\n- {id: getNodeID(parent.refs.P_P1_C1.refs.DIV_2), isUp: false, arg: ARG2},\n- ];\n- ReactInstanceHandles.traverseEnterLeave(\n- leaveID, enterID, argAggregator, ARG, ARG2\n- );\n- expect(aggregatedArgs).toEqual(expectedAggregation);\n- });\n-\n- it('should traverse enter\/leave to parent - avoids parent', function() {\n- var parent = renderParentIntoDocument();\n- var leaveID = getNodeID(parent.refs.P_P1_C1.refs.DIV_1);\n- var enterID = getNodeID(parent.refs.P_P1_C1.refs.DIV);\n- var expectedAggregation = [\n- {id: getNodeID(parent.refs.P_P1_C1.refs.DIV_1), isUp: true, arg: ARG},\n- ];\n- ReactInstanceHandles.traverseEnterLeave(\n- leaveID, enterID, argAggregator, ARG, ARG2\n- );\n- expect(aggregatedArgs).toEqual(expectedAggregation);\n- });\n-\n- it('should enter from the window', function() {\n- var parent = renderParentIntoDocument();\n- var leaveID = ''; \/\/ From the window or outside of the React sandbox.\n- var enterID = getNodeID(parent.refs.P_P1_C1.refs.DIV);\n- var expectedAggregation = [\n- {id: getNodeID(parent.refs.P), isUp: false, arg: ARG2},\n- {id: getNodeID(parent.refs.P_P1), isUp: false, arg: ARG2},\n- {id: getNodeID(parent.refs.P_P1_C1.refs.DIV), isUp: false, arg: ARG2},\n- ];\n- ReactInstanceHandles.traverseEnterLeave(\n- leaveID, enterID, argAggregator, ARG, ARG2\n- );\n- expect(aggregatedArgs).toEqual(expectedAggregation);\n- });\n-\n- it('should enter from the window to the shallowest', function() {\n- var parent = renderParentIntoDocument();\n- var leaveID = ''; \/\/ From the window or outside of the React sandbox.\n- var enterID = getNodeID(parent.refs.P);\n- var expectedAggregation = [\n- {id: getNodeID(parent.refs.P), isUp: false, arg: ARG2},\n- ];\n- ReactInstanceHandles.traverseEnterLeave(\n- leaveID, enterID, argAggregator, ARG, ARG2\n- );\n- expect(aggregatedArgs).toEqual(expectedAggregation);\n- });\n-\n- it('should leave to the window', function() {\n- var parent = renderParentIntoDocument();\n- var enterID = ''; \/\/ From the window or outside of the React sandbox.\n- var leaveID = getNodeID(parent.refs.P_P1_C1.refs.DIV);\n- var expectedAggregation = [\n- {id: getNodeID(parent.refs.P_P1_C1.refs.DIV), isUp: true, arg: ARG},\n- {id: getNodeID(parent.refs.P_P1), isUp: true, arg: ARG},\n- {id: getNodeID(parent.refs.P), isUp: true, arg: ARG},\n- ];\n- ReactInstanceHandles.traverseEnterLeave(\n- leaveID, enterID, argAggregator, ARG, ARG2\n- );\n- expect(aggregatedArgs).toEqual(expectedAggregation);\n- });\n-\n- it('should leave to the window from the shallowest', function() {\n- var parent = renderParentIntoDocument();\n- var enterID = ''; \/\/ From the window or outside of the React sandbox.\n- var leaveID = getNodeID(parent.refs.P_P1_C1.refs.DIV);\n- var expectedAggregation = [\n- {id: getNodeID(parent.refs.P_P1_C1.refs.DIV), isUp: true, arg: ARG},\n- {id: getNodeID(parent.refs.P_P1), isUp: true, arg: ARG},\n- {id: getNodeID(parent.refs.P), isUp: true, arg: ARG},\n- ];\n- ReactInstanceHandles.traverseEnterLeave(\n- leaveID, enterID, argAggregator, ARG, ARG2\n- );\n- expect(aggregatedArgs).toEqual(expectedAggregation);\n- });\n- });\n-\n- describe('getNextDescendantID', function() {\n- it('should return next descendent from window', function() {\n- var parent = renderParentIntoDocument();\n- expect(\n- ReactInstanceHandles._getNextDescendantID(\n- '',\n- getNodeID(parent.refs.P_P1)\n- )\n- ).toBe(getNodeID(parent.refs.P));\n- });\n-\n- it('should return window for next descendent towards window', function() {\n- expect(ReactInstanceHandles._getNextDescendantID('', '')).toBe('');\n- });\n-\n- it('should return self for next descendent towards self', function() {\n- var parent = renderParentIntoDocument();\n- expect(\n- ReactInstanceHandles._getNextDescendantID(\n- getNodeID(parent.refs.P_P1),\n- getNodeID(parent.refs.P_P1)\n- )\n- ).toBe(getNodeID(parent.refs.P_P1));\n- });\n- });\n-\n- describe('getFirstCommonAncestorID', function() {\n- it('should determine the first common ancestor correctly', function() {\n- var parent = renderParentIntoDocument();\n- var ancestors = [\n- \/\/ Common ancestor from window to deep element is ''.\n- {one: null,\n- two: parent.refs.P_P1_C1.refs.DIV_1,\n- com: null,\n- },\n- \/\/ Same as previous - reversed direction.\n- {one: parent.refs.P_P1_C1.refs.DIV_1,\n- two: null,\n- com: null,\n- },\n- \/\/ Common ancestor from window to shallow id is ''.\n- {one: parent.refs.P,\n- two: null,\n- com: null,\n- },\n- \/\/ Common ancestor with self is self.\n- {one: parent.refs.P_P1_C1.refs.DIV_1,\n- two: parent.refs.P_P1_C1.refs.DIV_1,\n- com: parent.refs.P_P1_C1.refs.DIV_1,\n- },\n- \/\/ Common ancestor with self is self - even if topmost DOM.\n- {one: parent.refs.P, two: parent.refs.P, com: parent.refs.P},\n- \/\/ Siblings\n- {\n- one: parent.refs.P_P1_C1.refs.DIV_1,\n- two: parent.refs.P_P1_C1.refs.DIV_2,\n- com: parent.refs.P_P1_C1.refs.DIV,\n- },\n- \/\/ Common ancestor with parent is the parent.\n- {\n- one: parent.refs.P_P1_C1.refs.DIV_1,\n- two: parent.refs.P_P1_C1.refs.DIV,\n- com: parent.refs.P_P1_C1.refs.DIV,\n- },\n- \/\/ Common ancestor with grandparent is the grandparent.\n- {\n- one: parent.refs.P_P1_C1.refs.DIV_1,\n- two: parent.refs.P_P1,\n- com: parent.refs.P_P1,\n- },\n- \/\/ Grantparent across subcomponent boundaries.\n- {\n- one: parent.refs.P_P1_C1.refs.DIV_1,\n- two: parent.refs.P_P1_C2.refs.DIV_1,\n- com: parent.refs.P_P1,\n- },\n- \/\/ Something deep with something one-off.\n- {\n- one: parent.refs.P_P1_C1.refs.DIV_1,\n- two: parent.refs.P_OneOff,\n- com: parent.refs.P,\n- },\n- ];\n- var i;\n- for (i = 0; i < ancestors.length; i++) {\n- var plan = ancestors[i];\n- var firstCommon = ReactInstanceHandles.getFirstCommonAncestorID(\n- getNodeID(plan.one),\n- getNodeID(plan.two)\n- );\n- expect(firstCommon).toBe(getNodeID(plan.com));\n- }\n- });\n- });\n-\n-});\ndiff --git a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactMultiChild-test.js b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactMultiChild-test.js\nindex fbe46a69f2..f06e242f2e 100644\n--- a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactMultiChild-test.js\n+++ b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactMultiChild-test.js\n@@ -149,62 +149,4 @@ describe('ReactMultiChild', function() {\n expect(mockUnmount.mock.calls.length).toBe(1);\n });\n });\n-\n- describe('innerHTML', function() {\n- var setInnerHTML;\n-\n- \/\/ Only run this suite if `Element.prototype.innerHTML` can be spied on.\n- var innerHTMLDescriptor = Object.getOwnPropertyDescriptor(\n- Element.prototype,\n- 'innerHTML'\n- );\n- if (!innerHTMLDescriptor) {\n- return;\n- }\n-\n- beforeEach(function() {\n- var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');\n- ReactDOMFeatureFlags.useCreateElement = false;\n-\n- Object.defineProperty(Element.prototype, 'innerHTML', {\n- set: setInnerHTML = jasmine.createSpy().andCallFake(\n- innerHTMLDescriptor.set\n- ),\n- });\n- });\n-\n- it('should only set `innerHTML` once on update', function() {\n- var container = document.createElement('div');\n-\n- ReactDOM.render(\n- <div>\n- <p><span \/><\/p>\n- <p><span \/><\/p>\n- <p><span \/><\/p>\n- <\/div>,\n- container\n- );\n- \/\/ Warm the cache used by `getMarkupWrap`.\n- ReactDOM.render(\n- <div>\n- <p><span \/><span \/><\/p>\n- <p><span \/><span \/><\/p>\n- <p><span \/><span \/><\/p>\n- <\/div>,\n- container\n- );\n- expect(setInnerHTML).toHaveBeenCalled();\n- var callCountOnMount = setInnerHTML.calls.length;\n-\n- ReactDOM.render(\n- <div>\n- <p><span \/><span \/><span \/><\/p>\n- <p><span \/><span \/><span \/><\/p>\n- <p><span \/><span \/><span \/><\/p>\n- <\/div>,\n- container\n- );\n- expect(setInnerHTML.calls.length).toBe(callCountOnMount + 1);\n- });\n- });\n });\ndiff --git a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactMultiChildReconcile-test.js b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactMultiChildReconcile-test.js\nindex 778aeda9aa..012691a52c 100644\n--- a\/src\/renderers\/shared\/reconciler\/__tests__\/ReactMultiChildReconcile-test.js\n+++ b\/src\/renderers\/shared\/reconciler\/__tests__\/ReactMultiChildReconcile-test.js\n@@ -13,8 +13,8 @@\n \n var React = require('React');\n var ReactDOM = require('ReactDOM');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactInstanceMap = require('ReactInstanceMap');\n-var ReactMount = require('ReactMount');\n \n var mapObject = require('mapObject');\n \n@@ -122,7 +122,7 @@ var FriendsStatusDisplay = React.createClass({\n });\n \n \n-function getInteralStateByUserName(statusDisplays) {\n+function getInternalStateByUserName(statusDisplays) {\n return mapObject(statusDisplays, function(statusDisplay, key) {\n return statusDisplay.getInternalState();\n });\n@@ -190,7 +190,8 @@ function verifyDomOrderingAccurate(parentInstance, statusDisplays) {\n var i;\n var orderedDomIDs = [];\n for (i = 0; i < statusDisplayNodes.length; i++) {\n- orderedDomIDs.push(ReactMount.getID(statusDisplayNodes[i]));\n+ var inst = ReactDOMComponentTree.getInstanceFromNode(statusDisplayNodes[i]);\n+ orderedDomIDs.push(inst._rootNodeID);\n }\n \n var orderedLogicalIDs = [];\n@@ -200,7 +201,9 @@ function verifyDomOrderingAccurate(parentInstance, statusDisplays) {\n continue;\n }\n var statusDisplay = statusDisplays[username];\n- orderedLogicalIDs.push(ReactInstanceMap.get(statusDisplay)._rootNodeID);\n+ orderedLogicalIDs.push(\n+ ReactInstanceMap.get(statusDisplay)._renderedComponent._rootNodeID\n+ );\n }\n expect(orderedDomIDs).toEqual(orderedLogicalIDs);\n }\n@@ -216,7 +219,7 @@ function testPropsSequence(sequence) {\n container\n );\n var statusDisplays = parentInstance.getStatusDisplays();\n- var lastInternalStates = getInteralStateByUserName(statusDisplays);\n+ var lastInternalStates = getInternalStateByUserName(statusDisplays);\n verifyStatuses(statusDisplays, sequence[0]);\n \n for (i = 1; i < sequence.length; i++) {\n@@ -229,7 +232,7 @@ function testPropsSequence(sequence) {\n verifyStatesPreserved(lastInternalStates, statusDisplays);\n verifyDomOrderingAccurate(parentInstance, statusDisplays);\n \n- lastInternalStates = getInteralStateByUserName(statusDisplays);\n+ lastInternalStates = getInternalStateByUserName(statusDisplays);\n }\n }\n \ndiff --git a\/src\/shared\/utils\/__tests__\/traverseAllChildren-test.js b\/src\/shared\/utils\/__tests__\/traverseAllChildren-test.js\nindex 20efb0fdc0..a4c8954db5 100644\n--- a\/src\/shared\/utils\/__tests__\/traverseAllChildren-test.js\n+++ b\/src\/shared\/utils\/__tests__\/traverseAllChildren-test.js\n@@ -162,10 +162,10 @@ describe('traverseAllChildren', function() {\n traverseContext, div, '.$divNode'\n );\n expect(traverseFn).toHaveBeenCalledWith(\n- traverseContext, <span key=\"span\/.$spanNode\" \/>, '.1:0:$span\/=1$spanNode'\n+ traverseContext, <span key=\"span\/.$spanNode\" \/>, '.1:0:$span\/.$spanNode'\n );\n expect(traverseFn).toHaveBeenCalledWith(\n- traverseContext, <a key=\"a\/.$aNode\" \/>, '.2:$a\/=1$aNode'\n+ traverseContext, <a key=\"a\/.$aNode\" \/>, '.2:$a\/.$aNode'\n );\n expect(traverseFn).toHaveBeenCalledWith(\n traverseContext, 'string', '.3'\n@@ -225,25 +225,25 @@ describe('traverseAllChildren', function() {\n expect(traverseFn).toHaveBeenCalledWith(\n traverseContext,\n <div key=\"firstHalfKey\/.$keyZero\" \/>,\n- '.0:$firstHalfKey\/=1$keyZero'\n+ '.0:$firstHalfKey\/.$keyZero'\n );\n \n expect(traverseFn).toHaveBeenCalledWith(\n traverseContext,\n <div key=\"firstHalfKey\/.$keyTwo\" \/>,\n- '.0:$firstHalfKey\/=1$keyTwo'\n+ '.0:$firstHalfKey\/.$keyTwo'\n );\n \n expect(traverseFn).toHaveBeenCalledWith(\n traverseContext,\n <div key=\"secondHalfKey\/.$keyFour\" \/>,\n- '.0:$secondHalfKey\/=1$keyFour'\n+ '.0:$secondHalfKey\/.$keyFour'\n );\n \n expect(traverseFn).toHaveBeenCalledWith(\n traverseContext,\n <div key=\"keyFive\/.$keyFiveInner\" \/>,\n- '.0:$keyFive\/=1$keyFiveInner'\n+ '.0:$keyFive\/.$keyFiveInner'\n );\n });\n \ndiff --git a\/src\/shared\/utils\/getNativeComponentFromComposite.js b\/src\/shared\/utils\/getNativeComponentFromComposite.js\nnew file mode 100644\nindex 0000000000..69e6fc30b8\n--- \/dev\/null\n+++ b\/src\/shared\/utils\/getNativeComponentFromComposite.js\n@@ -0,0 +1,30 @@\n+\/**\n+ * Copyright 2013-2015, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule getNativeComponentFromComposite\n+ *\/\n+\n+'use strict';\n+\n+var ReactNodeTypes = require('ReactNodeTypes');\n+\n+function getNativeComponentFromComposite(inst) {\n+ var type;\n+\n+ while ((type = inst._renderedNodeType) === ReactNodeTypes.COMPOSITE) {\n+ inst = inst._renderedComponent;\n+ }\n+\n+ if (type === ReactNodeTypes.NATIVE) {\n+ return inst._renderedComponent;\n+ } else if (type === ReactNodeTypes.EMPTY) {\n+ return null;\n+ }\n+}\n+\n+module.exports = getNativeComponentFromComposite;\ndiff --git a\/src\/shared\/utils\/traverseAllChildren.js b\/src\/shared\/utils\/traverseAllChildren.js\nindex 488a092d28..f7f7e878eb 100644\n--- a\/src\/shared\/utils\/traverseAllChildren.js\n+++ b\/src\/shared\/utils\/traverseAllChildren.js\n@@ -13,13 +13,12 @@\n \n var ReactCurrentOwner = require('ReactCurrentOwner');\n var ReactElement = require('ReactElement');\n-var ReactInstanceHandles = require('ReactInstanceHandles');\n \n var getIteratorFn = require('getIteratorFn');\n var invariant = require('invariant');\n var warning = require('warning');\n \n-var SEPARATOR = ReactInstanceHandles.SEPARATOR;\n+var SEPARATOR = '.';\n var SUBSEPARATOR = ':';\n \n \/**\n@@ -29,11 +28,10 @@ var SUBSEPARATOR = ':';\n \n var userProvidedKeyEscaperLookup = {\n '=': '=0',\n- '.': '=1',\n ':': '=2',\n };\n \n-var userProvidedKeyEscapeRegex = \/[=.:]\/g;\n+var userProvidedKeyEscapeRegex = \/[=:]\/g;\n \n var didWarnAboutMaps = false;\n \ndiff --git a\/src\/test\/ReactDefaultPerf.js b\/src\/test\/ReactDefaultPerf.js\nindex 49041637b2..04a2fb60b1 100644\n--- a\/src\/test\/ReactDefaultPerf.js\n+++ b\/src\/test\/ReactDefaultPerf.js\n@@ -13,6 +13,7 @@\n 'use strict';\n \n var DOMProperty = require('DOMProperty');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactDefaultPerfAnalysis = require('ReactDefaultPerfAnalysis');\n var ReactMount = require('ReactMount');\n var ReactPerf = require('ReactPerf');\n@@ -27,9 +28,26 @@ function addValue(obj, key, val) {\n obj[key] = (obj[key] || 0) + val;\n }\n \n+\/\/ Composites don't have any built-in ID: we have to make our own\n+var compositeIDMap;\n+var compositeIDCounter = 17000;\n+function getIDOfComposite(inst) {\n+ if (!compositeIDMap) {\n+ compositeIDMap = new WeakMap();\n+ }\n+ if (compositeIDMap.has(inst)) {\n+ return compositeIDMap.get(inst);\n+ } else {\n+ var id = compositeIDCounter++;\n+ compositeIDMap.set(inst, id);\n+ return id;\n+ }\n+}\n+\n var ReactDefaultPerf = {\n _allMeasurements: [], \/\/ last item in the list is the current one\n _mountStack: [0],\n+ _compositeStack: [],\n _injected: false,\n \n start: function() {\n@@ -124,10 +142,10 @@ var ReactDefaultPerf = {\n \n _recordWrite: function(id, fnName, totalTime, args) {\n \/\/ TODO: totalTime isn't that useful since it doesn't count paints\/reflows\n- var writes =\n+ var entry =\n ReactDefaultPerf\n- ._allMeasurements[ReactDefaultPerf._allMeasurements.length - 1]\n- .writes;\n+ ._allMeasurements[ReactDefaultPerf._allMeasurements.length - 1];\n+ var writes = entry.writes;\n writes[id] = writes[id] || [];\n writes[id].push({\n type: fnName,\n@@ -142,27 +160,30 @@ var ReactDefaultPerf = {\n var rv;\n var start;\n \n+ var entry = ReactDefaultPerf._allMeasurements[\n+ ReactDefaultPerf._allMeasurements.length - 1\n+ ];\n+\n if (fnName === '_renderNewRootComponent' ||\n fnName === 'flushBatchedUpdates') {\n \/\/ A \"measurement\" is a set of metrics recorded for each flush. We want\n \/\/ to group the metrics for a given flush together so we can look at the\n \/\/ components that rendered and the DOM operations that actually\n \/\/ happened to determine the amount of \"wasted work\" performed.\n- ReactDefaultPerf._allMeasurements.push({\n+ ReactDefaultPerf._allMeasurements.push(entry = {\n exclusive: {},\n inclusive: {},\n render: {},\n counts: {},\n writes: {},\n displayNames: {},\n+ hierarchy: {},\n totalTime: 0,\n created: {},\n });\n start = performanceNow();\n rv = func.apply(this, args);\n- ReactDefaultPerf._allMeasurements[\n- ReactDefaultPerf._allMeasurements.length - 1\n- ].totalTime = performanceNow() - start;\n+ entry.totalTime = performanceNow() - start;\n return rv;\n } else if (fnName === '_mountImageIntoNode' ||\n moduleName === 'ReactDOMIDOperations' ||\n@@ -175,8 +196,7 @@ var ReactDefaultPerf = {\n totalTime = performanceNow() - start;\n \n if (fnName === '_mountImageIntoNode') {\n- var mountID = ReactMount.getID(args[1]);\n- ReactDefaultPerf._recordWrite(mountID, fnName, totalTime, args[0]);\n+ ReactDefaultPerf._recordWrite('', fnName, totalTime, args[0]);\n } else if (fnName === 'dangerouslyProcessChildrenUpdates') {\n \/\/ special format\n args[0].forEach(function(update) {\n@@ -194,7 +214,7 @@ var ReactDefaultPerf = {\n writeArgs.markup = args[1][update.markupIndex];\n }\n ReactDefaultPerf._recordWrite(\n- update.parentID,\n+ update.parentInst._rootNodeID,\n update.type,\n totalTime,\n writeArgs\n@@ -203,8 +223,13 @@ var ReactDefaultPerf = {\n } else {\n \/\/ basic format\n var id = args[0];\n- if (typeof id === 'object') {\n- id = ReactMount.getID(args[0]);\n+ if (moduleName === 'EventPluginHub') {\n+ id = id._rootNodeID;\n+ } else if (fnName === 'replaceNodeWithMarkup') {\n+ \/\/ Old node is already unmounted; can't get its instance\n+ id = ReactDOMComponentTree.getInstanceFromNode(args[1].node)._rootNodeID;\n+ } else if (typeof id === 'object') {\n+ id = ReactDOMComponentTree.getInstanceFromNode(args[0])._rootNodeID;\n }\n ReactDefaultPerf._recordWrite(\n id,\n@@ -223,16 +248,11 @@ var ReactDefaultPerf = {\n return func.apply(this, args);\n }\n \n- var rootNodeID = fnName === 'mountComponent' ?\n- args[0] :\n- this._rootNodeID;\n+ var rootNodeID = getIDOfComposite(this);\n var isRender = fnName === '_renderValidatedComponent';\n var isMount = fnName === 'mountComponent';\n \n var mountStack = ReactDefaultPerf._mountStack;\n- var entry = ReactDefaultPerf._allMeasurements[\n- ReactDefaultPerf._allMeasurements.length - 1\n- ];\n \n if (isRender) {\n addValue(entry.counts, rootNodeID, 1);\n@@ -241,10 +261,14 @@ var ReactDefaultPerf = {\n mountStack.push(0);\n }\n \n+ ReactDefaultPerf._compositeStack.push(rootNodeID);\n+\n start = performanceNow();\n rv = func.apply(this, args);\n totalTime = performanceNow() - start;\n \n+ ReactDefaultPerf._compositeStack.pop();\n+\n if (isRender) {\n addValue(entry.render, rootNodeID, totalTime);\n } else if (isMount) {\n@@ -264,6 +288,16 @@ var ReactDefaultPerf = {\n };\n \n return rv;\n+ } else if (\n+ (moduleName === 'ReactDOMComponent' ||\n+ moduleName === 'ReactDOMTextComponent') &&\n+ (fnName === 'mountComponent' ||\n+ fnName === 'receiveComponent')) {\n+\n+ rv = func.apply(this, args);\n+ entry.hierarchy[this._rootNodeID] =\n+ ReactDefaultPerf._compositeStack.slice();\n+ return rv;\n } else {\n return func.apply(this, args);\n }\ndiff --git a\/src\/test\/ReactDefaultPerfAnalysis.js b\/src\/test\/ReactDefaultPerfAnalysis.js\nindex 4806940b7d..0134a839ae 100644\n--- a\/src\/test\/ReactDefaultPerfAnalysis.js\n+++ b\/src\/test\/ReactDefaultPerfAnalysis.js\n@@ -173,18 +173,23 @@ function getUnchangedComponents(measurement) {\n \/\/ render anything to the DOM and return a mapping of their ID to\n \/\/ the amount of time it took to render the entire subtree.\n var cleanComponents = {};\n- var dirtyLeafIDs = Object.keys(measurement.writes);\n+ var writes = measurement.writes;\n+ var dirtyComposites = {};\n+ Object.keys(writes).forEach(function(id) {\n+ writes[id].forEach(function(write) {\n+ \/\/ Root mounting (innerHTML set) is recorded with an ID of ''\n+ if (id !== '') {\n+ measurement.hierarchy[id].forEach((c) => dirtyComposites[c] = true);\n+ }\n+ });\n+ });\n var allIDs = assign({}, measurement.exclusive, measurement.inclusive);\n \n for (var id in allIDs) {\n var isDirty = false;\n- \/\/ For each component that rendered, see if a component that triggered\n- \/\/ a DOM op is in its subtree.\n- for (var i = 0; i < dirtyLeafIDs.length; i++) {\n- if (dirtyLeafIDs[i].indexOf(id) === 0) {\n- isDirty = true;\n- break;\n- }\n+ \/\/ See if any of the DOM operations applied to this component's subtree.\n+ if (dirtyComposites[id]) {\n+ isDirty = true;\n }\n \/\/ check if component newly created\n if (measurement.created[id]) {\ndiff --git a\/src\/test\/ReactTestUtils.js b\/src\/test\/ReactTestUtils.js\nindex 7efb77da10..b7c4cd5d93 100644\n--- a\/src\/test\/ReactTestUtils.js\n+++ b\/src\/test\/ReactTestUtils.js\n@@ -11,19 +11,17 @@\n \n 'use strict';\n \n-var ClientReactRootIndex = require('ClientReactRootIndex');\n var EventConstants = require('EventConstants');\n var EventPluginHub = require('EventPluginHub');\n var EventPluginRegistry = require('EventPluginRegistry');\n var EventPropagators = require('EventPropagators');\n var React = require('React');\n var ReactDOM = require('ReactDOM');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactElement = require('ReactElement');\n var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');\n var ReactCompositeComponent = require('ReactCompositeComponent');\n-var ReactInstanceHandles = require('ReactInstanceHandles');\n var ReactInstanceMap = require('ReactInstanceMap');\n-var ReactMount = require('ReactMount');\n var ReactUpdates = require('ReactUpdates');\n var SyntheticEvent = require('SyntheticEvent');\n \n@@ -432,7 +430,7 @@ ReactShallowRenderer.prototype.render = function(element, context) {\n if (!context) {\n context = emptyObject;\n }\n- var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(false);\n+ var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(true);\n transaction.perform(this._render, this, element, transaction, context);\n ReactUpdates.ReactReconcileTransaction.release(transaction);\n };\n@@ -447,13 +445,10 @@ ReactShallowRenderer.prototype._render = function(element, transaction, context)\n if (this._instance) {\n this._instance.receiveComponent(element, transaction, context);\n } else {\n- var rootID = ReactInstanceHandles.createReactRootID(\n- ClientReactRootIndex.createReactRootIndex()\n- );\n var instance = new ShallowComponentWrapper(element.type);\n instance.construct(element);\n \n- instance.mountComponent(rootID, transaction, null, null, context);\n+ instance.mountComponent(transaction, null, null, context);\n \n this._instance = instance;\n }\n@@ -490,7 +485,7 @@ function makeSimulator(eventType) {\n \/\/ properly destroying any properties assigned from `eventData` upon release\n var event = new SyntheticEvent(\n dispatchConfig,\n- ReactMount.getID(node),\n+ ReactDOMComponentTree.getInstanceFromNode(node),\n fakeNativeEvent,\n node\n );\ndiff --git a\/src\/test\/__tests__\/ReactDefaultPerf-test.js b\/src\/test\/__tests__\/ReactDefaultPerf-test.js\nindex 9eb3867a9e..f04f9bebaf 100644\n--- a\/src\/test\/__tests__\/ReactDefaultPerf-test.js\n+++ b\/src\/test\/__tests__\/ReactDefaultPerf-test.js\n@@ -36,13 +36,13 @@ describe('ReactDefaultPerf', function() {\n \n App = React.createClass({\n render: function() {\n- return <div><Box \/><Box \/><\/div>;\n+ return <div><Box \/><Box flip={this.props.flipSecond} \/><\/div>;\n },\n });\n \n Box = React.createClass({\n render: function() {\n- return <div><input \/><\/div>;\n+ return <div key={!!this.props.flip}><input \/><\/div>;\n },\n });\n \n@@ -84,6 +84,28 @@ describe('ReactDefaultPerf', function() {\n \/*eslint-enable dot-notation *\/\n });\n \n+ it('should count no-op update in child as waste', function() {\n+ var container = document.createElement('div');\n+ ReactDOM.render(<App \/>, container);\n+\n+ \/\/ Here, we add a Box -- two of the <Box \/> updates are wasted time (but the\n+ \/\/ addition of the third is not)\n+ var measurements = measure(() => {\n+ ReactDOM.render(<App flipSecond={true} \/>, container);\n+ });\n+\n+ var summary = ReactDefaultPerf.getMeasurementsSummaryMap(measurements);\n+ expect(summary.length).toBe(1);\n+\n+ \/*eslint-disable dot-notation *\/\n+\n+ expect(summary[0]['Owner > component']).toBe('App > Box');\n+ expect(summary[0]['Wasted time (ms)']).not.toBe(0);\n+ expect(summary[0]['Instances']).toBe(1);\n+\n+ \/*eslint-enable dot-notation *\/\n+ });\n+\n function expectNoWaste(fn) {\n var measurements = measure(fn);\n var summary = ReactDefaultPerf.getMeasurementsSummaryMap(measurements);\n"}</article></body></html>

<\/b>'}} \/>\n+ <\/div>\n+ );\n+ },\n+ });\n+\n+ function renderAndQuery(sel) {\n+ var root = renderMarkupIntoDocument(

\n+

\n+ <\/div>\n+ );\n+ },\n+});\n+\n+var ParentComponent = React.createClass({\n+ render: function() {\n+ return (\n+

\n+

\n+ \n+ \n+ <\/div>\n+

, document.createElement('div'));\n+ var component = ReactDOM.render(

, document.createElement('div'));\n expect(handleTopLevel.mock.calls.length).toBe(0);\n ReactEventListener.dispatchEvent(\n 'topMouseOut',\n@@ -64,9 +60,9 @@ describe('ReactEventListener', function() {\n var childControl =

Child<\/div>;\n var parentContainer = document.createElement('div');\n var parentControl =

Parent<\/div>;\n var grandParentContainer = document.createElement('div');\n var grandParentControl =

Parent<\/div>;\n- childControl = ReactMount.render(childControl, childContainer);\n+ childControl = ReactDOM.render(childControl, childContainer);\n parentControl =\n- ReactMount.render(parentControl, parentContainer);\n+ ReactDOM.render(parentControl, parentContainer);\n grandParentControl =\n- ReactMount.render(grandParentControl, grandParentContainer);\n+ ReactDOM.render(grandParentControl, grandParentContainer);\n ReactDOM.findDOMNode(parentControl).appendChild(childContainer);\n ReactDOM.findDOMNode(grandParentControl).appendChild(parentContainer);\n \n@@ -105,11 +101,11 @@ describe('ReactEventListener', function() {\n var calls = handleTopLevel.mock.calls;\n expect(calls.length).toBe(3);\n expect(calls[0][EVENT_TARGET_PARAM])\n- .toBe(ReactDOM.findDOMNode(childControl));\n+ .toBe(ReactDOMComponentTree.getInstanceFromNode(childControl));\n expect(calls[1][EVENT_TARGET_PARAM])\n- .toBe(ReactDOM.findDOMNode(parentControl));\n+ .toBe(ReactDOMComponentTree.getInstanceFromNode(parentControl));\n expect(calls[2][EVENT_TARGET_PARAM])\n- .toBe(ReactDOM.findDOMNode(grandParentControl));\n+ .toBe(ReactDOMComponentTree.getInstanceFromNode(grandParentControl));\n });\n \n it('should not get confused by disappearing elements', function() {\n@@ -117,9 +113,9 @@ describe('ReactEventListener', function() {\n var childControl =

Child<\/div>;\n var parentContainer = document.createElement('div');\n var parentControl =

Parent<\/div>;\n- childControl = ReactMount.render(childControl, childContainer);\n+ childControl = ReactDOM.render(childControl, childContainer);\n parentControl =\n- ReactMount.render(parentControl, parentContainer);\n+ ReactDOM.render(parentControl, parentContainer);\n ReactDOM.findDOMNode(parentControl).appendChild(childContainer);\n \n \/\/ ReactBrowserEventEmitter.handleTopLevel might remove the\n@@ -130,7 +126,7 @@ describe('ReactEventListener', function() {\n handleTopLevel.mockImplementation(\n function(topLevelType, topLevelTarget, topLevelTargetID, nativeEvent) {\n if (topLevelTarget === childNode) {\n- ReactMount.unmountComponentAtNode(childContainer);\n+ ReactDOM.unmountComponentAtNode(childContainer);\n }\n }\n );\n@@ -142,19 +138,20 @@ describe('ReactEventListener', function() {\n \n var calls = handleTopLevel.mock.calls;\n expect(calls.length).toBe(2);\n- expect(calls[0][EVENT_TARGET_PARAM]).toBe(childNode);\n+ expect(calls[0][EVENT_TARGET_PARAM])\n+ .toBe(ReactDOMComponentTree.getInstanceFromNode(childNode));\n expect(calls[1][EVENT_TARGET_PARAM])\n- .toBe(ReactDOM.findDOMNode(parentControl));\n+ .toBe(ReactDOMComponentTree.getInstanceFromNode(parentControl));\n });\n \n it('should batch between handlers from different roots', function() {\n var childContainer = document.createElement('div');\n var parentContainer = document.createElement('div');\n- var childControl = ReactMount.render(\n+ var childControl = ReactDOM.render(\n

Child<\/div>,\n childContainer\n );\n- var parentControl = ReactMount.render(\n+ var parentControl = ReactDOM.render(\n

Parent<\/div>,\n parentContainer\n );\n@@ -165,7 +162,7 @@ describe('ReactEventListener', function() {\n var childNode = ReactDOM.findDOMNode(childControl);\n handleTopLevel.mockImplementation(\n function(topLevelType, topLevelTarget, topLevelTargetID, nativeEvent) {\n- ReactMount.render(\n+ ReactDOM.render(\n

{topLevelTarget === childNode ? '1' : '2'}<\/div>,\n childContainer\n );\n@@ -210,6 +207,6 @@ describe('ReactEventListener', function() {\n var calls = handleTopLevel.mock.calls;\n expect(calls.length).toBe(1);\n expect(calls[0][EVENT_TARGET_PARAM])\n- .toBe(ReactDOM.findDOMNode(instance.getInner()));\n+ .toBe(ReactDOMComponentTree.getInstanceFromNode(instance.getInner()));\n });\n });\ndiff --git a\/src\/renderers\/dom\/client\/__tests__\/ReactMount-test.js b\/src\/renderers\/dom\/client\/__tests__\/ReactMount-test.js\nindex 6328a06092..7c41815040 100644\n--- a\/src\/renderers\/dom\/client\/__tests__\/ReactMount-test.js\n+++ b\/src\/renderers\/dom\/client\/__tests__\/ReactMount-test.js\n@@ -11,23 +11,33 @@\n \n 'use strict';\n \n+var React;\n+var ReactDOM;\n+var ReactDOMServer;\n+var ReactMount;\n+var ReactTestUtils;\n+var WebComponents;\n+\n describe('ReactMount', function() {\n- var React = require('React');\n- var ReactDOM = require('ReactDOM');\n- var ReactDOMServer = require('ReactDOMServer');\n- var ReactMount = require('ReactMount');\n- var ReactTestUtils = require('ReactTestUtils');\n- var WebComponents = WebComponents;\n-\n- try {\n- if (WebComponents === undefined && typeof jest !== 'undefined') {\n- WebComponents = require('WebComponents');\n+ beforeEach(function() {\n+ jest.resetModuleRegistry();\n+\n+ React = require('React');\n+ ReactDOM = require('ReactDOM');\n+ ReactDOMServer = require('ReactDOMServer');\n+ ReactMount = require('ReactMount');\n+ ReactTestUtils = require('ReactTestUtils');\n+\n+ try {\n+ if (WebComponents === undefined && typeof jest !== 'undefined') {\n+ WebComponents = require('WebComponents');\n+ }\n+ } catch (e) {\n+ \/\/ Parse error expected on engines that don't support setters\n+ \/\/ or otherwise aren't supportable by the polyfill.\n+ \/\/ Leave WebComponents undefined.\n }\n- } catch (e) {\n- \/\/ Parse error expected on engines that don't support setters\n- \/\/ or otherwise aren't supportable by the polyfill.\n- \/\/ Leave WebComponents undefined.\n- }\n+ });\n \n describe('unmountComponentAtNode', function() {\n it('throws when given a non-node', function() {\n@@ -196,31 +206,6 @@ describe('ReactMount', function() {\n });\n }\n \n- it('warns when using two copies of React before throwing', function() {\n- jest.resetModuleRegistry();\n- var RD1 = require('ReactDOM');\n- jest.resetModuleRegistry();\n- var RD2 = require('ReactDOM');\n-\n- var X = React.createClass({\n- render: function() {\n- return

;\n- },\n- });\n-\n- var container = document.createElement('div');\n- spyOn(console, 'error');\n- var component = RD1.render(, container);\n- expect(console.error.argsForCall.length).toBe(0);\n-\n- \/\/ This fails but logs a warning first\n- expect(function() {\n- RD2.findDOMNode(component);\n- }).toThrow();\n- expect(console.error.argsForCall.length).toBe(1);\n- expect(console.error.argsForCall[0][0]).toContain('two copies of React');\n- });\n-\n it('should warn if render removes React-rendered children', function() {\n var container = document.createElement('container');\n var Component = React.createClass({\n@@ -243,61 +228,6 @@ describe('ReactMount', function() {\n );\n });\n \n- it('should not crash in node cache when unmounting', function() {\n- var Component = React.createClass({\n- render: function() {\n- \/\/ Add refs to some nodes so that they get traversed and cached\n- return (\n-

\n-

b<\/div>\n- {this.props.showC &&

c<\/div>}\n- <\/div>\n- );\n- },\n- });\n-\n- var container = document.createElement('container');\n-\n- ReactDOM.render(

<\/div>, container);\n-\n- \/\/ Right now, A and B are in the cache. When we add C, it won't get added to\n- \/\/ the cache (assuming markup-string mode).\n- ReactDOM.render(

<\/div>, container);\n-\n- \/\/ Remove A, B, and C. Unmounting C shouldn't cause B to get recached.\n- ReactDOM.render(

<\/div>, container);\n-\n- \/\/ Add them back -- this shouldn't cause a cached node collision.\n- ReactDOM.render(

hello<\/h1>\n+ \n+ \n+ <\/p>\n+ goodbye.\n+

dillon1000/react

Files changed