一、为什么会出现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，实现了任务的拆分、中断和恢复