好问题 你问的是 React Fiber 架构。这是 React 16 引入的核心机制，用来解决 React 在大规模更新时的性能问题。下面我给你从 背景 → Fiber 是什么 → 原理 → 优点 → 流程 来系统讲。

一、为什么需要 Fiber？

在 React 15 及以前，Reconciler（协调器） 是 递归调用 的：

• 一旦开始遍历虚拟 DOM 树，就会一直执行到更新完成。
• JS 是单线程的，如果组件树很大，就会长时间阻塞 UI（比如用户输入、动画掉帧）。

React 16 引入 Fiber 架构，实现“可中断的渲染”。

二、Fiber 是什么？

• Fiber 既是数据结构，又是调度机制。

1. 数据结构（链表树）

• 旧的虚拟 DOM 是树形结构，Fiber 把它改造成 链表树。
• 每个 Fiber 节点对应一个 React 组件，保存了：
• type：组件类型（函数 / 类 / DOM 节点）
• pendingProps / memoizedProps：新旧 props
• stateNode：真实 DOM 或类组件实例
• child / sibling / return：指向子节点、兄弟节点、父节点（让树可以“遍历暂停+恢复”）。

2. 调度机制

• Fiber 把渲染任务拆分成 小块（unit of work）。
• 每完成一个小块，就检查是否有更高优先级的任务（比如用户输入）。
• 如果有 → 暂停渲染，先去执行高优先级任务；之后再恢复渲染。

这就是所谓的 时间分片（Time Slicing）。

三、Fiber 的工作流程

React Fiber 的工作分 两大阶段：

1.调和阶段（Reconciliation / Render Phase）

• 生成新的 Fiber 树（虚拟 DOM → Fiber 节点）。
• 可以被中断（异步执行）。
• 做的事：
• Diff 新旧 Fiber（比较新旧 props、state、子节点）。
• 标记需要的更新（Placement / Update / Deletion）。

2.提交阶段（Commit Phase）

• 把 Fiber 树的变更同步到真实 DOM。
• 不能中断（必须一次性完成）。
• 分三步：
• Before Mutation：调用 getSnapshotBeforeUpdate。
• Mutation：操作 DOM（插入、更新、删除）。
• Layout：执行生命周期钩子（componentDidMount / useLayoutEffect）。

四、Fiber 的优点

1. 可中断渲染：解决 React 15 “一口气渲染完”的问题。
2. 优先级调度：不同更新任务有不同优先级（比如输入比动画更重要）。
3. 增量渲染：一次渲染可以拆成多次完成。
4. 为 Concurrent Mode（并发模式）打基础：React 18 的并发特性基于 Fiber。

五、Fiber 更新优先级（Scheduler）

Fiber 为每个更新任务分配优先级：

• Immediate：立即执行（比如点击）。
• User-blocking：高优先级（比如输入）。
• Normal：普通优先级。
• Low：低优先级（比如数据预加载）。
• Idle：空闲时才执行。

React 内部用 Scheduler（调度器） 来管理任务优先级。

六、整体流程总结

1. 触发更新（setState / useState）。
2. 调度器接管 → 把更新放入任务队列。
3. 调和阶段（可中断）：构建新的 Fiber 树，标记变更。
4. 提交阶段（不可中断）：批量更新真实 DOM。
5. 渲染完成，用户看到更新。

七、类比理解

可以把 React Fiber 想象成：

• 旧版 React：写一篇长文章时，必须一次写完，不能停。
• Fiber React：写文章时，每写几句就停下来，看看是不是有人找你聊（高优先级任务），聊完再继续写文章。