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

前言

在现代前端开发中，React 已经成为了最流行的 UI 库之一。然而，许多开发者只是停留在使用层面，对其底层原理知之甚少。今天，我们将从零开始实现一个简易版的 React，重点解析其核心的 Fiber 架构和协调算法。通过这个实践过程，你不仅能深入理解 React 的工作原理，还能掌握如何构建自己的虚拟 DOM 系统。

一、React 核心概念解析

1.1 虚拟 DOM 的本质

虚拟 DOM 并不是什么神秘的黑科技，它本质上是一个 JavaScript 对象，用来描述真实的 DOM 结构。让我们先看看虚拟 DOM 的基本结构：

// 一个简单的虚拟 DOM 对象
const vNode = {
  type: 'div',
  props: {
    className: 'container',
    children: [
      {
        type: 'h1',
        props: {
          children: 'Hello, World!'
        }
      },
      {
        type: 'p',
        props: {
          children: 'This is a virtual DOM example'
        }
      }
    ]
  }
};

1.2 Fiber 架构的诞生背景

在 React 16 之前，React 使用的是 Stack Reconciler（栈协调器）。这种架构有一个致命缺陷：一旦开始渲染，就无法中断。如果组件树很大，就会阻塞主线程，导致页面卡顿。

Fiber 架构的引入就是为了解决这个问题。它把渲染工作拆分成多个小任务，可以随时中断和恢复，从而实现了并发渲染。

二、实现简易版 React 核心

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

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);
}

三、深入 Fiber 架构实现

3.1 Fiber 节点的数据结构

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

class FiberNode {
  constructor(type, props) {
    // 节点标识
    this.type = type;
    this.props = props;
    this.key = props.key;
    
    // 节点关系
    this.parent = null;
    this.child = null;
    this.sibling = null;
    this.alternate = null; // 用于连接新旧 Fiber 树
    
    // 渲染相关
    this.stateNode = null; // 对应的真实 DOM 节点
    this.effectTag = null; // 标记需要执行的操作
    this.firstEffect = null;
    this.lastEffect = null;
    
    // 状态
    this.pendingProps = props;
    this.memoizedProps = null;
    this.memoizedState = null;
    this.updateQueue = null;
    
    // 类型标识
    this.tag = typeof type === 'function' 
      ? (type.prototype && type.prototype.isReactComponent 
        ? 'ClassComponent' 
        : 'FunctionComponent')
      : 'HostComponent';
  }
}

3.2 实现 Fiber 调度器

调度器是 Fiber 架构的核心，它负责任务的调度和执行：

class Scheduler {
  constructor() {
    this.nextUnitOfWork = null;
    this.pendingCommit = null;
    this.currentRoot = null;
    this.wipRoot = null;
    this.deletions = [];
    
    // 使用 requestIdleCallback 进行任务调度
    this.deadline = null;
  }

  // 开始调度
  scheduleWork(fiber) {
    this.wipRoot = {
      ...fiber,
      alternate: this.currentRoot
    };
    this.deletions = [];
    this.nextUnitOfWork = this.wipRoot;
    
    requestIdleCallback(this.workLoop.bind(this));
  }

  // 工作循环
  workLoop(deadline) {
    this.deadline = deadline;
    
    while (this.nextUnitOfWork && this.deadline.timeRemaining() > 1) {
      this.nextUnitOfWork = this.performUnitOfWork(this.nextUnitOfWork);
    }
    
    if (!this.nextUnitOfWork && this.wipRoot) {
      this.commitRoot();
    }
    
    if (this.nextUnitOfWork) {
      requestIdleCallback(this.workLoop.bind(this));
    }
  }

  // 执行单个工作单元
  performUnitOfWork(fiber) {
    // 开始处理当前 Fiber
    this.beginWork(fiber);
    
    // 如果有子节点，返回子节点作为下一个工作单元
    if (fiber.child) {
      return fiber.child;
    }
    
    let nextFiber = fiber;
    while (nextFiber) {
      // 完成当前节点
      this.completeWork(nextFiber);
      
      // 如果有兄弟节点，返回兄弟节点
      if (nextFiber.sibling) {
        return nextFiber.sibling;
      }
      
      // 否则返回父节点
      nextFiber = nextFiber.parent;
    }
    
    return null;
  }
}

3.3 协调算法（Diffing Algorithm）

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

四、实现组件系统

4.1 函数组件支持

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

function updateFunctionComponent(fiber) {
  // 执行函数组件，获取子元素
  const children = [fiber.type(fiber.props)];
  reconcileChildren(fiber, children);
}

function updateHostComponent(fiber) {
  // 创建或更新 DOM 节点
  if (!fiber.stateNode) {
    fiber.stateNode = createDOM(fiber);
  }
  
  // 协调子元素
  const elements = fiber.props.children;
  reconcileChildren(fiber, elements);
}

function createDOM(fiber) {
  const dom =
    fiber.type === 'TEXT_ELEMENT'
      ? document.createTextNode('')
      : document.createElement(fiber.type);
  
  updateDOM(dom, {}, fiber.props);
  
  return dom;
}

function updateDOM(dom, prevProps, nextProps) {
  // 处理属性更新
  Object.keys(prevProps)
    .filter(isEvent)
    .filter(key => !(key in nextProps) || isNew(prevProps, nextProps)(key))
    .forEach(name => {
      const eventType = name.toLowerCase().substring(2);
      dom.removeEventListener(eventType, prevProps[name]);
    });
  
  Object