当前位置：首页 > news >正文

react的 Fiber 节点的链表存储

news 来源：原创 2025/4/28 7:11:56

在React Fiber架构中，Fiber节点的链表存储是一种重要的数据结构组织方式，用于管理和遍历Fiber节点。以下是关于Fiber节点链表存储的详细介绍：

链表结构

单链表：React Fiber节点通过next指针形成单链表结构。每个Fiber节点都有一个next属性，它指向下一个兄弟节点。如果当前节点没有兄弟节点，next则为null。这种单链表结构使得React可以按照顺序依次遍历每个兄弟节点，便于在协调过程中对节点进行处理。
双链表：除了兄弟节点之间的单链表关系，Fiber节点还通过return和child指针形成类似双链表的结构，用于在父子节点之间进行导航。return指针指向父节点，child指针指向第一个子节点。通过这种方式，React可以方便地在树形结构中上下移动，从父节点访问子节点，或者从子节点回溯到父节点。

作用

遍历优化：链表结构使得React能够高效地遍历Fiber树。在协调阶段，React可以沿着链表依次访问每个Fiber节点，对其进行Diff算法比较、标记effectTag等操作。这种遍历方式可以按照特定的顺序处理节点，确保所有节点都能被正确处理，同时避免了不必要的重复访问。
暂停与恢复：由于Fiber节点以链表形式存储，React可以在遍历过程中暂停和恢复任务。当遇到高优先级任务需要处理时，React可以暂停当前的Fiber遍历，将执行权交给其他任务。当条件允许时，再从暂停的位置继续遍历链表，恢复对Fiber节点的处理，从而实现任务的可中断性和优先级调度。
内存管理：链表结构有助于优化内存使用。通过指针连接各个Fiber节点，而不是一次性分配大量连续的内存空间来存储整个树结构，可以更灵活地分配和释放内存。当某个Fiber节点不再需要时，可以方便地通过修改指针来断开其与链表的连接，使其占用的内存能够被回收。

示例代码

以下是一个简单的示例代码，用于展示Fiber节点链表存储的基本结构：

// 定义Fiber节点
function FiberNode(tag, stateNode, props) {this.tag = tag;this.stateNode = stateNode;this.props = props;this.child = null;this.sibling = null;this.return = null;
}// 创建Fiber树
const rootFiber = new FiberNode('ROOT', null, {});
const childFiber1 = new FiberNode('COMPONENT', null, {});
const childFiber2 = new FiberNode('COMPONENT', null, {});
const grandChildFiber = new FiberNode('COMPONENT', null, {});// 连接Fiber节点形成树结构
rootFiber.child = childFiber1;
childFiber1.sibling = childFiber2;
childFiber1.return = rootFiber;
childFiber2.return = rootFiber;
childFiber1.child = grandChildFiber;
grandChildFiber.return = childFiber1;