详细理解React的Fiber结构

一、为什么会出现Fiber

       旧版 React 通过递归的方式进行渲染，使用的是 JS引擎自身的函数调用栈，它会一直执行到栈空为止。而Fiber实现了自己的组件调用栈，它以链表的形式遍历组件树，可以灵活的暂停、继续和丢弃执行的任务。实现方式是使用了浏览器requestIdleCallback这一 API
因为需要给用户制造一种应用加载很快的假象，所以不能让一个程序一直霸占着资源，需要通过调度策略来合理分配资源，提高浏览器的响应率。

二、什么是Fiber

        Fiber是一种数据结构，可以用一个纯js对象来表示

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

1、任务优先级

   React 18引入了几种不同的任务优先级，包括：

• synchronous：同步任务，通常用于处理用户交互事件（同步执行）
• task：普通任务，用于处理如点击事件之外的更新 （在 nextTick之前执行）
• animation：动画帧任务，通常用于动画和定时器（下一帧之前执行）
• high：高优先级任务，用于快速更新UI（在不久的将来立即执行）
• low：低优先级任务，可以延迟处理，如不紧急的数据获取（稍微延迟执行）
  

2、调度方式

    React渲染的过程可以被中断，将控制权交给浏览器，让位给高优先级。因为浏览器无法判断优先级，所以使用使用超时机制让给出控制权，被称为合作式调度

注意：
       任务优先级决定了哪些任务应该首先被调度器考虑执行，而协作式调度则允许正在执行的任务在必要时让出主线程，以便浏览器可以处理其他紧急事件

3、工作流程

a. React内部三层运转

• Virtual DOM层，描述页面长什么样子
• Reconciler层， 负责调用组件生命周期的方法，进行Diff算法
• Renderer层，根据不同的平台，渲染出相应的页面
  

b. Fiber Reconciler执行阶段

• 阶段一，生成Fiber树，得出需要更新的节点信息，渐进过程，可以被打断
• 阶段二，将需要更新的节点一次过批量更新，不可被打断
  

c. Fiber树

    React在render第一次渲染的时候，会通过React.createElement创建一棵Element树，即Virtual DOM Tree

     由于要记录上下文信息，加入了Fiber，每一个Element会对应一个Fiber Node，将Fiber Node连接起来的结构成为了Fiber Tree

     Fiber Tree是链表结构，将递归遍历变成循环遍历（即深度优先搜索），然后配合requestIdleCallback API，实现了任务的拆分、中断和恢复