一、Virtual DOM 不够用了

早期的 React用 Virtual DOM 来描述界面本质上是一个嵌套的对象树：

{
至于type。'div',props: {
className: 'container',children:
}
}

痛点一：它只描述“应该长什么样”，没有描述“要做什么工作”。每次 `setState` 都要遍历整棵树比较新旧差异。遍历过程中的中间状态只能保存在调用栈上，一旦开始就无法中断。

痛点二：它是不可变的。按理说，每次更新都会生成全新树，旧树被抛弃。这在高频更新场景下导致大量垃圾产生和 GC 压力。

Fiber 数据结构正是为了解决这两个痛点而诞生的：每个 Fiber 节点既是 UI 描述。也是工作单元，记录自身类型、上下游链接、待处理更新还有优先级和副作用。

二、Fiber 节点的四重身份

打开 packages/react-reconciler/src/ReactInternalTypes.js 可以看到完整的 Fiber 类型定义：

// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactInternalTypes.js
export type Fiber = {
// ===== 第一重身份：组件描述 =====
tag这方面，WorkTag,key: null | string,elementType: any。type: any,stateNode: any,// ===== 第二重身份：树的结构 =====
再看return，Fiber | null,child: Fiber | null,sibling: Fiber | null,index: number,// ===== 第三重身份：工作状态 =====
pendingProps: any,memoizedProps: any,memoizedState: any,updateQueue: mixed,dependencies: Dependencies | null,mode: TypeOfMode,lanes: Lanes,childLanes: Lanes,// ===== 第四重身份：副作用追踪 =====
再看flags，Flags,subtreeFlags: Flags,deletions?: Array,alternate?: Fiber,ref，: any
};不过，

缺失任意字段都会导致对应功能失效——删除 `alternate` 就没有双缓冲；删除 `lanes` 就失去并发调度；删除 `flags` 则无法在 commit 阶段执行 DOM 更新。

三、从源码里读懂每个字段

ReactWorkTags.js —— 种 Fiber 的身份牌

`tag` 并不是随意数字，而是来自 `ReactWorkTags.js` 的枚举：

// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactWorkTags.js
export const FunctionComponent = /* */;export const ClassComponent = /* */;export const HostRoot = /* */;// 树根节点
export const HostPortal = /* */;// Portal 子树入口
export const HostComponent = /* */;// DOM 元素
export const HostText = /* */;老实说，export const Fragment = /* */;export const Mode = /* */;其实，// StrictMode / ConcurrentMode
export const ContextConsumer = /* */;export const ContextProvider = /* */;export const ForwardRef = /* */;export const Profiler = /* */;export const SuspenseComponent = /* */;export const MemoComponent = /* */;export const SimpleMemoComponent = /* */;export const LazyComponent = /* */;export const IncompleteClassComponent = /* */;怎么说呢，export const DehydratedFragment = /* */;说起来，export const SuspenseListComponent = /* */;按理说，export const ScopeComponent = /* */;export const OffscreenComponent = /* */;export const LegacyHiddenComponent = /* */;export const CacheComponent = /* */;export const TracingMarkerComponent = /* */;export const HostHoistable = /* 可提高资源 */;
export const HostSingleton = /* 单例元素 */;export const IncompleteFunctionComponent = /* */;export const Throw = /* 用于抛出错误的特殊组件 */;export const ViewTransitionComponent;export const ActivityComponent;// ，更多类型省略

`tag` 是 reconciler 的“路由表”。在 `beginWork` 中会通过 `switch ` 决定走哪条处理分支——函数组件调用函数获取子节点。类组件调用 `render`，Host component 创建或更新 DOM，Suspense 检查是否已 resolve 等等。

FiberNode 构造函数 —— 二十多个字段的诞生现场