1、同步递归出现的问题

在上一章节react15的架构中我们讲到了同步递归，同步递归调用会出现一个问题，也就是一旦开始渲染，就不能停止了，直到渲染出完整的树结构。也就是说会造成主线程被持续占⽤，造成的后果就是主线程上的布局、动画等周期性任务就⽆法立即得到处理，造成视觉上的卡顿，影响⽤户体验。
在浏览器中，页面是一帧一帧绘制出来的，主流浏览器刷新频率为60Hz，即每（1000ms / 60Hz）16.6ms浏览器刷新一次，在这一帧中浏览器要完成JS脚本执行、样式布局、样式绘制，如果在某个阶段执行时间很长，超过 16.6ms，那么就会阻塞页面的渲染，从而出现卡顿现象，也就是常说的掉帧。

2、如何解决

使用增量渲染(把渲染任务拆分成块，匀到多帧)，将把工作分解成小单元，在完成每个单元之后，如果还有其他任务需要完成，我们将让浏览器中断渲染，也就是经常听到的fiber架构。
关键点：

  • 增量渲染（把任务拆解成小块，分布到各个帧中）
  • 更新时能够暂停，终止，复⽤渲染任务
  • 给不同类型的更新赋予优先级

image.png

3、fiber架构

Fiber包含三层含义：

  • 作为架构来说，之前React15的Reconciler采用递归的方式执行，数据保存在递归调用栈中，所以被称为stack Reconciler。React16的Reconciler基于Fiber节点实现，被称为Fiber Reconciler。
  • 作为静态的数据结构来说，每个Fiber节点对应一个React element，保存了该组件的类型（函数组件/类组件/原生组件…）、对应的DOM节点等信息。
  • 作为动态的工作单元来说，每个Fiber节点保存了本次更新中该组件改变的状态、要执行的工作（需要被删除/被插入页面中/被更新…）。

React Fiber 机制的实现（作为架构），是依赖下面这种数据结构（链表），每一个节点都是一个fiber。一个 fiber 包括了 child（第一个子节点）、sibling（兄弟节点）、parent（父节点）属性。
image.png