# part4-1-homework

**Repository Path**: mxydl2009/part4-1-homework

## Basic Information

- **Project Name**: part4-1-homework
- **Description**: 拉勾大前端训练营part4-1的作业
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-14
- **Last Updated**: 2021-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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



    初始渲染分为render阶段和commit阶段

    \- render阶段负责创建Fiber数据结构，并且为Fiber节点打上标记，该标记用来标识要进行的DOM操作。

    \- commit阶段则负责根据Fiber节点的标记（effectTag）进行相应的DOM操作，并执行DOM操作前后的生命周期函数或者钩子函数。



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



    递归的方式要求程序执行不能被打断，否则无法在被打断的位置继续执行，因为一旦打断则递归的调用栈就会清空。正是因为递归无法被打断，一旦执行的程序耗时过久，就会长期占用浏览器的主线程，直到整个虚拟DOM树比对更新完成才会释放，这样在比对过程中需要执行的任务无法及时执行（如响应用户交互、逐帧绘制动画等），导致页面会产生卡顿，造成不好的用户体验。



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



    commit阶段主要进行DOM操作，以及在DOM操作前后需要完成的工作，分别如下

    \- 子阶段1：在执行DOM操作之前，调用类组件的生命周期函数getSnapshotBeforeUpdate，并将结果挂载到组件实例的__reactInternalSnapshotBeforeUpdate属性上，以供在commit子阶段3中的componentDidUpdate使用

    \- 子阶段2：真正开始执行DOM操作，根据effectTag来进行对应的DOM操作

    \- 子阶段3：在执行DOM操作之后，调用类组件的生命周期函数componentDidUpdate、或者componentDidMount, 调用函数组件的钩子函数



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



    workInProgress Fiber树是React的双缓存技术中的一环，是用来提高渲染效率，减少渲染所需时间。在发生更新时，React直接在内存中构建workInProgress Fiber树，构建完成后，直接替换当前页面对应的current Fiber树，快速达到更新DOM的目的，也就是说，在每次更新时，都会迅速创建一棵新的Fiber树，准备替换当前树。