手写React：从零构建一个迷你版Dideact

FogLetter
49 阅读6分钟

本文将通过一步步实现一个迷你React——"Dideact"，带你深入理解React的核心原理，包括VDOM、Fiber架构和并发模式。

前言：为什么要造轮子？

作为前端开发者，我们每天都在使用React，但你真的了解它的内部机制吗？通过亲手实现一个简化版React，我们能够：

  • 深入理解React的核心概念
  • 掌握VDOM和Diff算法的工作原理
  • 理解Fiber架构和并发模式的精妙设计
  • 在面试中脱颖而出（这可是个很好的谈资！）

让我们开始这个有趣的旅程吧！

第一章：搭建基础架构

1.1 命名空间设计

首先，我们需要一个命名空间来组织我们的代码：

// 命名空间 - 我们的迷你React
const Dideact = {
  createElement, // 生成VDOM
  render // 渲染到真实DOM
}

为什么用命名空间？这让我们可以像React一样使用Dideact.createElement这样的调用方式，保持API的一致性。

1.2 Babel配置：JSX的魔法解密

JSX并不是React的专属，实际上它可以通过Babel转换成任何我们想要的函数调用。配置.babelrc：

{
  "presets": [
    [
      "@babel/preset-react", {
        "pragma": "Dideact.createElement",
        "pragmaFrag": "Dideact.Fragment"
      }
    ]
  ]
}

这个配置告诉Babel："嘿，把JSX转换成Dideact.createElement调用，而不是React.createElement！"

那么这段JSX：

const element = (
  <div id="foo">
    <a>bar</a>
    <b/>
  </div>
);

会被转换成：

const element = Dideact.createElement(
  "div", 
  { id: "foo" },
  Dideact.createElement("a", null, "bar"),
  Dideact.createElement("b", null)
);

看，魔法消失了！JSX只是语法糖而已。

第二章：虚拟DOM（VDOM）的实现

2.1 什么是虚拟DOM？

虚拟DOM是一个描述真实DOM的JavaScript对象树。它轻量、快速，让我们可以在内存中先构建完整的UI描述，再高效地更新到页面上。

2.2 createElement的实现

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

这个函数的核心思想是递归：每个节点都可能有子节点，子节点又可能有自己的子节点，最终形成一棵完整的VDOM树。

让我们看看它生成的VDOM结构：

// 生成的VDOM对象
{
  type: "div",
  props: {
    id: "foo",
    children: [
      {
        type: "a",
        props: {
          children: [
            {
              type: "TEXT_ELEMENT",
              props: {
                nodeValue: "bar",
                children: []
              }
            }
          ]
        }
      },
      {
        type: "b",
        props: {
          children: []
        }
      }
    ]
  }
}

2.3 文本节点的特殊处理

为什么文本节点需要特殊处理？因为文本节点在DOM中是特殊的——它们没有标签名，只有文本内容。

function createTextElement(text) {
  return {
    type: 'TEXT_ELEMENT',
    props: {
      nodeValue: text,
      children: [] // 文本节点没有子节点
    }
  }
}

这样设计的好处是统一性：无论是元素节点还是文本节点，都有相同的结构，便于后续处理。

第三章：渲染机制

3.1 render函数的第一版实现

function render(element, container) {
  // 创建DOM节点
  const dom = element.type === 'TEXT_ELEMENT'
    ? document.createTextNode('')
    : document.createElement(element.type);

  // 设置属性（过滤掉children）
  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);
}

这个版本虽然能工作，但有个严重问题：递归渲染是不可中断的！

3.2 问题所在：阻塞主线程

想象一下：如果我们的VDOM树很大，递归渲染过程会长时间占用JavaScript主线程，导致：

  • 用户交互无法及时响应
  • 动画卡顿
  • 页面假死

这就是React 16之前版本存在的问题。那么React团队是如何解决的呢？

第四章：Fiber架构与并发模式

4.1 什么是Fiber？

Fiber是React 16引入的全新架构，核心思想是：将渲染工作拆分成小单元，允许中断和恢复。

每个Fiber节点包含：

{
  type: 'div',           // 节点类型
  props: {...},          // 属性
  child: FiberNode,      // 第一个子节点
  sibling: FiberNode,    // 下一个兄弟节点
  return: FiberNode,     // 父节点
  dom: HTMLElement,      // 对应的真实DOM
  // ... 其他状态信息
}

Fiber节点之间不是简单的树形结构，而是通过child、sibling、return指针连接的链表结构。

4.2 实现工作循环

let nextUnitOfWork = null; // 下一个要处理的工作单元

// 工作循环 - 核心调度机制
function workLoop(deadline) {
  let shouldYield = false; // 是否需要让出控制权
  
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    // 检查剩余时间，如果不足1ms就中断
    shouldYield = deadline.timeRemaining() < 1;
  }
  
  // 下次空闲时继续执行
  requestIdleCallback(workLoop);
}

// 启动调度器
requestIdleCallback(workLoop);

4.3 执行工作单元

function performUnitOfWork(fiber) {
  // 1. 创建DOM节点并挂载
  if (!fiber.dom) {
    fiber.dom = createDom(fiber);
  }
  
  if (fiber.return) {
    fiber.return.dom.appendChild(fiber.dom);
  }
  
  // 2. 为子元素创建Fiber节点
  const elements = fiber.props.children;
  let index = 0;
  let prevSibling = null;
  
  while (index < elements.length) {
    const element = elements[index];
    
    const newFiber = {
      type: element.type,
      props: element.props,
      return: fiber,
      dom: null,
    };
    
    if (index === 0) {
      fiber.child = newFiber; // 第一个子节点
    } else {
      prevSibling.sibling = newFiber; // 兄弟节点
    }
    
    prevSibling = newFiber;
    index++;
  }
  
  // 3. 返回下一个要处理的工作单元
  if (fiber.child) {
    return fiber.child; // 优先处理子节点
  }
  
  let nextFiber = fiber;
  while (nextFiber) {
    if (nextFiber.sibling) {
      return nextFiber.sibling; // 然后处理兄弟节点
    }
    nextFiber = nextFiber.return; // 最后回溯到父节点
  }
}

4.4 深度优先遍历的巧妙之处

Fiber的遍历顺序体现了深度优先的策略：

  1. 优先处理子节点（向下深入）
  2. 然后处理兄弟节点（向右移动）
  3. 最后回溯到父节点（向上返回）

这种遍历方式确保了我们能够高效地处理整个组件树。

第五章：完整的Dideact实现

让我们把所有的代码整合起来：

// dideact.js

const Dideact = {
  createElement,
  render
}

// 1. 创建VDOM
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. Fiber相关变量
let nextUnitOfWork = null
let wipRoot = null

// 3. 渲染入口
function render(element, container) {
  wipRoot = {
    dom: container,
    props: {
      children: [element]
    }
  }
  nextUnitOfWork = wipRoot
}

// 4. 创建DOM节点
function createDom(fiber) {
  const dom =
    fiber.type == "TEXT_ELEMENT"
      ? document.createTextNode("")
      : document.createElement(fiber.type)

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

// 5. 工作循环
function workLoop(deadline) {
  let shouldYield = false
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
    shouldYield = deadline.timeRemaining() < 1
  }

  if (!nextUnitOfWork && wipRoot) {
    commitRoot()
  }

  requestIdleCallback(workLoop)
}

requestIdleCallback(workLoop)

// 6. 执行工作单元
function performUnitOfWork(fiber) {
  if (!fiber.dom) {
    fiber.dom = createDom(fiber)
  }

  const elements = fiber.props.children
  reconcileChildren(fiber, elements)

  if (fiber.child) {
    return fiber.child
  }
  let nextFiber = fiber
  while (nextFiber) {
    if (nextFiber.sibling) {
      return nextFiber.sibling
    }
    nextFiber = nextFiber.return
  }
}

// 7. 协调子节点
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

    // TODO: 比较oldFiber和element
    if (element && oldFiber) {
      // 更新
    } else if (element && !oldFiber) {
      // 新增
      newFiber = {
        type: element.type,
        props: element.props,
        return: wipFiber,
        dom: null,
      }
    } else if (oldFiber && !element) {
      // 删除
    }

    if (oldFiber) {
      oldFiber = oldFiber.sibling
    }

    if (index === 0) {
      wipFiber.child = newFiber
    } else if (element) {
      prevSibling.sibling = newFiber
    }

    prevSibling = newFiber
    index++
  }
}

// 8. 提交到DOM
function commitRoot() {
  // TODO: 执行DOM更新
  wipRoot = null
}

第六章：从Dideact理解React的设计哲学

通过实现Dideact，我们可以深刻理解React的几个核心设计思想：

6.1 声明式编程

我们只需要描述"UI应该是什么样子"，而不需要关心"如何一步步更新UI"：

// 声明式 - 我们关心的
const UI = <div>Hello {name}</div>;

// 对比命令式 - 我们不关心的
const div = document.createElement('div');
div.textContent = `Hello ${name}`;
container.appendChild(div);

6.2 可中断渲染

Fiber架构让React能够在浏览器空闲时工作，确保用户交互始终优先：

function workLoop(deadline) {
  while (nextUnitOfWork && deadline.timeRemaining() > 1) {
    // 还有时间就继续工作
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  }
  // 时间不够了就下次再说
  requestIdleCallback(workLoop);
}

6.3 统一处理

无论是组件、元素还是文本节点，都采用统一的数据结构，简化了处理逻辑。

结语

通过这个简单的Dideact实现，我们深入理解了：

  1. JSX的本质：只是函数调用的语法糖
  2. VDOM的作用：内存中的UI描述，用于计算最小更新
  3. Fiber架构：实现可中断渲染的关键
  4. 并发模式：保证应用响应性的核心机制

虽然我们的Dideact还缺少很多功能（如Diff算法、组件支持、Hooks等），但已经抓住了React最核心的思想。

真正的React代码库要复杂得多，处理了边界情况、性能优化、跨平台支持等。但理解这些基础概念，能够让我们更好地使用React，并在遇到问题时知道从何处着手调试。

希望这个实现过程对你有所启发！如果想继续完善，可以考虑实现Diff算法、函数组件、Hooks等特性。编程的乐趣就在于不断探索和创造，Happy Coding！

avatar
文章
阅读
粉丝