React 和 ReactDOM

React 和 ReactDOM 的核心API包括createElement、Component、render

1. 问题1，为甚要使用React 和 ReactDOM
   • JSX编译后实际调⽤用React.createElement方法，所以只要 出现JSX的文件中都需要导入React类
   • React负责逻辑控制，数据 -> VDOM。具体就是 React使用JSX来描述UI。 babel-loader把JSX 编译成相应的 JS 对象， React.createElement(type, config, children)再把这个JS对象构造成React需要的虚拟 dom,重点逻辑就是props.children = chilren, 另外增加key，ref等。
   • 然后ReactDom渲染实际DOM，具体是使用ReactDOM.render(vnode, container)方法把VDOM -> DOM

这里需要特殊说明的是： 初次渲染的时候render函数直接把vnode->node->挂载container， 更新的时候vnode -> diff ->node ->更新到container

createElement、Component、render源码实现具体看level5文件夹

看重点

const jsx = (
  <div className="box">
    <div className="border">我是文本1 <div className="border">我是文本4</div></div>
    <div className="border">我是文本2</div>
    <div className="border">我是文本3</div>
  </div>
);

//vnode->node
//container.apppendChild(node)
ReactDOM.render(jsx, document.getElementById("root"));

1. 我这里是一个简单的jsx 先看react是如何构建虚拟DOM树的：

从打印结果来看，createElment()函数先处理包含文本4的div,然后再处理包含文本1的div，再然后处理包含文本2的div,再然后处理包含文本3的div，最后处理包含类名为box的div。

经过creatElement处理之后形成虚拟DOM树如下图：

2. 接下来看render函数是如何把虚拟DOM变成真实的DOM的

从图可以看出它的渲染顺序，如果我们最终把它换成树形节点的话看下图，蓝色代表的是createElement处理顺序，红色代表render处理顺序。

下面结论摘自掘金结论等自己研究完fiber后再看。

由此可以得出Fiber 的渲染方式：从父节点开始，向下依次遍历子节点，深度优先渲染完子节点后，再回到其父节点去检查是否有兄弟节点，如果有兄弟节点，则从该兄弟节点开始继续深度优先的渲染，直到回退到根节点结束。