Proof-of-concept, remove data-reactid and nodeCache, traverse inserted markup immediately

perf/lib/BrowserPerfRunnerApp.react.js

@@ -197,8 +197,10 @@ var GridViewTable = React.createClass({
 
   render: function(){
     return React.DOM.table(null,
-      this._renderRow(null, 0),
-      this.props.rows.map(this._renderRow, this)
+      React.DOM.tbody(null,
+        this._renderRow(null, 0),
+        this.props.rows.map(this._renderRow, this)
+      )
     );
   }
 

perf/lib/perf-test-runner.browser.js

@@ -195,10 +195,12 @@ perfRunner.ViewObject = function(props){
 
   if (typeof value != 'object') return React.DOM.span(props, [JSON.stringify(value), " ", typeof value]);
 
-  return React.DOM.table(props, Object.keys(value).map(function(key){
-    return React.DOM.tr(null,
-      React.DOM.th(null, key),
-      React.DOM.td(null, perfRunner.ViewObject({key:key, value:value[key]}))
-    );
-  }));
+  return React.DOM.table(props,
+    React.DOM.tbody(null, Object.keys(value).map(function(key){
+      return React.DOM.tr(null,
+        React.DOM.th(null, key),
+        React.DOM.td(null, perfRunner.ViewObject({key:key, value:value[key]}))
+      );
+    })
+  ));
 }

src/browser/ReactPutListenerQueue.js

@@ -28,9 +28,9 @@ function ReactPutListenerQueue() {
 }
 
 mixInto(ReactPutListenerQueue, {
-  enqueuePutListener: function(rootNodeID, propKey, propValue) {
+  enqueuePutListener: function(component, propKey, propValue) {
     this.listenersToPut.push({
-      rootNodeID: rootNodeID,
+      component: component,
       propKey: propKey,
       propValue: propValue
     });
@@ -40,7 +40,7 @@ mixInto(ReactPutListenerQueue, {
     for (var i = 0; i < this.listenersToPut.length; i++) {
       var listenerToPut = this.listenersToPut[i];
       ReactEventEmitter.putListener(
-        listenerToPut.rootNodeID,
+        listenerToPut.component,
         listenerToPut.propKey,
         listenerToPut.propValue
       );

src/browser/ReactTextComponent.js

@@ -95,8 +95,8 @@ mixInto(ReactTextComponent, {
     var nextProps = nextComponent.props;
     if (nextProps !== this.props) {
       this.props = nextProps;
-      ReactComponent.BackendIDOperations.updateTextContentByID(
-        this._rootNodeID,
+      ReactComponent.BackendOperations.updateTextContent(
+        this._rootNode,
         nextProps
       );
     }

src/browser/eventPlugins/BeforeInputEventPlugin.js

@@ -208,7 +208,7 @@ var BeforeInputEventPlugin = {
 
     var event = SyntheticInputEvent.getPooled(
       eventTypes.beforeInput,
-      topLevelTargetID,
+      topLevelTarget,
       nativeEvent
     );
 

src/browser/eventPlugins/ChangeEventPlugin.js

@@ -79,7 +79,7 @@ if (ExecutionEnvironment.canUseDOM) {
 function manualDispatchChangeEvent(nativeEvent) {
   var event = SyntheticEvent.getPooled(
     eventTypes.change,
-    activeElementID,
+    activeElement,
     nativeEvent
   );
   EventPropagators.accumulateTwoPhaseDispatches(event);
@@ -123,7 +123,7 @@ function getTargetIDForChangeEvent(
     topLevelTarget,
     topLevelTargetID) {
   if (topLevelType === topLevelTypes.topChange) {
-    return topLevelTargetID;
+    return topLevelTarget;
   }
 }
 function handleEventsForChangeEventIE8(
@@ -232,7 +232,7 @@ function getTargetIDForInputEvent(
   if (topLevelType === topLevelTypes.topInput) {
     // In modern browsers (i.e., not IE8 or IE9), the input event is exactly
     // what we want so fall through here and trigger an abstract event
-    return topLevelTargetID;
+    return topLevelTarget;
   }
 }
 
@@ -306,7 +306,7 @@ function getTargetIDForClickEvent(
     topLevelTarget,
     topLevelTargetID) {
   if (topLevelType === topLevelTypes.topClick) {
-    return topLevelTargetID;
+    return topLevelTarget;
   }
 }
 
@@ -357,15 +357,15 @@ var ChangeEventPlugin = {
     }
 
     if (getTargetIDFunc) {
-      var targetID = getTargetIDFunc(
+      var target = getTargetIDFunc(
         topLevelType,
         topLevelTarget,
         topLevelTargetID
       );
-      if (targetID) {
+      if (target) {
         var event = SyntheticEvent.getPooled(
           eventTypes.change,
-          targetID,
+          target,
           nativeEvent
         );
         EventPropagators.accumulateTwoPhaseDispatches(event);

src/browser/eventPlugins/CompositionEventPlugin.js

@@ -247,7 +247,7 @@ var CompositionEventPlugin = {
     if (eventType) {
       var event = SyntheticCompositionEvent.getPooled(
         eventType,
-        topLevelTargetID,
+        topLevelTarget,
         nativeEvent
       );
       if (data) {

src/browser/eventPlugins/EnterLeaveEventPlugin.js

@@ -111,12 +111,9 @@ var EnterLeaveEventPlugin = {
       return null;
     }
 
-    var fromID = from ? ReactMount.getID(from) : '';
-    var toID = to ? ReactMount.getID(to) : '';
-
     var leave = SyntheticMouseEvent.getPooled(
       eventTypes.mouseLeave,
-      fromID,
+      from,
       nativeEvent
     );
     leave.type = 'mouseleave';
@@ -125,14 +122,14 @@ var EnterLeaveEventPlugin = {
 
     var enter = SyntheticMouseEvent.getPooled(
       eventTypes.mouseEnter,
-      toID,
+      to,
       nativeEvent
     );
     enter.type = 'mouseenter';
     enter.target = to;
     enter.relatedTarget = from;
 
-    EventPropagators.accumulateEnterLeaveDispatches(leave, enter, fromID, toID);
+    EventPropagators.accumulateEnterLeaveDispatches(leave, enter, from, to);
 
     extractedEvents[0] = leave;
     extractedEvents[1] = enter;

src/browser/eventPlugins/ResponderEventPlugin.js

@@ -38,7 +38,7 @@ var executeDispatchesInOrderStopAtTrue =
  * ID of element that should respond to touch/move types of interactions, as
  * indicated explicitly by relevant callbacks.
  */
-var responderID = null;
+var responder = null;
 var isPressing = false;
 
 var eventTypes = {
@@ -168,33 +168,33 @@ function setResponderAndExtractTransfer(
     isMoveish(topLevelType) ? eventTypes.moveShouldSetResponder :
     eventTypes.scrollShouldSetResponder;
 
-  var bubbleShouldSetFrom = responderID || topLevelTargetID;
+  var bubbleShouldSetFrom = responder || topLevelTarget;
   var shouldSetEvent = SyntheticEvent.getPooled(
     shouldSetEventType,
     bubbleShouldSetFrom,
     nativeEvent
   );
   EventPropagators.accumulateTwoPhaseDispatches(shouldSetEvent);
-  var wantsResponderID = executeDispatchesInOrderStopAtTrue(shouldSetEvent);
+  var wantsResponder = executeDispatchesInOrderStopAtTrue(shouldSetEvent);
   if (!shouldSetEvent.isPersistent()) {
     shouldSetEvent.constructor.release(shouldSetEvent);
   }
 
-  if (!wantsResponderID || wantsResponderID === responderID) {
+  if (!wantsResponder || wantsResponder === responder) {
     return null;
   }
   var extracted;
   var grantEvent = SyntheticEvent.getPooled(
     eventTypes.responderGrant,
-    wantsResponderID,
+    wantsResponder,
     nativeEvent
   );
 
   EventPropagators.accumulateDirectDispatches(grantEvent);
-  if (responderID) {
+  if (responder) {
     var terminationRequestEvent = SyntheticEvent.getPooled(
       eventTypes.responderTerminationRequest,
-      responderID,
+      responder,
       nativeEvent
     );
     EventPropagators.accumulateDirectDispatches(terminationRequestEvent);
@@ -208,24 +208,24 @@ function setResponderAndExtractTransfer(
       var terminateType = eventTypes.responderTerminate;
       var terminateEvent = SyntheticEvent.getPooled(
         terminateType,
-        responderID,
+        responder,
         nativeEvent
       );
       EventPropagators.accumulateDirectDispatches(terminateEvent);
       extracted = accumulate(extracted, [grantEvent, terminateEvent]);
-      responderID = wantsResponderID;
+      responder = wantsResponder;
     } else {
       var rejectEvent = SyntheticEvent.getPooled(
         eventTypes.responderReject,
-        wantsResponderID,
+        wantsResponder,
         nativeEvent
       );
       EventPropagators.accumulateDirectDispatches(rejectEvent);
       extracted = accumulate(extracted, rejectEvent);
     }
   } else {
     extracted = accumulate(extracted, grantEvent);
-    responderID = wantsResponderID;
+    responder = wantsResponder;
   }
   return extracted;
 }
@@ -252,8 +252,8 @@ function canTriggerTransfer(topLevelType) {
  */
 var ResponderEventPlugin = {
 
-  getResponderID: function() {
-    return responderID;
+  getResponder: function() {
+    return responder;
   },
 
   eventTypes: eventTypes,
@@ -273,8 +273,8 @@ var ResponderEventPlugin = {
       nativeEvent) {
     var extracted;
     // Must have missed an end event - reset the state here.
-    if (responderID && isStartish(topLevelType)) {
-      responderID = null;
+    if (responder && isStartish(topLevelType)) {
+      responder = null;
     }
     if (isStartish(topLevelType)) {
       isPressing = true;
@@ -284,7 +284,7 @@ var ResponderEventPlugin = {
     if (canTriggerTransfer(topLevelType)) {
       var transfer = setResponderAndExtractTransfer(
         topLevelType,
-        topLevelTargetID,
+        topLevelTarget,
         nativeEvent
       );
       if (transfer) {
@@ -299,14 +299,14 @@ var ResponderEventPlugin = {
     if (type) {
       var gesture = SyntheticEvent.getPooled(
         type,
-        responderID || '',
+        responder,
         nativeEvent
       );
       EventPropagators.accumulateDirectDispatches(gesture);
       extracted = accumulate(extracted, gesture);
     }
     if (type === eventTypes.responderRelease) {
-      responderID = null;
+      responder = null;
     }
     return extracted;
   }

src/browser/eventPlugins/SelectEventPlugin.js

@@ -112,7 +112,7 @@ function constructSelectEvent(nativeEvent) {
 
     var syntheticEvent = SyntheticEvent.getPooled(
       eventTypes.select,
-      activeElementID,
+      activeElement,
       nativeEvent
     );
 

src/browser/eventPlugins/SimpleEventPlugin.js

@@ -305,8 +305,8 @@ var SimpleEventPlugin = {
    * @param {function} Application-level callback.
    * @param {string} domID DOM ID to pass to the callback.
    */
-  executeDispatch: function(event, listener, domID) {
-    var returnValue = EventPluginUtils.executeDispatch(event, listener, domID);
+  executeDispatch: function(event, listener, node) {
+    var returnValue = EventPluginUtils.executeDispatch(event, listener, node);
     if (returnValue === false) {
       event.stopPropagation();
       event.preventDefault();
@@ -407,7 +407,7 @@ var SimpleEventPlugin = {
     );
     var event = EventConstructor.getPooled(
       dispatchConfig,
-      topLevelTargetID,
+      topLevelTarget,
       nativeEvent
     );
     EventPropagators.accumulateTwoPhaseDispatches(event);

src/browser/eventPlugins/TapEventPlugin.js

@@ -115,7 +115,7 @@ var TapEventPlugin = {
     if (isEndish(topLevelType) && distance < tapMoveThreshold) {
       event = SyntheticUIEvent.getPooled(
         eventTypes.touchTap,
-        topLevelTargetID,
+        topLevelTarget,
         nativeEvent
       );
     }

src/browser/ui/ReactBrowserComponentMixin.js

@@ -39,7 +39,7 @@ var ReactBrowserComponentMixin = {
     if (ReactEmptyComponent.isNullComponentID(this._rootNodeID)) {
       return null;
     }
-    return ReactMount.getNode(this._rootNodeID);
+    return this._rootNode;
   }
 };
 

src/browser/ui/ReactComponentBrowserEnvironment.js

@@ -20,7 +20,7 @@
 
 "use strict";
 
-var ReactDOMIDOperations = require('ReactDOMIDOperations');
+var ReactDOMOperations = require('ReactDOMOperations');
 var ReactMarkupChecksum = require('ReactMarkupChecksum');
 var ReactMount = require('ReactMount');
 var ReactPerf = require('ReactPerf');
@@ -42,7 +42,7 @@ var DOC_NODE_TYPE = 9;
 var ReactComponentBrowserEnvironment = {
   ReactReconcileTransaction: ReactReconcileTransaction,
 
-  BackendIDOperations: ReactDOMIDOperations,
+  BackendOperations: ReactDOMOperations,
 
   /**
    * If a particular environment requires that some resources be cleaned up,
@@ -51,8 +51,8 @@ var ReactComponentBrowserEnvironment = {
    *
    * @private
    */
-  unmountIDFromEnvironment: function(rootNodeID) {
-    ReactMount.purgeID(rootNodeID);
+  unmountFromEnvironment: function(component) {
+    component._rootNode.__reactComponent__ = null;
   },
 
   /**
@@ -64,7 +64,7 @@ var ReactComponentBrowserEnvironment = {
   mountImageIntoNode: ReactPerf.measure(
     'ReactComponentBrowserEnvironment',
     'mountImageIntoNode',
-    function(markup, container, shouldReuseMarkup) {
+    function(markup, container, component, shouldReuseMarkup) {
       invariant(
         container && (
           container.nodeType === ELEMENT_NODE_TYPE ||
@@ -115,6 +115,10 @@ var ReactComponentBrowserEnvironment = {
       );
 
       setInnerHTML(container, markup);
+      ReactMount.updateNodeCache(
+        container.firstChild,
+        component
+      );
     }
   )
 };