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

前言

在现代前端开发中，React 已经成为了最流行的 UI 库之一。然而，许多开发者只是停留在使用层面，对其底层原理了解不深。今天，我们将通过实现一个简易版的 React，深入探讨其核心机制——Fiber 架构和协调算法。这不仅有助于我们更好地理解 React 的工作原理，还能提升我们解决复杂 UI 问题的能力。

一、React 核心架构演进

1.1 Stack Reconciler 的局限性

在 React 16 之前，React 使用的是 Stack Reconciler（栈协调器）。这个协调器使用递归的方式遍历组件树，存在一个致命缺陷：一旦开始渲染，就无法中断。对于大型应用，这可能导致主线程被长时间占用，造成页面卡顿。

// 传统的递归渲染（简化版）
function render(element, container) {
  // 递归处理所有子节点
  element.children.forEach(child => {
    render(child, container);
  });
}

1.2 Fiber 架构的诞生

React 16 引入了 Fiber 架构，这是一个完全重写的协调引擎。Fiber 的核心思想是将渲染工作拆分成多个小单元，每个单元都可以被中断、暂停或恢复，从而实现增量渲染。

二、实现简易版 React 核心

2.1 定义 Fiber 节点结构

首先，让我们定义 Fiber 节点的基本结构：

class FiberNode {
  constructor(type, props) {
    // 节点类型（如 'div', 'span' 或函数组件）
    this.type = type;
    
    // 节点属性
    this.props = props;
    
    // DOM 节点
    this.dom = null;
    
    // 父节点
    this.parent = null;
    
    // 子节点
    this.child = null;
    
    // 兄弟节点
    this.sibling = null;
    
    // 备用节点（用于 diff 算法）
    this.alternate = null;
    
    // 副作用标签
    this.effectTag = null;
    
    // 第一个副作用
    this.firstEffect = null;
    
    // 下一个副作用
    this.nextEffect = null;
    
    // 最后一个副作用
    this.lastEffect = null;
  }
}

2.2 实现 createElement 函数

React 的 JSX 会被转译成 React.createElement 调用，让我们实现这个函数：

function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      // 处理 children
      children: children.map(child =>
        typeof child === 'object'
          ? child
          : createTextElement(child)
      ),
    },
  };
}

function createTextElement(text) {
  return {
    type: 'TEXT_ELEMENT',
    props: {
      nodeValue: text,
      children: [],
    },
  };
}

三、Fiber 协调算法详解

3.1 双缓存技术

React 使用双缓存技术来优化渲染性能。每个 Fiber 节点都有一个 alternate 属性，指向上一次渲染的 Fiber 节点。

// 当前正在渲染的树
let wipRoot = null;
// 上一次提交的树
let currentRoot = null;
// 下一个要处理的 Fiber 节点
let nextUnitOfWork = null;
// 需要删除的节点
let deletions = null;

3.2 实现工作循环

Fiber 架构的核心是工作循环，它将渲染任务分解为可中断的小任务：

function workLoop(deadline) {
  let shouldYield = false;
  
  while (nextUnitOfWork && !shouldYield) {
    // 执行当前工作单元
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    
    // 检查是否需要让出控制权
    shouldYield = deadline.timeRemaining() < 1;
  }
  
  // 如果没有下一个工作单元且存在待提交的根节点
  if (!nextUnitOfWork && wipRoot) {
    commitRoot();
  }
  
  // 继续调度
  requestIdleCallback(workLoop);
}

// 使用浏览器空闲时间执行任务
requestIdleCallback(workLoop);

3.3 实现工作单元处理

每个工作单元处理一个 Fiber 节点：

function performUnitOfWork(fiber) {
  // 判断是否是函数组件
  const isFunctionComponent = 
    fiber.type instanceof Function;
  
  if (isFunctionComponent) {
    updateFunctionComponent(fiber);
  } else {
    updateHostComponent(fiber);
  }
  
  // 返回下一个要处理的工作单元
  if (fiber.child) {
    return fiber.child;
  }
  
  let nextFiber = fiber;
  while (nextFiber) {
    if (nextFiber.sibling) {
      return nextFiber.sibling;
    }
    nextFiber = nextFiber.parent;
  }
  
  return null;
}

3.4 处理函数组件

函数组件的处理需要执行函数获取子元素：

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

3.5 处理宿主组件（DOM 元素）

function updateHostComponent(fiber) {
  // 创建 DOM 节点（如果不存在）
  if (!fiber.dom) {
    fiber.dom = createDom(fiber);
  }
  
  // 协调子节点
  reconcileChildren(fiber, fiber.props.children);
}

3.6 实现协调算法

这是 React 最核心的部分——Diff 算法：

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;
    }
    
    // 构建 Fiber 链表
    if (index === 0) {
      wipFiber.child = newFiber;
    } else if (element) {
      prevSibling.sibling = newFiber;
    }
    
    prevSibling = newFiber;
    index++;
  }
}

四、提交阶段实现

4.1 提交根节点

当所有工作单元都处理完成后，进入提交阶段：

function commitRoot() {
  // 处理需要删除的节点
  deletions.forEach(commitWork);
  
  // 提交工作
  commitWork(wipRoot.child);
  
  // 保存当前树
  currentRoot = wipRoot;
  wipRoot = null;
  deletions = [];
}

4.2 提交工作单元

function commitWork(fiber) {
  if (!fiber) {
    return;
  }
  
  // 查找有 DOM 的父节点
  let domParentFiber = fiber.parent;
  while (!domParentFiber.dom) {
    domParentFiber = domParentFiber.parent;
  }
  const domParent = domParentFiber.dom;
  
  // 根据 effectTag 执行相应操作
  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);
}

4.3 更新 DOM 属性

function updateDom(dom,