# fed-e-task-04-01

**Repository Path**: learning-summary/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-04-07
- **Last Updated**: 2021-04-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

1. **请简述 React 16 版本中初始渲染的流程**
- render阶段 为每一个react元素构建对应的fiber对象，在构建fiber对象的过程中，要构建其对应的DOM对象，并且还要为fiber对象添加effectTag属性，就是标注当前fiber对象要对应的DOM操作（增删改），这个新构建的fiber对象称之为workInProgress fiber树，待提交的fiber树，将构建好的workInProgress存储在fiberRoot.finishedWork中，render阶段结束。

- commit阶段 先获取render阶段的工作成果，即保存在fiberRoot对象中的重新构建的workInProgress fiber树，fiberRoot.finishedWork根据fiber对象中的effectTag属性进行相应的DOM操作，如果存在类组件，调用对应的生命周期函数，如果存在函数组件，调用对应的useEffect钩子函数。
  
2. **为什么 React 16 版本中 render 阶段放弃了使用递归**

因为主流浏览器的刷新频率为60Hz，即每（1000ms /60Hz）16.6ms浏览器刷新一次。JS可以操作DOM，GUI渲染线程与JS线程是互斥的。所以JS脚本执行和浏览器布局、绘制不能同时执行。超过16.6ms就会让用户感知到卡顿。

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

- 而React16架构可以分为三层：Scheduler，Reconciler，Renderer,与之前不同的是Reconciler和Renderer不再交替执行，而是当Scheduler将任务交给Reconciler后，Reconciler会为变化的虚拟DOM打上代表增/删/更新的标记，整个Scheduler与Reconciler的工作都在内存中进行。只有当所有组件都完成Reconciler的工作，才会统一交给Renderer。并且采用双缓存用作统一替换，用户也不会看到更新不完全的真实dom。它放弃了 **JavaScript 递归的方式进行 virtualDOM 的比对，而是采用循环模拟递归。而且比对的过程是利用浏览器的空闲时间完成的，不会长期占用主线程，这就解决了 virtualDOM 比对造成页面卡顿的问题。**
3. **请简述 React 16 版本中 commit 阶段的三个子阶段分别做了什么事情**

    commit阶段是同步执行，不可被中

- 执行DOM操作前，处理类组件的getSnapshotBeforeUpdate声明周期函数

- 执行DOM操作，根据effectTag进行dom操作，将workingProgress Fiber树变成- current Fiber树

- 执行DOM操作后，调用生命周期函数和钩子函数
  
4. **请简述 workInProgress Fiber 树存在的意义是什么**

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