Fiber的四个关键机制

React Fiber 是 React 16 引入的全新协调算法，与之前的递归栈式架构不同，Fiber 架构显著增强了 React 在性能和灵活性方面的能力。以下是 Fiber 的四个主要优点及其解释：

1. 优先级机制

Fiber 架构引入了任务的优先级调度机制，通过为不同类型的任务分配优先级，React 可以更高效地管理渲染流程。
特性：
不同任务有不同的优先级，例如用户输入事件优先级最高，网络请求更新的优先级较低。
高优先级任务可以打断低优先级任务。
好处：
避免长时间渲染任务阻塞高优先级交互事件。
提升用户体验，确保界面响应性。
示例： 当用户在输入框输入内容时，更新操作会优先处理输入内容，而不是等待后台复杂计算完成后再更新。

2. 时间切片

React Fiber 通过时间切片将长任务分割成多个小任务，分段执行，充分利用浏览器的空闲时间。
特性：
每个时间切片大约为 5ms（浏览器帧率为 60FPS）。
在一个切片内执行一部分渲染任务，剩余任务推迟到下一个切片。
好处：
避免阻塞主线程，保持浏览器的流畅性。
在复杂页面中，保证动画、用户交互等实时性任务的优先处理。
示例： 如果需要渲染一棵大型虚拟 DOM 树，Fiber 会分片完成每一部分渲染，而不是一次性完成所有工作。

3. 双缓冲机制

Fiber 使用双缓冲机制来协调渲染任务，确保任务的无缝切换。
特性：
Current Fiber：当前正在显示的 Fiber 树。
Work-in-Progress Fiber：下一次渲染的 Fiber 树。
在渲染完成后，Work-in-Progress Fiber 会替换 Current Fiber。
好处：
实现任务的可中断和恢复。
渲染过程中避免直接修改屏幕上正在显示的内容，提升渲染稳定性。
示例： 在更新状态时，React 不会立即修改现有界面，而是创建一个新 Fiber 树，并在更新完成后进行替换。

4. 利用事件循环和渲染帧的原理，实现渲染任务的中断与恢复能力

React Fiber 利用浏览器事件循环和 requestIdleCallback 等 API，在渲染任务中间插入检查点，允许任务中断并在空闲时恢复。
特性：
React Fiber 会在渲染过程中检查是否还有剩余时间可用。
如果没有剩余时间，则中断当前渲染，并让出主线程。
当主线程空闲时，继续恢复被中断的渲染任务。
好处：
主线程不会长时间被占用，交互事件可以快速响应。
保证高优先级任务的实时处理，低优先级任务可以延迟执行。
示例： 用户滚动页面时，Fiber 会暂停当前的虚拟 DOM 渲染任务，优先处理滚动事件。待滚动完成后，再恢复渲染。