React Fiber 的主要目标是什么

一句话总结：

React Fiber 的主要目标是解决复杂应用下的主线程阻塞问题，实现"可中断、可恢复、带优先级"的增量渲染，从而赋予 React 真正的并发能力（Concurrent Rendering）。

在 React 15 及之前，更新是同步且不可中断的，一旦开始渲染，整个组件树必须一次性完成。Fiber 通过将渲染任务拆分为小的工作单元，并利用浏览器的空闲时间执行，彻底改变了这一局面。

为了突出技术深度，我们需要对比 Stack Reconciler（旧） 和 Fiber Reconciler（新） 。

维度	旧架构 (Stack Reconciler)	新架构 (Fiber Reconciler)
执行方式	同步递归，不可中断	异步循环，可中断、可恢复
任务粒度	粗粒度，一次性更新整棵树	细粒度，拆分为单个节点的工作单元
主线程占用	容易长时间占用，导致掉帧	分片执行，利用空闲时间，避免阻塞
优先级	无优先级概念，所有更新一视同仁	支持优先级调度，高优先级可打断低优先级
场景举例：
想象一个大型列表的渲染。在旧架构中，如果列表数据量巨大，React 会一直计算直到完成，期间用户的点击、输入都无法响应，页面呈现"假死"状态。而在 Fiber 架构下，React 会渲染一部分，然后停下来响应你的点击，之后再继续渲染剩下的部分。

从源码角度看，Fiber 包含两层含义：一种数据结构 和 一种执行模型。

在源码中，每个组件（DOM、Class、Function）都对应一个 Fiber 节点。它是一个 JavaScript 对象，核心字段如下：

type : 组件类型（如 div, MyComponent）。
key: 唯一标识。
child / sibling / return: 分别指向第一个子节点、下一个兄弟节点、父节点。
- 技术点 ：React 放弃了使用递归（调用栈）来遍历树，而是利用这三个指针构建了链表结构。这使得遍历可以随时暂停和恢复，因为不需要依赖函数调用栈。
stateNode: 指向组件实例或 DOM 节点。
alternate: 指向当前 Fiber 节点的"镜像"节点（用于双缓冲机制）。

Fiber 维护了两棵树：

更新时，React 会基于 Current Tree 构建 WorkInProgress Tree。一旦构建完成（Commit 阶段），两棵树会互换指针，WorkInProgress 瞬间变为 Current，实现 UI 的无闪烁更新。

Fiber 的性能优化主要体现在调度和执行流程上。

Fiber 的工作流程分为两个阶段：

Render 阶段 (协调阶段) ：
- 可中断：这是 Fiber 的核心。React 会遍历 Fiber 树，对比差异。每处理完一个节点，都会检查时间片是否用完（通常约 5ms）。如果超时，React 会主动让出主线程控制权，去处理用户交互或动画，等浏览器空闲时再回来继续。
- 纯内存操作：此阶段不修改真实 DOM，只生成副作用列表（Effect List）。
Commit 阶段 (提交阶段) ：
- 不可中断：一旦进入此阶段，必须同步执行完成。它负责将 Render 阶段收集到的副作用（增删改 DOM、执行生命周期）一次性应用到真实 DOM 上，保证 UI 的一致性。

Fiber 引入了 Lane 模型（位运算优先级），将更新分为不同等级：

实际场景：在一个搜索框中，输入文字是"高优先级"，必须立即响应；而根据输入内容去服务器请求数据并更新列表是"低优先级"。Fiber 允许高优先级的输入更新打断低优先级的列表渲染，确保输入框不卡顿。

综上所述，React Fiber 的主要目标是通过重构协调引擎，实现了以下价值：

这就是 Fiber 存在的意义------它让 React 从一个单纯的视图库，进化为一个能够智能调度渲染、适应复杂高性能场景的框架。