React设计原理解密与核心代码解读

1. 请简述 React 16 版本中初始渲染的流程
   分为 render 阶段和 commit 阶段：

• render 阶段负责为每一个 React 元素构建对应的 Fiber 对象并为 Fiber 节点添加 effectTag 属性用于标记当前节点要进行的DOM操作。
• commit 阶段负责根据 Fiber 节点标记 ( effectTag ) 进行相应的 DOM 操作。

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

• 递归无法中断，执行重任务耗时长。
• JavaScript 又是单线程，无法同时执行其他任务，导致任务延迟页面卡顿，用户体验差。

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

• before mutation 阶段（执行 DOM 操作前）
  调用类组件生命周期函数 getSnapshotBeforeUpdate，并且把旧的 props 和旧的 states 传递进去。

• mutation 阶段（执行 DOM 操作）
  获取对象的 effects，根据不同的 effectTag 执行不同的操作，将workInProgress Fiber树变成 current Fiber 树。

• layout 阶段（执行 DOM 操作后）
  调用生命周期函数和钩子函数，重置 nextEffect。

4. 请简述 workInProgress Fiber 树存在的意义是什么
   React 使用双缓存技术完成 Fiber 树的构建与替换，实现 DOM 对象的快速更新。在双缓存技术中，当前屏幕中显示的内容对应的 Fiber 树叫做 current Fiber 树；当发生更新时，React 会在内存中重新构建一颗新的、即将要显示在页面中的 Fiber 树，即 workInProgress Fiber 树。由于 workInProgress Fiber 树是在内存中构建的所以构建速度非常快，因此，React 使用它直接替换 current Fiber 树就能达到快速更新DOM的目的。