文章内容输出来源：拉勾大前端高薪训练营

1. 请简述 React 16 版本中初始渲染的流程

答：
App组件在root div中呈现，该div的id属性为root。
在进一步遍历之前，React Fiber创建一个根fiber。
每棵Fiber树都有一个根节点。
在我们的例子中，它是HostRoot。
如果我们在DOM中导入多个React Apps，就会有多个根。
在第一次渲染之前，没有任何树。
React Fiber遍历每个组件的render函数的输出，并在树中为每个React元素创建一个fiber节点。
它使用createFiberFromTypeAndProps将React元素转换为fiber。
React元素可以是一个类组件，也可以是一个宿主组件，比如div或span。
对于类组件，它创建一个实例，对于宿主组件，它从React Element获取数据/属性
React Fiber建树过程中，会通过return属性为当前创建fiber指定父fiber,
同时通过sibling指定其下一个兄弟fiber节点。
每个fiber都是链表的节点，它们通过子引用child、兄弟引用sibling和返回引用return进行连接。

2. 为什么 React 16 版本中 render 阶段放弃了使用递归

答：因为递归一旦执行，就会占用主线程，直到递归完成，主线程才能处理其他任务，
这在复杂组件的情况下会导致页面假死，页面性能受损，用户体验差。

3. 请简述 React 16 版本中 commit 阶段的三个子阶段分别做了什么事情

答：
第1个子阶段：调用类组件的getSnapshotBeforeUpdate生命周期函数
第2个子阶段：提交HostComponent的side effect，即DOM节点的操作（增删改）
第3个子阶段：Fiber 交换workInProgress Fiber 树与current 树， 此时workInProgress Fiber 树变为current。
接着调用生命周期钩子，setState callbacks, ref callbacks 以及组件级别的错误处理方法。

4. 请简述 workInProgress Fiber 树存在的意义是什么

答：
当React开始更新工作时，它会构建一个所谓的workInProgress Fiber 树,这颗树反映了将被刷新到屏幕的未来状态。
workInProgress Fiber树用于收集更新，对用户不可见。
一旦workInProgress Fiber 树被渲染到屏幕上，其就会变成current树。