图 11:React Element 与 Fiber 节点的数据结构对比(类图)
📝 解析 :
React Element 是 createElement 返回的普通对象,包含 type、props、key 等信息,它是不可变 的,仅作为 UI 的"快照描述"。而 Fiber 节点 是 React 为每个 Element 在内存中创建的持久化工作单元 。它通过 child、sibling、return 三个指针构成可中断的链表树结构 ,替代了递归调用栈。alternate 指针是实现双缓冲的关键,指向另一棵树中的对应节点。
图 12:函数组件 Hooks 在 Fiber 上的单向链表存储结构
📝 解析 :
函数组件没有实例,所有状态和副作用都存储在 Fiber 节点的 memoizedState 属性 中,形成单向链表 。链表的顺序严格依赖于 Hooks 的调用顺序 ,这就是为什么 Hooks 不能在条件语句或循环内部调用的根本原因------顺序错位会导致链表节点指向错误的数据。每个 Hook 对象(如 useState)内部还持有自己的 queue(环状更新链表),用于存储多次 setState 操作。