react首次渲染

React 元素的初始渲染过程，就是react元素是怎么渲染到页面中的

分内两个阶段：1是render阶段，是协调层负责阶段，为每一个元素构建Fiber对象，构建Fiber树，并未每一个元素记录操作类型，是删除，插入，更新，成功之后保存在fiberRoot中
2是commit阶段，会先获取到render阶段的工作成果，就是获取保存在fiberRoot当中的树，接下来根据fiber对象中的类型作出对应的操作

1. 找到render方法，在packages/react-dom/src/client/ReactDOMLegacy.js中

2. render方法接收element：
   渲染的 ReactElement，
   container：具体的容器，
   callback：渲染成功的回调

3. 检查container是不是真实dom，是不是符合要求容器，调用invariant方法，不符合报错

4. return legacyRenderSubtreeIntoContainer方法，作用是渲染子树到container中，
   接收null是父组件的占位，element是渲染的react元素，container渲染目标容器，布尔值表示是否是服务端渲染，callback是渲染成功的回调
   内部拿到container容器
   定义存储Fiber对象的fiberRoot
   判断root不存在进行区分是不是初始渲染
   否则是更新相关内容

5. 之后构建fiberRoot和rootFiber相关的函数
   初始渲染不执行批量更新，因为初始渲染应该尽快并且不能打断，执行的是unbatchedUpdates方法
   接下来执行updateContainer方法，创建任务对象，把其放入任务队列，在浏览器空闲时候执行
   核心是任务的执行，从createUpdate方法开始，将更新的组件存到payload，有callback执行callback，在存储任务到fiber.updateQueue中，在执行调度和更新

   在根据任务的优先级进行调度的顺序，在之前禁止了死循环情况
   在performSyncWorkOnRoot方法构建workInProgress Fiber树，说明已经正式进入到render阶段，将构建的新Fiber对象存储到 finishedWork属性中，留在提交阶段使用
   接收render阶段，进入到commit阶段

6. 在ReactFiberWorlLoop中进行Fiber对象的构建，区分同步方式或是异步方式
   performUnitOfWork方法解析方法构建Fiber对象，在初始渲染阶段，从父到子，构建Fiber使用beginWork方法，使用completeUnitOfWork方法进行从子到父阶段构建
   在updateHostRoot方法中更新队列，返回fiber对象
   构建单个子Fiber对象reconcileChildren方法，current是旧Fiber，内部进行初次渲染或是更新

   构建多个子Fiber对象，如果newChild是一个数组，代表是多个，调用reconcoleChildrenArray方法

7. commit阶段
   从finishSyncRender方法接收root开始commit，销毁 workInProgress Fiber 树，进入 commit 阶段，调用commitRoot方法

   commitRoot方法获取优先级，根据优先级进行调用，99是最高的优先级
   然后修改为最高优先级，执行commitRootImpl方法

   commitRootImpl方法有三个while循环，代表commit的三个子阶段
   before mutation 阶段（执行 DOM 操作前）
   mutation 阶段（执行 DOM 操作）
   layout 阶段（执行 DOM 操作后）