# fed-e-task-04-01

**Repository Path**: D-Rose/fed-e-task-04-01

## Basic Information

- **Project Name**: fed-e-task-04-01
- **Description**: React 设计原理解密及核心源码解读
        
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-09
- **Last Updated**: 2021-01-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fed-e-task-04-01

### 1. 请简述 React 16 版本中初始渲染的流程
+ render 阶段，为 React 元素构建对应的 fiber 对象，构建对应的 DOM 对象，并且为 fiber 对象添加 effectTag 属性用于标注当前 DOM 对象需要进行的操作类型，该对象为 workInProgress Fiber 对象；当 render 阶段结束后会被保存到 fiberroot 中。
+ commit 阶段，获取在 render 阶段返回的 workInProgress Fiber 对象，根据对应的 effectTag 进行不同的操作，最后更新节点信息。

### 2. 为什么 React 16 版本中 render 阶段放弃了使用递归
+ 使用递归这种比对方式有一个问题，就是一旦任务开始进行就无法中断，如果应用中组件数量庞大，主线程被长期占用，直到整棵 VirtualDOM 树比对更新完成之后主线程才能被释放，主线程才能执行其他任务。这就会导致一些用户交互，动画等任务无法立即得到执行，页面就会产生卡顿, 非常的影响用户体验

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

+ before mutation 阶段（执行 DOM 操作前）
    读取组件变更前的状态，针对类组件，调用getSnapshotBeforeUpdate，让我们可以在DOM变更前获取组件实例的信息；针对函数组件，异步调度useEffect。
+ mutation 阶段（执行 DOM 操作）
     针对HostComponent，进行相应的DOM操作；针对类组件，调用componentWillUnmount；针对函数组件，执行useLayoutEffect的销毁函数。
+ layout 阶段（执行 DOM 操作后）
     调用生命周期函数和钩子函数（类组件处理生命周期函数，函数组件处理钩子函数） - 如果调用 render 方法时传递了回调函数，则执行渲染完成之后的回调函数 - 通过遍历的方式调用 useEffect 中的回调函数 - 根据每个 effect.tag ，执行 destroy/create 操作，作用类似于 componentDidMount/componentWillUnmount


### 4. 请简述 workInProgress Fiber 树存在的意义是什么
+ 当发生更新时，React 会在内存中重新构建一颗新的 Fiber 树，这颗正在构建的 Fiber 树叫做 workInProgress Fiber 树。在双缓存技术中，workInProgress Fiber 树就是即将要显示在页面中的 Fiber 树，当这颗 Fiber 树构建完成后，React 会使用它直接替换 current Fiber 树达到快速更新 DOM 的目的，因为 workInProgress Fiber 树是在内存中构建的所以构建它的速度是非常快的