背景
在 React 15 版本之前，使用的是一种称为栈调度的渲染方式。如果一个页面足够复杂，形成的函数调用栈就会很深，每一次更新，执行栈需要一次性完成，中途不能干其他事儿，JS 一直执行，浏览器得不到控制权，就不能及时开始下一帧的绘制，当页面有动画时，动画因为浏览器不能及时绘制下一帧，页面就会卡顿。事件响应代码也是在每一帧开始的时候执行，这也会影响事件响应延迟。
如果一个任务阻塞了主线程还没办法中断，页面就会卡顿。React Fiber 是为了解决这些问题。
React Fiber 是 React 16 引入的一种新的协调算法和优化技术，用于改善和优化前端渲染性能。
1. 任务拆分和优先级调度
- React Fiber 通过将大型渲染任务
拆分成多个小任务，并允许在执行过程中中断任务，从而提高了系统的响应性和效率。 - 任务的优先级调度允许 React 根据任务的紧急程度和重要性来优化资源分配，确保
关键任务能够优先执行。
2. 增量渲染和资源利用
- React Fiber支持增量渲染，即
只更新发生变化的部分，而不是每次都重新渲染整个组件树。这大大减少了不必要的DOM操作，提高了页面的响应速度。 - 通过使用requestIdleCallback和requestAnimationFrame等API，React可以在适当的时机安排任务执行，从而更好地利用系统资源。
3. 可中断性和灵活性
React Fiber提供了任务的挂起、恢复和终止功能，这使得开发者可以灵活地控制任务的执行流程，适应不同的交互需求和系统状态。- 这种机制允许React在必要时暂停任务，等待更高优先级的任务或系统资源的释放，从而避免长时间的阻塞操作，提升用户体验。
Fiber
Fiber 的英文含义是“纤维”，它是比线程（Thread）更细的线，比线程（Thread）控制得更精密的执行模型。在广义计算机科学概念中，Fiber 又是一种协作的（Cooperative）编程模型（协程），帮助开发者用一种【既模块化又协作化】的方式来编排代码。
任务优先级
React Fiber 中的任务优先级是通过任务的类型和相关的调度策略来确定的。React Fiber 任务的优先级从高到低可以分为以下几个级别：
- 同步任务（Synchronous Task） ：
- 同步任务是指需要立即执行的任务，如用户交互、用户事件处理等。这些任务具有最高的优先级，因为它们直接影响到用户体验。
- 批量更新任务（Batched Updates） ：
- 批量更新任务是指通过 React 的 setState() 函数触发的更新。React 会将多个 setState() 调用合并成一个更新批次，并在下一个帧中执行。这些任务的优先级次于同步任务，但高于其他类型的任务。
- 动画任务（Animation Task） ：
- 动画任务是指需要在下一个帧中执行的动画效果，如 CSS 动画、过渡效果等。这些任务具有较高的优先级，以保证动画的流畅性。
- 闲置任务（Idle Task） ：
- 闲置任务是指一些低优先级的后台任务，如预加载数据、缓存更新等。这些任务的优先级最低，只在系统资源完全空闲时才会执行。
