[idea] Remove data-reactid and traverse immediately after insertion instead (nope, still lazy!)

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,14 @@ 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/ReactReconcileTransaction.js

@@ -131,6 +131,7 @@ function ReactReconcileTransaction() {
   // `ReactServerRenderingTransaction` instead. This option is here so that it's
   // accessible and defaults to false when `ReactDOMComponent` and
   // `ReactTextComponent` checks it in `mountComponent`.`
+  this.renderToString = false;
   this.renderToStaticMarkup = false;
   this.reactMountReady = CallbackQueue.getPooled(null);
   this.putListenerQueue = ReactPutListenerQueue.getPooled();

src/browser/ReactTextComponent.js

@@ -23,6 +23,7 @@ var DOMPropertyOperations = require('DOMPropertyOperations');
 var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
 var ReactComponent = require('ReactComponent');
 var ReactDescriptor = require('ReactDescriptor');
+var ReactMount = require('ReactMount');
 
 var escapeTextForBrowser = require('escapeTextForBrowser');
 var mixInto = require('mixInto');
@@ -60,14 +61,18 @@ mixInto(ReactTextComponent, {
    * @return {string} Markup for this text node.
    * @internal
    */
-  mountComponent: function(rootID, transaction, mountDepth) {
+  mountComponent: function(parentID, rootID, transaction, mountDepth) {
     ReactComponent.Mixin.mountComponent.call(
       this,
+      parentID,
       rootID,
       transaction,
       mountDepth
     );
 
+    if (!transaction.renderToString) {
+      ReactMount.registerDOMInstance(this);
+    }
     var escapedText = escapeTextForBrowser(this.props);
 
     if (transaction.renderToStaticMarkup) {
@@ -78,7 +83,7 @@ mixInto(ReactTextComponent, {
     }
 
     return (
-      '<span ' + DOMPropertyOperations.createMarkupForID(rootID) + '>' +
+      '<span>' +
         escapedText +
       '</span>'
     );

src/browser/__tests__/ReactEventEmitter-test.js

@@ -100,6 +100,7 @@ describe('ReactEventEmitter', function() {
     EventListener = require('EventListener');
     ReactEventEmitter = require('ReactEventEmitter');
     ReactTestUtils = require('ReactTestUtils');
+    ReactMount.getID = getID;
     ReactMount.getNode = function(id) {
       return idToNode[id];
     };

src/browser/server/ReactMarkupChecksum.js

@@ -35,6 +35,17 @@ var ReactMarkupChecksum = {
     );
   },
 
+  /**
+   * @param {DOMElement} element root React element
+   * @returns {boolean} whether or not the root element can be reused
+   */
+  canReuseRoot: function(element) {
+    return (
+      element && element.hasAttribute &&
+      element.hasAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME)
+    );
+  },
+
   /**
    * @param {string} markup to use
    * @param {DOMElement} element root React element

src/browser/server/ReactServerRendering.js

@@ -50,7 +50,7 @@ function renderComponentToString(component) {
 
     return transaction.perform(function() {
       var componentInstance = instantiateReactComponent(component);
-      var markup = componentInstance.mountComponent(id, transaction, 0);
+      var markup = componentInstance.mountComponent(null, id, transaction, 0);
       return ReactMarkupChecksum.addChecksumToMarkup(markup);
     }, null);
   } finally {
@@ -76,7 +76,7 @@ function renderComponentToStaticMarkup(component) {
 
     return transaction.perform(function() {
       var componentInstance = instantiateReactComponent(component);
-      return componentInstance.mountComponent(id, transaction, 0);
+      return componentInstance.mountComponent(null, id, transaction, 0);
     }, null);
   } finally {
     ReactServerRenderingTransaction.release(transaction);

src/browser/server/ReactServerRenderingTransaction.js

@@ -66,6 +66,7 @@ var TRANSACTION_WRAPPERS = [
  */
 function ReactServerRenderingTransaction(renderToStaticMarkup) {
   this.reinitializeTransaction();
+  this.renderToString = true;
   this.renderToStaticMarkup = renderToStaticMarkup;
   this.reactMountReady = CallbackQueue.getPooled(null);
   this.putListenerQueue = ReactPutListenerQueue.getPooled();

src/browser/server/__tests__/ReactServerRendering-test.js

@@ -38,8 +38,6 @@ var ReactServerRendering;
 var ReactMarkupChecksum;
 var ExecutionEnvironment;
 
-var ID_ATTRIBUTE_NAME;
-
 describe('ReactServerRendering', function() {
   beforeEach(function() {
     require('mock-modules').dumpCache();
@@ -50,9 +48,14 @@ describe('ReactServerRendering', function() {
     ExecutionEnvironment.canUseDOM = false;
     ReactServerRendering = require('ReactServerRendering');
     ReactMarkupChecksum = require('ReactMarkupChecksum');
+  });
 
-    var DOMProperty = require('DOMProperty');
-    ID_ATTRIBUTE_NAME = DOMProperty.ID_ATTRIBUTE_NAME;
+  describe('canReuseRoot', function() {
+    it('should not crash on text nodes', function() {
+      expect(function() {
+        ReactMarkupChecksum.canReuseRoot(document.createTextNode('yolo'));
+      }).not.toThrow();
+    });
   });
 
   describe('renderComponentToString', function() {
@@ -61,8 +64,9 @@ describe('ReactServerRendering', function() {
         <span>hello world</span>
       );
       expect(response).toMatch(
-        '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+" ' +
-          ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="[^"]+">hello world</span>'
+        '<span ' + ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="[^"]+">' +
+          'hello world' +
+        '</span>'
       );
     });
 
@@ -91,11 +95,10 @@ describe('ReactServerRendering', function() {
         <Parent />
       );
       expect(response).toMatch(
-        '<div ' + ID_ATTRIBUTE_NAME + '="[^"]+" ' +
-          ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="[^"]+">' +
-          '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">' +
-            '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">My name is </span>' +
-            '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">child</span>' +
+        '<div ' + ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="[^"]+">' +
+          '<span>' +
+            '<span>My name is </span>' +
+            '<span>child</span>' +
           '</span>' +
         '</div>'
       );
@@ -141,10 +144,9 @@ describe('ReactServerRendering', function() {
         );
 
         expect(response).toMatch(
-          '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+" ' +
-            ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="[^"]+">' +
-            '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">Component name: </span>' +
-            '<span ' + ID_ATTRIBUTE_NAME + '="[^"]+">TestComponent</span>' +
+          '<span ' + ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="[^"]+">' +
+            '<span>Component name: </span>' +
+            '<span>TestComponent</span>' +
           '</span>'
         );
         expect(lifecycle).toEqual(

src/browser/ui/ReactComponentBrowserEnvironment.js

@@ -64,7 +64,7 @@ var ReactComponentBrowserEnvironment = {
   mountImageIntoNode: ReactPerf.measure(
     'ReactComponentBrowserEnvironment',
     'mountImageIntoNode',
-    function(markup, container, shouldReuseMarkup) {
+    function(markup, container, instance, shouldReuseMarkup) {
       invariant(
         container && (
           container.nodeType === ELEMENT_NODE_TYPE ||
@@ -74,9 +74,9 @@ var ReactComponentBrowserEnvironment = {
       );
 
       if (shouldReuseMarkup) {
-        if (ReactMarkupChecksum.canReuseMarkup(
-          markup,
-          getReactRootElementInContainer(container))) {
+        var rootElement = getReactRootElementInContainer(container);
+        if (ReactMarkupChecksum.canReuseMarkup(markup, rootElement)) {
+          ReactMount.evaluateRoot(rootElement, instance);
           return;
         } else {
           invariant(
@@ -115,6 +115,7 @@ var ReactComponentBrowserEnvironment = {
       );
 
       setInnerHTML(container, markup);
+      ReactMount.evaluateRoot(container.firstChild, instance);
     }
   )
 };

src/browser/ui/ReactDOMComponent.js

@@ -107,13 +107,17 @@ ReactDOMComponent.Mixin = {
   mountComponent: ReactPerf.measure(
     'ReactDOMComponent',
     'mountComponent',
-    function(rootID, transaction, mountDepth) {
+    function(parentID, rootID, transaction, mountDepth) {
       ReactComponent.Mixin.mountComponent.call(
         this,
+        parentID,
         rootID,
         transaction,
         mountDepth
       );
+      if (!transaction.renderToString) {
+        ReactMount.registerDOMInstance(this);
+      }
       assertValidProps(this.props);
       return (
         this._createOpenTagMarkupAndPutListeners(transaction) +
@@ -164,14 +168,7 @@ ReactDOMComponent.Mixin = {
       }
     }
 
-    // For static pages, no need to put React ID and checksum. Saves lots of
-    // bytes.
-    if (transaction.renderToStaticMarkup) {
-      return ret + '>';
-    }
-
-    var markupForID = DOMPropertyOperations.createMarkupForID(this._rootNodeID);
-    return ret + ' ' + markupForID + '>';
+    return ret + '>';
   },
 
   /**
@@ -405,6 +402,7 @@ ReactDOMComponent.Mixin = {
   unmountComponent: function() {
     this.unmountChildren();
     ReactEventEmitter.deleteAllListeners(this._rootNodeID);
+    ReactMount.purgeID(this._rootNodeID);
     ReactComponent.Mixin.unmountComponent.call(this);
   }
 

src/browser/ui/ReactDOMIDOperations.js

@@ -161,9 +161,12 @@ var ReactDOMIDOperations = {
   dangerouslyReplaceNodeWithMarkupByID: ReactPerf.measure(
     'ReactDOMIDOperations',
     'dangerouslyReplaceNodeWithMarkupByID',
-    function(id, markup) {
-      var node = ReactMount.getNode(id);
-      DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup);
+    function(node, markup, instance) {
+      DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(
+        node,
+        markup,
+        instance
+      );
     }
   ),