React18学习心得
之前没有学习过源码，一直对源码的实现觉得是一件高深莫测的事情，直到遇到了卡颂老师，非常感谢卡颂老师的《从零实现React18》的课程，很荣信能碰到卡颂老师这门课程，他给了我很多的收获。
Fiber架构
然而，传统的Stack Reconciler（栈调和器）因其基于递归调用栈的同步、不可中断特性，成为了性能的瓶颈。当React开始渲染一棵庞大的组件树时，它会阻塞主线程，导致用户交互卡顿。React 16的Fiber架构，正是为颠覆这一局面而生。
1. Fiber节点：从“描述符”到“工作单元”的蜕变
Fiber的本质，是一个增强了功能的虚拟DOM节点数据结构。它不再仅仅描述UI，更是一个工作单元。每个Fiber节点都包含了：
- 组件的类型、状态、Props。
- 指向其子节点、兄弟节点、父节点的指针，形成一个链表树。
- 需要执行的副作用，如
Placement、Update、Deletion。
关键洞察： 正是链表结构赋予了React“可中断”的能力。递归调用栈是“一气呵成”的，而链表的遍历（child -> sibling -> return）可以随时在完成一个节点后暂停，并记录下当前的位置，等待下次有空时继续。
2. 双缓冲技术与渲染分片
在实现Fiber架构时，我构建了两棵树：
- Current Tree： 代表当前已渲染到UI的状态。
- WorkInProgress Tree： 在内存中构建的、准备用于下一次渲染的树。
这个过程被分为两个核心阶段：
render阶段（可中断）： React会遍历Fiber节点，构建WorkInProgress树，执行Diff计算，并将需要变更的副作用标记在节点上。这个阶段的工作被拆分成一个个小单元，由调度器控制执行。它模拟了requestIdleCallback的行为，在浏览器的空闲分片时间内工作。一旦有更高优先级的任务（如用户输入）介入，React可以立即中断当前的渲染过程，先去处理紧急更新。commit阶段（不可中断）： 当所有Fiber节点的渲染工作都已完成，WorkInProgress树就准备好了。此时，React会一气呵成地进入commit阶段，同步地执行所有被标记的副作用，将最终结果更新到真实DOM。这个阶段的不可中断性，确保了UI能够瞬间完成切换，保持一致性。
亲手实现Fiber的遍历、中断与恢复机制，让我真正理解了“并发渲染”的含义。它不再是文档里抽象的概念，而是一种将渲染任务“化整为零”、“分而治之”的调度策略。这为React 18的所有并发特性（如useTransition、Suspense）铺平了道路——useTransition的本质，正是将非紧急更新标记为低优先级，使其可以被高优先级的用户交互所中断。
