⚡ 30 秒速记

• 核心判断：Fiber 把不可中断的递归遍历改造成可保存进度的工作单元，使渲染阶段能够调度、暂停和恢复
• 原理主线：围绕 「current 树 与 workInPr」、「update 的创建」、「Scheduler——“时间切片”与“优」 建立输入、状态变化与输出之间的因果关系
• 文章范围：解析了 React Fiber 架构下 Concurrent 模式（并发模式）的实现原理，详细讲解了时间切片、优先级调度、current 树与 workInProgress 树的双缓冲机制，以及它们如何提升 React 应用的性能和响应速度
• 边界与代价：可中断的是渲染计算，提交阶段仍需保持一致性；React 18+ 并发能力也不等于所有更新都并行执行
• 工程落地：优化时先减少无效工作和长任务，再结合优先级、过渡更新和切片机制改善响应性

Fiber 将递归渲染拆成可暂停、可恢复的工作单元，再由 Scheduler 通过时间切片和优先级安排执行。 workLoopConcurrent 每处理一个单元都会借助 shouldYield() 判断是否该让出主线程，未完成的工作随后可继续。current 树负责展示，workInProgress 树在内存中计算，并通过 alternate 复用节点，提交后两者身份切换。具体函数和优先级实现可能随版本变化，工程中应以实际版本和性能面板为准。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。

通过对整个 ReactDOM.render 所触发的渲染链路进行了分析和串联，我们已经把 Fiber 架构在实现层面的大部分要点都过了一遍。刚讲过的这部分知识，一方面相对来说复杂度比较高，需要一些耐心反复地理解和消化；另一方面，本讲接下来要讲解的内容，也和它存在着较强的依赖关系，因此对这些前置知识的把握就显得尤为重要。

下面我说几个函数，帮你检验一下自己的学习效果：

• performSyncWorkOnRoot
• workLoopSync
• performUnitOfWork
• beginWork
• completeWork
• completeUnitOfWork
• reconcileChildFibers

本讲我将带你去认识 Fiber 架构最迷人的那一面——Concurrent 模式（异步渲染）下的“时间切片”和“优先级”实现。