Fiber的深度理解

react15在render阶段的reconcile是不可打断的，这会在进行大量节点的reconcile时可能产生卡顿，因为浏览器所有的时间都交给了js执行，并且js的执行时单线程。为此react16之后就有了scheduler进行时间片的调度，给每个task（工作单元）一定的时间，如果在这个时间内没执行完，也要交出执行权给浏览器进行绘制和重排，所以异步可中断的更新需要一定的数据结构在内存中来保存工作单元的信息，这个数据结构就是Fiber。

那么有了Fiber这种数据结构后，能完成哪些事情呢，

工作单元 任务分解 ：Fiber最重要的功能就是作为工作单元，保存原生节点或者组件节点对应信息（包括优先级），这些节点通过指针的形似形成Fiber树

增量渲染：通过jsx对象和current Fiber的对比，生成最小的差异补丁，应用到真实节点上

根据优先级暂停、继续、排列优先级：Fiber节点上保存了优先级，能通过不同节点优先级的对比，达到任务的暂停、继续、排列优先级等能力，也为上层实现批量更新、Suspense提供了基础

保存状态：因为Fiber能保存状态和更新的信息，所以就能实现函数组件的状态更新，也就是hooks

Fiber是一种数据结构

1.React目前的做法是使用链表, 每个 VirtualDOM 节点内部表示为一个Fiber2.从顶点开始遍历3.如果有第一个儿子，先遍历第一个儿子4.如果没有第一个儿子，标志着此节点遍历完成5.如果有弟弟遍历弟弟6.如果有没有下一个弟弟，返回父节点标识完成父节点遍历，如果有叔叔遍历叔叔7.没有父节点遍历结束

Fiber 其实指的是一种数据结构，它可以用一个纯 JS 对象来表示：

const fiber = {    stateNode,    // 节点实例    child,        // 子节点    sibling,      // 兄弟节点    return,       // 父节点}

Fiber 树在首次渲染的时候会一次生成。在后续需要 Diff 的时候，会根据已有树和最新 Virtual DOM 的信息，生成一棵新的树。这颗新树每生成一个新的节点，都会将控制权交回给主线程，去检查有没有优先级更高的任务需要执行。如果没有，则继续构建树的过程

如果过程中有优先级更高的任务需要进行，则 Fiber Reconciler 会丢弃正在生成的树，在空闲的时候再重新执行一遍。

在构造 Fiber 树的过程中，Fiber Reconciler 会将需要更新的节点信息保存在Effect List当中，在阶段二执行的时候，会批量更新相应的节点。