使用者痛点：在大型 React 应用中。经常会遇到页面卡顿、动画掉帧、输入延迟等问题，特别是当组件树非常庞大时渲染过程会阻塞主线程，导致交互不流畅。React Fiber 正是为了解决这些痛点而诞生的。不过，

React Fiber 是 React 16 引入的新架构。它的主要目标是解决大型应用渲染卡顿、无法中断渲染、使用者交互不流畅的问题。

1. Fiber 架构
2. 时间切片
3. 任务调度

一、为什么需要 Fiber

在 React 15 之前，React 使用的是Stack Reconciler。按理说，

更新流程这方面。

render → diff → 更新 DOM

整个过程必须一次性执行完毕。

如果组件树很大：

10000 个组件

至于可能需要耗时，

16 ms / 30 ms / 50 ms / 甚至 100 ms

浏览器主线程被阻塞。导致：

• 页面卡顿
• 动画掉帧
• 输入延迟

Fiber 本质上是一种可中断的链表树结构 + 新的协调算法。

React 把每个组件映射为一个 Fiber 节点。

对应的 Fiber 树示意：

App Fiber
├── Header Fiber
└── Main Fiber

每个 Fiber 节点都是一个普通的 JavaScript 对象：

{
再看type。App,stateNode: DOM,child: Fiber,sibling: Fiber,return: Fiber
}

三、Fiber 节点结构

const fiber = {
type,stateNode,child,sibling,return,pendingProps,memoizedProps,memoizedState,flags
};

child – 第一个子节点

A
├─B
├─C
└─D
A.child = B

sibling – 同级兄弟节点

B.sibling = C
C.sibling = D
// 链表：B → C → D

return – 父节点指针

B.return = A
C.return = A
D.return = A

组合起来就是典型的“三指针树”。

四、Fiber 工作原理：从递归到循环遍历

旧实现：

A ├─ B ├─ D └─ E └─ C
walk
walk
walk
walk
walk

递归方式无法在任意时刻暂停或中断。

Fiber 实现：

while {
performUnitOfWork;}

每次只处理一个 Fiber 节点。处理完后可以暂停、恢复或放弃当前任务**，为时间切片提供了可能。说起来，

五、时间切片——让长任务“拆分”成短任务

No Time Slicing示例

0ms --------------------100ms ← React 一口气执行完所有工作
使用者点击 → 必须等到 100ms 后才能响应 ← 页面卡死

The Power of Time Slicing 有时间切片

100ms 的任务 → 拆成多个 5ms 小块：
5ms → let 主线程空出 → 浏览器绘制 → 再继续下一个 5ms...

这样即使在执行大量更新时使用者仍然可以进行点击、滚动和动画等交互。不会出现明显卡顿，

六、requestIdleCallback 与自研 Scheduler

The initial idea was to rely on,which runs callbacks when browser is idle:

requestIdleCallback(deadline => {
while > 0) {
work;}
})，

但该 API 在部分浏览器上兼容性差且不够稳定。于是 React 自己实现了一个跨网站的 Scheduler，以统一管理任务调度。

七、任务调度 Scheduler —— 决定“谁先干活”

• Scheuler 的职责： 决定任务执行顺序、是否可以被中断还有何时恢复。
•   → Scheduler → Fiber Reconciliation → DOM Commit*.

八、任务优先级——把关键事儿先做好

优先级类型	描述 / 示例场景
高优先级	User 输入事件、紧急 UI 更新等，需要立刻响应。
低优先级	L​ist 刷新、大数据加载等，可在空闲时间完成。
非阻塞	L​og 上报或预取资源等，对 UI 没有直接影响。老实说，

再看举例。页面同时渲染一个包含  和 

 的大列表。当使用者敲击键盘时高优先级任务会抢占 CPU。列表渲染则被降至低优先级，在空闲时再继续，从而避免输入卡顿。

九、双缓存机制——安全地对比新旧树

• The current UI is represented by "Current" fiber tree.
• A copy called "WorkInProgress",is created for every update.
• The diff algorithm runs on WorkInProgress tree without touching visible UI.
• If everything passes。two trees are swapped – an operation similar to double‑buffering in game rendering.
Current ← Visible UI WorkInProgress ← New tree being built // after reconciliation Current ← WorkInProgress // swap instantly This guarantees that partially computed trees never affect what user sees.

十、React 更新流程——Render 与 Commit 的分离

完整流程：

setState
↓ 创建 Update
↓ 加入更新队列
↓ Scheduler 调度
↓ Fiber Reconciliation
↓ Diff
↓ Commit 阶段
两大阶段细分：


Render 阶段：
计算新树，可随时暂停；主要负责调用 component.render / function component 执行还有 Hook 的依赖计算。


`performUnitOfWork` 会遍历整个 fiber 树并产生 side‑effects 标记，但不真正修改 DOM。

`deadline.timeRemaining` 用来决定何时让出主线程。
\end{ul}
\end{list}


Commit 阶段
一次性同步提交所有副作用，包括 DOM 更新、副作用 Hook 的执行。此阶段不可被中断，以保证 UI 状态一致性。


mermaid
graph LR
R -->|可暂停| C
C -->|同步| DOM


\end{verbatim}

Thus的观点是。


Render -> Commit



The Concurrent Rendering mode builds on top of fiber architecture. It enables developers to explicitly mark low‑priority updates using APIs such as startTransition,useDeferredValue,etc.:

js
startTransition => {
setList;// low priority – rendered when browser has time
});不过，

setInput;// high priority – rendered immediately


The scheduler guarantees that high‑priority updates always win over low‑priority ones,delivering a smooth user experience even under heavy data loads.


<


常考问题与答案要点 

Fiber 能解决什么痛点？其实，
突破旧 Stack Reconciler 无法中断渲染导致页面卡顿的问题。

React 16 引入的新协调架构。把组件树转化为可中断的 fiber 对象链表，并把渲染拆成多个小单元。

把长任务拆成若干短任务。在每段之间让出主线程，让浏览器有机会开始规划/绘制，从而保持交互流畅。

内部调度器，负责管理不同优先级任务的排队、中断与恢复。

Render 与 Commit 有何区别？



阶段
是否可中断
主要职责

Render
✅ 可中断
Diff、新 fiber 树创建

Commit
❌ 不可中断
DOM 更新 + Effect 执行
\end{table}
\end{cell}
\end{row}









通过以上结构化梳理。你可以快速定位「为什么会卡」→「Fiber 怎么做」→「如何利用时间切片和 Scheduler 把卡住的地方拆开」这条思路，从而在实际项目和面试中都能自信地解释 React 的并发渲染机制。

---