从零实现一个简易版 React：深入理解 Fiber 架构与协调算法

前言

在现代前端开发中，React 无疑是最受欢迎的框架之一。然而，许多开发者虽然熟练使用 React，却对其底层原理知之甚少。今天，我们将一起动手实现一个简易版的 React，重点探索其核心的 Fiber 架构和协调算法。通过这个实践，你不仅能深入理解 React 的工作原理，还能掌握如何构建自己的虚拟 DOM 系统。

一、为什么需要 Fiber 架构？

在 React 16 之前，React 使用的是 Stack Reconciler（栈协调器）。这个协调器使用递归的方式遍历虚拟 DOM 树，一旦开始就无法中断。如果组件树很深，或者更新计算量很大，就会长时间占用主线程，导致页面卡顿、掉帧。

Fiber 架构的诞生正是为了解决这个问题。它引入了以下关键改进：

1. 可中断的异步渲染：将渲染工作分解成多个小单元
2. 增量渲染：可以暂停、恢复和放弃渲染任务
3. 优先级调度：不同更新有不同的优先级

二、实现基础虚拟 DOM

首先，让我们从最简单的虚拟 DOM 开始。虚拟 DOM 是真实 DOM 的轻量级 JavaScript 表示。

// 创建虚拟 DOM 元素的函数
function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map(child =>
        typeof child === "object" 
          ? child 
          : createTextElement(child)
      ),
    },
  };
}

// 创建文本元素
function createTextElement(text) {
  return {
    type: "TEXT_ELEMENT",
    props: {
      nodeValue: text,
      children: [],
    },
  };
}

// 示例：使用我们的 createElement
const element = createElement(
  "div",
  { id: "app" },
  createElement("h1", null, "Hello World"),
  "Welcome to Mini React"
);

三、实现 Fiber 数据结构

Fiber 是 React 中的最小工作单元。每个 Fiber 节点对应一个 React 元素，包含了足够的信息来协调更新。

// Fiber 节点结构
class FiberNode {
  constructor(type, props) {
    // 标识节点类型
    this.type = type;
    this.props = props;
    
    // 连接其他 Fiber 节点的指针
    this.parent = null;      // 父节点
    this.child = null;       // 第一个子节点
    this.sibling = null;     // 兄弟节点
    
    // 用于协调的指针
    this.alternate = null;   // 上一次渲染的 Fiber
    this.stateNode = null;   // 对应的真实 DOM 节点
    
    // 副作用标签
    this.effectTag = null;   // 标记需要执行的操作（PLACEMENT, UPDATE, DELETION）
    
    // 子节点的副作用链表
    this.firstEffect = null;
    this.lastEffect = null;
    
    // 下一个要处理的 Fiber
    this.nextUnitOfWork = null;
  }
}

// 创建 Fiber 树的函数
function createFiberFromElement(element) {
  const { type, props } = element;
  return new FiberNode(type, props);
}

四、实现协调算法（Reconciliation）

协调算法是 React 的核心，它决定了如何高效地更新 DOM。我们的实现将包含两个阶段：渲染阶段和提交阶段。

4.1 渲染阶段（可中断）

// 工作循环 - 这是 Fiber 架构的核心
function workLoop(deadline) {
  let shouldYield = false;
  
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    
    // 检查是否需要让出主线程
    shouldYield = deadline.timeRemaining() < 1;
  }
  
  // 如果所有工作都完成了，进入提交阶段
  if (!nextUnitOfWork && wipRoot) {
    commitRoot();
  }
  
  // 使用 requestIdleCallback 调度下一次工作循环
  requestIdleCallback(workLoop);
}

// 开始调度
requestIdleCallback(workLoop);

// 执行单个工作单元
function performUnitOfWork(fiber) {
  // 1. 创建当前 Fiber 对应的 DOM 节点
  if (!fiber.stateNode) {
    fiber.stateNode = createDOM(fiber);
  }
  
  // 2. 为子元素创建 Fiber 节点
  reconcileChildren(fiber, fiber.props.children);
  
  // 3. 返回下一个要处理的 Fiber
  if (fiber.child) {
    return fiber.child;
  }
  
  let nextFiber = fiber;
  while (nextFiber) {
    if (nextFiber.sibling) {
      return nextFiber.sibling;
    }
    nextFiber = nextFiber.parent;
  }
  
  return null;
}

// 协调子节点
function reconcileChildren(wipFiber, elements) {
  let index = 0;
  let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
  let prevSibling = null;
  
  while (index < elements.length || oldFiber != null) {
    const element = elements[index];
    let newFiber = null;
    
    // 比较新旧 Fiber
    const sameType = oldFiber && element && element.type === oldFiber.type;
    
    if (sameType) {
      // 类型相同，更新节点
      newFiber = {
        type: oldFiber.type,
        props: element.props,
        stateNode: oldFiber.stateNode,
        parent: wipFiber,
        alternate: oldFiber,
        effectTag: "UPDATE",
      };
    }
    
    if (element && !sameType) {
      // 类型不同，创建新节点
      newFiber = {
        type: element.type,
        props: element.props,
        stateNode: null,
        parent: wipFiber,
        alternate: null,
        effectTag: "PLACEMENT",
      };
    }
    
    if (oldFiber && !sameType) {
      // 删除旧节点
      oldFiber.effectTag = "DELETION";
      deletions.push(oldFiber);
    }
    
    if (oldFiber) {
      oldFiber = oldFiber.sibling;
    }
    
    if (newFiber) {
      if (index === 0) {
        wipFiber.child = newFiber;
      } else {
        prevSibling.sibling = newFiber;
      }
      
      prevSibling = newFiber;
    }
    
    index++;
  }
}

4.2 提交阶段（不可中断）

// 提交所有变更到真实 DOM
function commitRoot() {
  deletions.forEach(commitWork);
  commitWork(wipRoot.child);
  currentRoot = wipRoot;
  wipRoot = null;
}

function commitWork(fiber) {
  if (!fiber) return;
  
  let domParentFiber = fiber.parent;
  while (!domParentFiber.stateNode) {
    domParentFiber = domParentFiber.parent;
  }
  const domParent = domParentFiber.stateNode;
  
  if (fiber.effectTag === "PLACEMENT" && fiber.stateNode != null) {
    domParent.appendChild(fiber.stateNode);
  } else if (fiber.effectTag === "UPDATE" && fiber.stateNode != null) {
    updateDOM(
      fiber.stateNode,
      fiber.alternate.props,
      fiber.props
    );
  } else if (fiber.effectTag === "DELETION") {
    commitDeletion(fiber, domParent);
  }
  
  commitWork(fiber.child);
  commitWork(fiber.sibling);
}

// 更新 DOM 属性
function updateDOM(dom, prevProps, nextProps) {
  // 移除旧的属性
  Object.keys(prevProps)
    .filter(isProperty)
    .filter(key => !(key in nextProps))
    .forEach(name => {
      dom[name] = "";
    });
  
  // 设置新的属性
  Object.keys(nextProps)
    .filter(isProperty)
    .filter(key => prevProps[key] !== nextProps[key])
    .forEach(name => {
      dom[name] = nextProps[name];
    });
  
  // 处理事件监听器
  Object.keys(prevProps)
    .filter(isEvent)
    .filter(key => !(key in nextProps) || prevProps[key] !== nextProps[key])
    .forEach(name => {
      const eventType = name.toLowerCase().substring(2);
      dom.removeEventListener(eventType, prevProps[name]);
    });
  
  Object.keys(nextProps)
    .filter(isEvent)
    .filter(key => prevProps[key] !== nextProps[key])
    .forEach(name => {
      const eventType = name.toLowerCase().substring(2);
      dom.addEventListener(eventType, nextProps[name]);
    });
}

五、实现简单的组件系统

现在让我们添加对函数组件的支持：

// 处理函数组件
function updateFunctionComponent(fiber) {
  // 执行函数组件，获取子元素