react源码

一、Fiber 架构与协调算法（Reconciliation）

• Fiber 节点：位于 react-reconciler 包中，每个组件对应一个 Fiber 节点，保存状态、副作用等信息。

  • 结构：包含 type、child（第一个子节点）、sibling（兄弟节点）、return（父节点）、stateNode（关联的 DOM 或组件实例）、pendingProps/memoizedProps（新旧属性）、memoizedState（如 Hooks 状态）等。

• 双缓存机制：维护两棵 Fiber 树（current 和 workInProgress），交替更新以减少内存分配。

• 遍历流程：深度优先遍历，可中断并恢复。分为 Render 阶段（构建 Fiber 树，收集副作用）和 Commit 阶段（更新 DOM）

Render 阶段

• 目标：构建新的 Fiber 树，并标记需要更新的节点。

• 过程：

  1. 开始遍历：从根 Fiber 开始，递归遍历组件树。

  2. 对比节点：

     • 如果节点类型相同，复用 Fiber 节点，更新属性。

     • 如果节点类型不同，标记旧节点为删除，创建新节点。

  3. 收集副作用：

     • 将需要更新的节点标记为副作用（如 Placement、Update、Deletion）。

     • 将这些节点加入副作用链表。

  4. 中断与恢复：

     • Render 阶段是可中断的，React 会根据任务优先级调度更新。

     • 如果时间片用尽，React 会暂停遍历，等待下一次调度。

Commit 阶段

• 目标：将 Render 阶段的结果应用到 DOM 上。

• 过程：

  1. BeforeMutation：

     • 执行 DOM 更新前的生命周期（如 getSnapshotBeforeUpdate）。

  2. Mutation：

     • 更新 DOM（如插入、删除、修改节点）。

     • 执行函数组件的副作用清理（如 useLayoutEffect 的清理函数）。

  3. Layout：

     • 执行 DOM 更新后的生命周期（如 componentDidMount、componentDidUpdate）。

     • 执行函数组件的副作用（如 useLayoutEffect）。

  4. 切换树：

     • 将工作树切换为当前树，完成更新。