【图】React源码解析-第五部分:底层数据结构与内存模型

83 阅读1分钟

React源码解析 宏观架构 (4).png

React Element 与 Fiber 节点的数据结构对比

deepseek_mermaid_20260706_06c655.png

React Element 是 createElement 返回的普通对象,包含 typepropskey 等信息,它是不可变的,仅作为 UI 的“快照描述”。而 Fiber 节点是 React 为每个 Element 在内存中创建的持久化工作单元。它通过 childsiblingreturn 三个指针构成可中断的链表树结构,替代了递归调用栈。alternate 指针是实现双缓冲的关键,指向另一棵树中的对应节点。

函数组件 Hooks 在 Fiber 上的单向链表存储结构

deepseek_mermaid_20260706_b90bb1.png

函数组件没有实例,所有状态和副作用都存储在 Fiber 节点的 memoizedState 属性中,形成单向链表。链表的顺序严格依赖于 Hooks 的调用顺序,这就是为什么 Hooks 不能在条件语句或循环内部调用的根本原因——顺序错位会导致链表节点指向错误的数据。每个 Hook 对象(如 useState)内部还持有自己的 queue(环状更新链表),用于存储多次 setState 操作。