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

前言

在当今的前端开发领域，React 无疑是最受欢迎的 UI 库之一。然而，对于许多开发者来说，React 的内部工作机制仍然像是一个"黑盒子"。本文将带你从零开始，实现一个简易版的 React，重点解析其核心的 Fiber 架构和协调算法。通过这个实践过程，你不仅能深入理解 React 的工作原理，还能掌握如何构建自己的虚拟 DOM 系统。

一、React 核心概念解析

1.1 虚拟 DOM 的本质

虚拟 DOM 并不是 React 的专利，而是一种编程概念。它本质上是一个轻量级的 JavaScript 对象，用来描述真实的 DOM 结构。让我们先来看看虚拟 DOM 的基本结构：

// 虚拟 DOM 节点的基本结构
const virtualNode = {
  type: 'div',           // 元素类型
  props: {               // 属性对象
    className: 'container',
    children: [
      {
        type: 'h1',
        props: {
          children: 'Hello, World!'
        }
      }
    ]
  }
};

1.2 Fiber 架构的革命性

React 16 引入的 Fiber 架构是一次重大的重构。与之前的 Stack Reconciler 不同，Fiber 架构将渲染工作拆分成多个可中断的小任务，这使得 React 能够：

1. 可中断渲染：在浏览器空闲时执行任务
2. 优先级调度：高优先级更新可以打断低优先级更新
3. 更好的错误处理：引入错误边界概念

二、实现简易版 React 核心

2.1 创建虚拟 DOM 创建函数

首先，让我们实现一个类似 JSX 的虚拟 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: [],
    },
  };
}

// 示例：创建虚拟 DOM
const element = createElement(
  'div',
  { id: 'app' },
  createElement('h1', null, 'Hello'),
  createElement('p', null, 'World')
);

2.2 实现首次渲染

接下来，我们实现将虚拟 DOM 渲染到真实 DOM 的功能：

// 渲染函数
function render(element, container) {
  const dom = element.type === 'TEXT_ELEMENT'
    ? document.createTextNode('')
    : document.createElement(element.type);

  // 设置属性
  const isProperty = key => key !== 'children';
  Object.keys(element.props)
    .filter(isProperty)
    .forEach(name => {
      dom[name] = element.props[name];
    });

  // 递归渲染子元素
  element.props.children.forEach(child =>
    render(child, dom)
  );

  container.appendChild(dom);
}

// 使用示例
const App = createElement(
  'div',
  { className: 'app' },
  createElement('h1', null, 'Mini React'),
  createElement('p', null, 'This is a simple implementation')
);

render(App, document.getElementById('root'));

三、深入 Fiber 架构实现

3.1 Fiber 节点的数据结构

Fiber 是 React 中的最小工作单元，让我们定义它的结构：

// Fiber 节点结构
class FiberNode {
  constructor(type, props) {
    this.type = type;           // 节点类型（组件、DOM 节点等）
    this.props = props;         // 属性
    this.dom = null;            // 对应的真实 DOM
    this.parent = null;         // 父 Fiber
    this.child = null;          // 第一个子 Fiber
    this.sibling = null;        // 兄弟 Fiber
    this.alternate = null;      // 上一次渲染的 Fiber
    this.effectTag = null;      // 副作用标记（PLACEMENT, UPDATE, DELETION）
    this.state = {};            // 状态（用于类组件）
  }
}

3.2 实现 Fiber 协调算法

协调算法（Reconciliation）是 React 的核心，它负责比较新旧虚拟 DOM 的差异：

// 全局变量
let nextUnitOfWork = null;
let wipRoot = null;      // work in progress root
let currentRoot = null;  // 当前渲染的根
let deletions = null;    // 需要删除的节点

// 开始渲染
function render(element, container) {
  wipRoot = {
    dom: container,
    props: {
      children: [element],
    },
    alternate: currentRoot,
  };
  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. 协调子元素
  reconcileChildren(fiber, fiber.props.children);

  // 3. 返回下一个工作单元
  if (fiber.child) {
    return fiber.child;
  }
  
  let nextFiber = fiber;
  while (nextFiber) {
    if (nextFiber.sibling) {
      return nextFiber.sibling;
    }
    nextFiber = nextFiber.parent;
  }
}

// 创建真实 DOM
function createDom(fiber) {
  const dom = fiber.type === 'TEXT_ELEMENT'
    ? document.createTextNode('')
    : document.createElement(fiber.type);

  updateDom(dom, {}, fiber.props);
  return dom;
}

// 协调子节点
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,
        parent: wipFiber,
        alternate: oldFiber,
        effectTag: 'UPDATE',
      };
    }
    
    if (element && !sameType) {
      // 类型不同，创建新节点
      newFiber = {
        type: element.type,
        props: element.props,
        dom: 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++;
  }
}

3.3 提交更新到 DOM

协调完成后，我们需要将变更提交到真实的 DOM：

// 提交根节点
function commitRoot() {
  deletions.forEach(commitWork);
  commitWork(wipRoot.child);
  currentRoot = wipRoot;
  wipRoot = null;
}

// 提交单个 Fiber
function commitWork(fiber) {
  if (!fiber) return;

  let domParentFiber = fiber.parent;
  while (!domParentFiber.dom) {
    domParentFiber = domParentFiber.parent;
  }
  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