# fed-e-task-04-01

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

## Basic Information

- **Project Name**: fed-e-task-04-01
- **Description**: react-模块1作业
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-23
- **Last Updated**: 2021-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fed-e-task-04-01

## 简答



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

在react16版本中，初始渲染可以分为两个主要阶段，render阶段和commit阶段

render阶段：

  1、构建FiberRoot和rootFiber两个对象，并建立引用关系，如FiberRoot中通过current指向rootFiber，而rootFiber通过stateNode指向FiberRoot

  2、同时通过react内部实现的调度层reconclition来实现空闲时间构建整个Fiber结构树

  4、Fiber的构建顺序是从根节点作为FiberRoot，遵循深度优先原则，依次构建子元素的第一个子元素，当子元素为最后一个节点时，开始构建当前子元素的兄弟节点，无兄弟节点时向上退到父节点，检测是否有父节点的兄弟节点，以此类推，直到构建整个workInProgress结构树

  5、构建完毕后render阶段完毕，调用commitRoot进入提交阶段commit

commit阶段：
　
此阶段获取到render阶段得到的结果，根据effectTag执行相应的DOM操作，此阶段的优先级为99最高优先级，不可中断，直到结束流程

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

react15版本的diff算法使用了递归遍历的形式，在此形式过程中，程序无法中断，如若层级过深后者过多后，会消耗大量主线程时间等资源，造成程序卡顿、体验差

卡顿和体验差的原因是，js是单线程的，无法同时执行多想任务，递归在执行过程中就无法执行用户的其他操作。

而在react16版本中，采用循环模拟递归的方式，解决了卡顿的问题。react内部自己实现了浏览器空闲时间的scheduler层（因原生的requestIdleCallback方法会因设备等原因不稳定），在空闲时执行。


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

　
第一阶段会调用组件的getSnapshotBeforepdate生命周期

第二阶段会根据effactTag执行DOM操作，此阶段为同步环节，不可中断

第三阶段会调用类组件的componentDidMount生命周期 或者 函数组件的 useEffect 钩子函数
　

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

react即将更新时内部会存在两棵树，一棵树为页面中展示的名为current Fiber树，一棵树为数据变更后重新构建的workInprogress Fiber树

当更新时react会将workInProgress Fiber树直接替换current Fiber树，以达到快速更新dom的目的。

在workInProgress Fiber树中通过alternate属性指向current Fiber节点对象，在current Fiber树中也存在alternate指向workInProgress Fiber节点对象，双备份的形式来完成树之间的快速对比和更新。

当更新完毕后workInProgress Fiber会变成当前的current Fiber。