顺着 render 找到 _renderNewRootComponent，然后看到实例化 React 组件的代码

var componentInstance = instantiateReactComponent(nextElement, false);

再看一下 nextElement 的结构

当然故事还没结束，从上图中看到并没有开始构造组件树，只是实例化了 instance，所以接下来需要去构造树

ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context);

经过一系列循环 mountComponent，mountChildren，最终得到如下的树结构

大致组成结构如一下代码

componentInstance: ReactCompositeComponentWrapper {
  _currentElement: {
    type: TopLevelWrapper,
  },
  _instance: TopLevelWrapper,
  _renderedComponent: ReactCompositeComponentWrapper {
    _currentElement: {
      type: App
    },
    _instance: {
      state: {count: 1}
    },
    _renderedComponent: ReactDOMComponent {
      _currentElement: {
        type: "div",
      }
      _renderedChildren: [
        ReactDOMTextComponent: {
          _currentElement: "Hello"
        },
        ReactDOMComponent: {
          _currentElement: {
            type: "button",
          }
        }
      ]
    }
  }
}

构造完毕后，返回数据

这就是常提到的 VirtualDOM，React 16 之前的 Virtual DOM。

Update

Chrome 是个好东西，可以一步一步 debug，顺着可以找到 _updateRenderedComponent，此处传入新旧两棵树，执行一系列判断处理。