React 15

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

var componentInstance = instantiateReactComponent(nextElement, false);

截屏2021-06-29 14.34.48.png

再看一下 nextElement 的结构 截屏2021-06-29 15.29.58.png

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

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

经过一系列循环 mountComponent,mountChildren,最终得到如下的树结构 截屏2021-06-29 14.37.09.png

大致组成结构如一下代码

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",
          }
        }
      ]
    }
  }
}

构造完毕后,返回数据 截屏2021-06-29 11.21.45.png

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

Update

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

本文链接:https://note.lilonghe.net/post/react-15.html

-- EOF --