React源码解析

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

要将 React 元素渲染到页面中，分为两个阶段，render 阶段和 commit 阶段。
render 阶段负责创建 Fiber 数据结构并为 Fiber 节点打标记，标记当前 Fiber 节点要进行的 DOM 操作。
commit 阶段负责根据 Fiber 节点标记 ( effectTag ) 进行相应的 DOM 操作。

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

在16之前的版本中采用递归执行。递归耗内存，它使用 JavaScript 自身的执行栈，更新一旦开始，中途就无法中断。当VirtualDOM 树的层级很深时，virtualDOM 的比对就会长期占用 JavaScript 主线程，递归更新的时间就会超过浏览器刷新频率，由于 JavaScript 又是单线程的无法同时执行其他任务，所以在比对的过程中无法响应用户操作，无法即时执行元素动画，造成了页面卡顿的现象

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

• 第一阶段
  执行commitBeforeMutationEffects
  调用类组件的 getSnapshotBeforeUpdate 生命周期函数
• 第二阶段
  执行commitMutationEffects
  根据 effectTag 执行 DOM 操作
• 第三阶段
  执行commitLayoutEffects
  调用生命周期函数和钩子函数

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

​在React中最多会同时存在两棵Fiber树，当前显示在页面是current Fiber树，在内存中构建的Fiber树称为workInProgress Fiber树，workingProgress Fiber这棵树是在内存中构建的，构建完成才统一替换，这样不会产生不完全的真实dom。一旦更新完成，react会直接将current树替换成workingProgress Fiber树，以便快速完成DOM的更新。也是react提升性能的一部分