React首次渲染时Real DOM与Virtual DOM创建顺序及生成链路问询

问题1：当React应用首次进行渲染时，是Real DOM先被创建还是Virtual DOM先被创建？ #

• 答案：Virtual DOM先被创建。
  React首次渲染时，会先在内存里构建Virtual DOM树——这是一套基于JavaScript对象的轻量结构，用来描述页面UI的结构、属性和内容。只有当Virtual DOM树完全构建好后，React才会把它转换成对应的Real DOM节点，再挂载到页面的容器元素中。直接操作Real DOM开销极高，先构建Virtual DOM能让React在后续更新时更高效地对比差异，减少不必要的DOM操作。

问题2：带有JSX的React代码会被转换为React.createElement()，请问Virtual DOM的创建是否从此步骤开始，之后再基于Virtual DOM生成Real DOM？ #

• 答案：是的，Virtual DOM的创建就是从React.createElement()调用开始的。
  JSX本质上是React.createElement()的语法糖，开发时写的JSX代码会被Babel等编译工具转换成一系列React.createElement()调用，每个调用都会返回一个Virtual DOM节点对象（包含type、props、children等核心描述信息）。当所有这些调用执行完毕，就会组合成完整的Virtual DOM树。之后React会遍历这个树，将其转化为真实的DOM节点，最终挂载到页面上完成渲染。

内容的提问来源于stack exchange，提问作者Vishal Kumar