为什么需要Fiber
传统的 React 15 及之前的版本使用了栈递归算法来处理更新。这种方法有以下问题：
- 不可中断： 更新是同步的，不能在中途暂停。例如，当组件树很大或计算开销较高时，可能导致主线程被阻塞，用户界面出现卡顿。
- UI卡顿： 如果某些渲染任务需要较长时间完成（例如复杂的动画或大数据渲染），用户无法与界面进行交互，影响用户体验。
什么是Fiber
Fiber 可以理解为是一个执行单元，也可以理解为是一种数据结构。
- 一个执行单元
Fiber 可以被理解为划分一个个更小的执行单元，它是把一个大任务拆分为了很多个小块任务，一个小块任务的执行必须是一次完成的，不能出现暂停，但是一个小块任务执行完后可以移交控制权给浏览器去响应用户，从而不用像之前一样要等那个大任务一直执行完成再去响应用户。
React Fiber 与浏览器的核心交互流程如下：
-
一种数据结构
Fiber 还可以理解为是一种数据结构，React Fiber 就是采用链表实现的。每个 Virtual DOM 都可以表示为一个 fiber，如下图所示，每个节点都是一个 fiber。一个 fiber包括了 child（第一个子节点）、sibling（兄弟节点）、return（父节点）等属性，React Fiber 机制的实现，就是依赖于以下的数据结构。
组件类型：描述节点对应的组件（函数组件、类组件、DOM 节点等）。父节点、兄弟节点、子节点：Fiber 节点是一个链表树结构，通过这些指针构建整棵 Fiber 树。状态更新：节点保存与当前状态更新相关的信息。优先级：用于调度的优先级信息。
Fiber执行原理
-
调度阶段 (Reconciliation/Render Phase)：
- React 会比较新的虚拟 DOM 和旧的虚拟 DOM，生成更新任务。
- 此阶段是可中断的，可以暂停或恢复。
-
提交阶段 (Commit Phase)：
- 在此阶段，React 会将更新应用到实际的 DOM 上。
- 此阶段是不可中断的，确保更新一致性。
总结：Fiber 的优势
-
流畅的用户体验：
- 通过任务分片和优先级调度，React 能够在渲染过程中保持应用的响应性，例如动画不卡顿。
-
支持时间切片 (Time Slicing)：
- 时间切片允许 React 在浏览器空闲时处理更新任务，而不会阻塞主线程，避免页面“卡死”。
-
更高的灵活性：
- React Fiber 的架构让未来的改进（如并发模式和优先级调度）变得更加容易。
推荐阅读相关文章：
