fed-e-task-04-01

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

• jsx转换成react元素

  • babel-react 会将 jsx 处理成React.createElement的调用
  • React.createElement的调用完成后会生成react对象

• 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 钩子函数。

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

• 在16版本之前采用的递归方案，特别消耗内存，它在使用JavaScript自身的执行栈，更新一旦开始，中途就无法中断。
• 在virtualDOM树的层级很深时，virtualDOM的对比就会长时间占用JavaScript主线程，递归更新的时间很容易超过16ms（由于主流浏览器的刷新频率为60Hz，因此16.6ms就是一个用户能感知卡顿的临界值，超过16ms用户就会认为页面卡顿不流畅）。
• 又由于JavaScript是单线程的无法同时执行其他任务，因此操作dom和GUI的渲染不能同时执行，这时候用户就能感知到页面卡顿的现象了。

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

• 第一阶段：before Mutation

  对于 Class 组件而言，是执行 getSnapShotBeforeUpdate 生命周期，对于函数式组件则是安排异步回调

• 第二阶段：Mutation

  根据effectTag去分别执行DOM操作（插入或更新DOM节点）

• 第三阶段：Layout

  对于 Class 组件而言：初始阶段是执行 componentDidMount，更新阶段是执行componentDidUpdate 对于函数式组件则是通过任务队列循环执行 useEffect

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

• React 使用双缓存技术完成 Fiber 树的构建与替换，实现dom对象的快速更新
• 在 React 中最多会同时存在两棵 Fiber 树。
  • 当前页面显示的内容对应的 Fiber 树叫 current Fiber 树。
  • 当发生更新时，React 会在内存中重新构建一个新的 Fiber 树，被称作 workInProgress Fiber 树。
  • 在双缓存技术中，一旦 workInProgress Fiber 树构建完成，就会快速的替换 current Fiber 树。这时 workInProgress Fiber 树就会变为 current Fiber 树。以此形成更新闭环。
• 由于workInProgress在内存中构建，构建完成才统一替换，这样不会产生不完全的真实dom。并且 workInProgress Fiber 树是在内存中构建的，所以构建它的速度是非常快的。