# fed-e-task-04-01

**Repository Path**: sfl001/fed-e-task-04-01

## Basic Information

- **Project Name**: fed-e-task-04-01
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-06
- **Last Updated**: 2021-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fed-e-task-04-01

#### 1、请简述 React 16 版本中初始渲染的流程
1. render阶段
   render阶段负责创建Fiber数据结构并为Fiber节点打标记，标记当前Fiber节点要进行的DOM操作
2. commit阶段
   commit阶段负责根据Fiber节点标记effectTag进行相应的DOM操作


#### 2、为什么 React 16 版本中 render 阶段放弃了使用递归
    因为递归使用javascript自身的执行栈，一旦开始就无法停止，直到任务执行完成。如果virtualDOM树的层级比较深，virtualDOM的比对的过程中就无法响应用户操作，无法即时执行元素动画，造成页面卡顿的现象；
    React 16 采用循环模拟递归，而且比对的过程是利用浏览器的空闲时间完成的，不会长期占用主线程，这就解决了virtualDOM比对造成页面卡顿的问题

#### 3、请简述 React 16 版本中 commit 阶段的三个子阶段分别做了什么事情
1. 第一子阶段：before mutation阶段：执行DOM操作前。调用类组建的getSnapshotBeforeUpdate 生命周期函数
2. 第二子阶段：mutation 阶段：执行DOM操作。根据effectTag执行DOM操作
3. 第三子阶段：layout阶段：执行DOM操作后。执行渲染完成之后的会点函数


#### 4、请简述 workInProgress Fiber 树存在的意义是什么
    在双缓存技术中，workInProgress Fiber 树就是即将要显示在页面中的Fiber树，当这棵Fiber树构建完成之后，React会直接使用它替换current Fiber树达到快速更新DOM的目的，因为workInProgress Fiber 树是在内存中构建的所以构建他的速度是非常快的，一旦workInProgress Fiber 树在屏幕上呈现，他就会变成current Fiber树。