全面理解 React Fiber 初始链表构建过程：剖析 770 行代码

2023-11-23 14:49:29

前言

React Fiber 是 React 16 及更高版本的核心算法，相比之前的算法，React Fiber 带来了诸如可中断渲染、增量渲染等特性。而 React Fiber 初始链表的构建过程是 React 应用 mount 阶段的关键一步，对整个应用的性能和稳定性都有着重要影响。

React Fiber 初始链表构建过程剖析

为了深入理解 React Fiber 初始链表的构建过程，我们整理了 770 行代码，以极简的代码量来还原该过程。

1. 创建 Fiber 节点

Fiber 节点是 React Fiber 的核心数据结构，它了 DOM 节点的属性和状态。在初始链表构建过程中，首先会创建 Fiber 节点。

function createFiber(element, isRoot) {
  return {
    type: element.type,
    props: element.props,
    child: null,
    sibling: null,
    return: isRoot ? null : currentFiber,
    alternate: null,
    stateNode: null,
    deletions: null,
    effects: null,
    nextEffect: null,
  };
}

2. 构建 Fiber 树

Fiber 树是 React Fiber 的数据结构之一，它了 DOM 节点的父子关系。在初始链表构建过程中，会将 Fiber 节点连接成 Fiber 树。

function buildFiberTree(element) {
  const rootFiber = createFiber(element, true);
  let currentFiber = rootFiber;
  let nextUnitOfWork = null;

  while (currentFiber) {
    if (currentFiber.type === 'HostComponent') {
      currentFiber.stateNode = createDOMElement(currentFiber);
    }

    if (currentFiber.child) {
      nextUnitOfWork = currentFiber.child;
    } else if (currentFiber.sibling) {
      nextUnitOfWork = currentFiber.sibling;
    } else {
      nextUnitOfWork = currentFiber.return;
      while (nextUnitOfWork) {
        if (nextUnitOfWork.sibling) {
          nextUnitOfWork = nextUnitOfWork.sibling;
          break;
        }
        nextUnitOfWork = nextUnitOfWork.return;
      }
    }

    currentFiber = nextUnitOfWork;
  }

  return rootFiber;
}

3. 创建初始链表

初始链表是 React Fiber 的数据结构之一，它描述了 DOM 节点的顺序。在初始链表构建过程中，会将 Fiber 树转换为初始链表。

function createInitialFiberList(rootFiber) {
  let currentFiber = rootFiber;
  let firstFiber = null;
  let lastFiber = null;

  while (currentFiber) {
    if (!firstFiber) {
      firstFiber = currentFiber;
    }

    if (lastFiber) {
      lastFiber.sibling = currentFiber;
    }

    lastFiber = currentFiber;
    currentFiber = currentFiber.child;
  }

  return firstFiber;
}