核心过程：JSX -> babel -> createElement -> ReactElement -> render -> workInProgress Fiber -> commit -> getSnapShotBeforeUpdate -> dom ->lifeCircle/hook

逻辑细节：

1. jsx 转换成 react 元素

• babel-react 会将jsx 调用 React.createElement
• React.createElement 会 jsx 转换成 react element （react element 就是 一个用来描述react 元素的对象。）

2. render （协调层）此阶段负责创建 Fiber 数据结构并为 Fiber 节点打标记，标记当前 Fiber 节点要进行的 DOM 操作。

       首先为每一个react 元素构建 fiber 对象 (workInProgress Fiber 树）创建 此 fiber 对象对应的 DOM 对象，为 fiber 对象添加 effectTag 属性（用来记录当前 Fiber 要执行的 DOM 操作），然后在render 结束后， fiber 会被保存到 fiberroot 中。

代码层步骤：

• 将子树渲染到容器中 (初始化 Fiber 数据结构: 创建 fiberRoot 及 rootFiber)
• 判断是否为服务器端渲染 如果不是服务器端渲染，清空 container 容器中的节点
• 通过实例化 ReactDOMBlockingRoot 类创建 LegacyRoot，创建 LegacyRoot 的 Fiber 数据结构
• 创建 container，创建根节点对应的 fiber 对象
• 获取 container 的第一个子元素的实例对象
• 计算任务的过期时间，再根据任务过期时间创建 Update 任务，将任务(Update)存放于任务队列(updateQueue)中。判断任务是否为同步 调用同步任务入口。
• 构建 workInProgress Fiber 树

3. commit 阶段 （渲染层）

1. 先获取到render 的结果， 在 fiberroot 中的 新构建的 workInProgress Fiber 树
2. 根据 fiber 中的 effectTag 属性进行相应的 DOM 操作