zhangdizhangdi

基础

目录结构

版本：19.2.0

bash
├──
└── packages/
    └── react/                # React组件的基本API，（如 useState、createElement）
    └── react-reconciler/     # 核心：Fiber 架构与 Diff 算法实现
    └── scheduler/            # 任务调度器，实现时间切片和并发模式
    └── react-dom/            # 负责 DOM 渲染的实现
    └── react-dom-bindings/   # 处理DOM元素的创建、属性更新、事件系统等
    └── react-client/
    └── shared/               # 各包共用的工具函数和常量
    └── ...

运行流程

JSX -> createElement -> Fiber树构建 -> Reconciler 调和 -> Renderer 渲染

核心概念：

  • JSX 转换成 ReactElement
  • ReactDOM.render() 的入口逻辑
  • Fiber 树与更新机制
  • commit 阶段 DOM 更新

Fiber

Fiber 是 React 用来描述组件单元的轻量“工作单元”数据结构，它把组件树拆成了很多可中断、可调度的小任务，从而支持时间切片、并发更新与增量渲染。

  • Fiber Node 结构：type、return、child、sibling
  • Fiber Tree 的构建与更新
  • 双缓存机制（current / workInProgress）
  • Reconciliation 阶段：Diff 算法
  • Commit 阶段：DOM 更新与副作用处理

核心目标

  • 把一次长任务拆为许多可暂停/恢复的“单位工作”（unit of work）。
  • 在内存保存组件的渲染状态（props/state、子节点、副作用等）。
  • 支持增量调和（reconciliation）与优先级（lanes/priority）调度。

属性

ts
// function FiberNode(){}

type FiberNode = {
  tag: WorkTag         // Fiber 节点类型：FunctionComponent / ClassComponent / HostComponent 等
  key: null | string   // React Element 上的 key 属性，用于列表渲染时的优化
  elementType: any     // React Element 的类型
  type: any
  stateNode: any       // 指向真实DOM/实例的引用

  // Fiber，链接关系，形成树结构
  return: Fiber | null    // 指向父 Fiber
  child: Fiber | null     // 指向第一个子 Fiber
  sibling: Fiber | null   // 指向下一个兄弟 Fiber
  index: number           // 在兄弟节点中的索引（用于复用/排序优化）

  ref:
    | null
    | (((handle: mixed) => void) & {_stringRef: ?string, ...})
    | RefObject,
  refCleanup:  null | (() => void)

  // 状态与更新队列
  pendingProps: any                    // 新的、待处理的 props
  memoizedProps: any                   // 上一次成功渲染时使用的 props
  memoizedState: any                   // 上一次成功渲染时使用的 state
  updateQueue: mixed                   // 该 Fiber 节点上待处理的更新
  dependencies: Dependencies | null

  mode: TypeOfMode                 //

  // 副作用 Effect
  flags: Flags                     // 当前 Fiber 的副作用类型（Placement, Update, Deletion）
  subtreeFlags: Flags              // 子树中所有的 flags（用于快速跳过无副作用子树）
  deletions: Array<Fiber> | null   // 待删除的 Fiber

  lanes: Lanes                     // 表示该 Fiber 的更新优先级
  childLanes: Lanes                // 子树中所有 Fiber 节点待处理的更新的优先级

  // 双缓存：current/alternate
  alternate: Fiber | null          // current <-> workInProgress 的互指
}

双缓存

可以在构建新树时不破坏当前显示，失败时回退简单，且方便做中断/恢复。

  • React 在内存中同时保留两棵 Fiber 树的“视图”：
    • current：已提交到屏幕上的树（stable）
    • workInProgress：正在构建/调和的树（unstable）
  • 它们通过 alternate 互相指向
    • current.alternate === workInProgress
    • workInProgress.alternate === current

Diff 算法与 Reconciliation

理解 React 如何最小化 DOM 操作。

主要内容：

  • 同层节点对比
  • key 的作用
  • 单节点 / 多节点 Diff
  • 标记副作用（Placement / Update / Deletion）
  • 调和阶段生成 EffectList

Hooks

  • useState / useReducer：状态保存原理
  • useEffect：副作用注册与调度
  • useMemo / useCallback：缓存机制
  • Hooks 在 Fiber 上的存储方式（memoizedState）
  • 函数组件更新时 Hook 的链表结构

参考