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

前言

React 作为当今最流行的前端框架之一，其核心的 Fiber 架构和协调算法一直是开发者们津津乐道的话题。很多人使用 React 多年，却对其底层原理一知半解。今天，我们将从零开始实现一个简易版的 React，通过动手实践来深入理解 Fiber 架构的精髓。

一、为什么要重新设计 React 架构？

在 Fiber 架构出现之前，React 使用的是 Stack Reconciler（栈协调器）。这个架构有一个致命缺陷：递归不可中断。

// 旧的栈协调器工作方式（简化示意）
function reconcile(prevElement, nextElement) {
  // 深度优先遍历，一旦开始就无法中断
  if (prevElement.type !== nextElement.type) {
    // 卸载旧组件，挂载新组件
  } else {
    // 更新属性
    updateProperties(prevElement, nextElement);
    // 递归处理子节点
    reconcileChildren(prevElement.children, nextElement.children);
  }
}

这种架构在大型应用或复杂组件树中会导致主线程长时间被占用，用户交互无法及时响应，造成卡顿。Fiber 架构的诞生就是为了解决这个问题。

二、Fiber 的核心概念

2.1 什么是 Fiber？

Fiber 是 React 16 引入的新协调引擎，它重新实现了虚拟 DOM 的底层结构。每个 Fiber 节点对应一个 React 元素，但比传统虚拟 DOM 节点包含更多信息。

// 简化的 Fiber 节点结构
class FiberNode {
  constructor(element) {
    this.tag = element.type; // 组件类型
    this.key = element.key;
    this.type = element.type;
    this.stateNode = null; // 对应的真实 DOM 节点
    this.return = null; // 父 Fiber
    this.child = null; // 第一个子 Fiber
    this.sibling = null; // 下一个兄弟 Fiber
    this.pendingProps = element.props; // 新的 props
    this.memoizedProps = null; // 上一次渲染的 props
    this.memoizedState = null; // 上一次渲染的 state
    this.effectTag = null; // 需要执行的副作用类型
    this.alternate = null; // 对应的旧 Fiber 节点
  }
}

2.2 Fiber 的双缓存机制

React 使用双缓存技术来优化渲染性能。它维护两棵 Fiber 树：

• current 树：当前屏幕上显示内容对应的 Fiber 树
• workInProgress 树：正在构建的新的 Fiber 树

class ReactDOM {
  static render(element, container) {
    // 创建根 Fiber
    const rootFiber = {
      tag: 'HOST_ROOT',
      stateNode: container,
      props: { children: [element] }
    };
    
    // 初始化 workInProgress 树
    scheduleUpdateOnFiber(rootFiber);
  }
}

三、实现简易版 React

3.1 创建虚拟 DOM

首先，我们需要一个创建虚拟 DOM 元素的方法：

// 创建虚拟 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: [],
    },
  };
}

3.2 实现 Fiber 协调器

这是整个实现的核心部分：

// 全局变量，跟踪当前处理的 Fiber
let nextUnitOfWork = null;
let wipRoot = null; // workInProgress 树的根
let currentRoot = null; // current 树的根
let deletions = null; // 需要删除的节点列表

// 开始渲染
function render(element, container) {
  wipRoot = {
    dom: container,
    props: {
      children: [element],
    },
    alternate: currentRoot, // 指向旧的 Fiber 树
  };
  
  deletions = [];
  nextUnitOfWork = wipRoot;
  
  // 启动工作循环
  requestIdleCallback(workLoop);
}

// 工作循环 - 核心调度机制
function workLoop(deadline) {
  let shouldYield = false;
  
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    shouldYield = deadline.timeRemaining() < 1;
  }
  
  if (!nextUnitOfWork && wipRoot) {
    commitRoot();
  }
  
  requestIdleCallback(workLoop);
}

// 执行单个工作单元
function performUnitOfWork(fiber) {
  // 1. 创建 DOM 节点（如果需要）
  if (!fiber.dom) {
    fiber.dom = createDom(fiber);
  }
  
  // 2. 协调子元素
  const elements = fiber.props.children;
  reconcileChildren(fiber, elements);
  
  // 3. 返回下一个工作单元
  // 深度优先遍历：child -> sibling -> parent.sibling
  if (fiber.child) {
    return fiber.child;
  }
  
  let nextFiber = fiber;
  while (nextFiber) {
    if (nextFiber.sibling) {
      return nextFiber.sibling;
    }
    nextFiber = nextFiber.return;
  }
  
  return null;
}

3.3 实现协调算法

协调算法是 React 性能优化的关键：

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,
        dom: oldFiber.dom,
        return: wipFiber,
        alternate: oldFiber,
        effectTag: 'UPDATE',
      };
    }
    
    if (element && !sameType) {
      // 类型不同，创建新节点
      newFiber = {
        type: element.type,
        props: element.props,
        dom: null,
        return: wipFiber,
        alternate: null,
        effectTag: 'PLACEMENT',
      };
    }
    
    if (oldFiber && !sameType) {
      // 删除旧节点
      oldFiber.effectTag = 'DELETION';
      deletions.push(oldFiber);
    }
    
    if (oldFiber) {
      oldFiber = oldFiber.sibling;
    }
    
    if (index === 0) {
      wipFiber.child = newFiber;
    } else if (element) {
      prevSibling.sibling = newFiber;
    }
    
    prevSibling = newFiber;
    index++;
  }
}

3.4 提交阶段

协调阶段完成后，进入提交阶段，将变更应用到真实 DOM：

function commitRoot() {
  deletions.forEach(commitWork);
  commitWork(wipRoot.child);
  currentRoot = wipRoot;
  wipRoot = null;
}

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

function commitDeletion(fiber, domParent) {
  if (fiber.dom) {
    domParent.removeChild(fiber.dom);
  } else {
    commitDeletion(fiber.child, domParent);
  }
}

3.5 实现简单的组件系统

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

// 判断是否是函数组件
function isFunctionComponent(fiber) {
  return fiber.type && fiber.type instanceof Function;
}

// 更新 performUnitOfWork 以支持函数组件
function performUnitOfWork(fiber) {
  if (isFunctionComponent(fiber)) {