Hacker News 中文摘要

RSS订阅

构建你自己的React -- Build Your Own React

原文链接 | HN讨论 | 2025-12-20 18:01:40

文章摘要

这篇文章教你如何从零开始逐步构建一个简化版的React框架，基于React 16.8版本，包含hooks功能。作者会带读者一步步实现createElement、render、并发模式、Fiber架构等核心功能，最终完成一个具备函数组件和hooks的React实现。

文章总结

从零开始构建你自己的React

作者：Rodrigo Pombo
发布日期：2019年11月13日

概述

本文将逐步指导你从头开始重写React。我们将遵循真实React代码的架构，但省略所有优化和非核心功能。与作者之前的"构建你自己的React"系列不同，本文基于React 16.8版本，因此可以使用hooks并完全摒弃类组件相关代码。

构建步骤

我们将分八个步骤实现自己的React版本：

  1. createElement函数：处理JSX转换
  2. render函数：实现基础渲染
  3. 并发模式：使用requestIdleCallback分块处理任务
  4. Fibers架构：构建工作单元链表
  5. 渲染和提交阶段：分离渲染与DOM更新
  6. 协调算法：实现差异比较
  7. 函数组件：支持函数式组件
  8. Hooks：实现useState功能

核心概念解析

JSX转换原理

JSX会被Babel等工具转换为createElement调用。例如： jsx const element = <h1 title="foo">Hello</h1> 转换为： javascript const element = React.createElement("h1", {title: "foo"}, "Hello")

Fiber架构

React使用Fiber树来组织工作单元，每个Fiber节点包含： - 指向第一个子节点的child指针 - 指向下一个兄弟节点的sibling指针 - 指向父节点的parent指针

这种结构使得可以方便地找到下一个工作单元，实现可中断的渲染过程。

协调算法

React通过比较新旧Fiber树来确定需要进行的DOM操作： 1. 类型相同：更新DOM属性 2. 类型不同且有新元素：创建新DOM节点 3. 类型不同且有旧Fiber：删除旧节点

Hooks实现

useState的实现要点： 1. 在函数组件执行前设置当前工作Fiber 2. 使用hooks数组存储状态 3. 通过action队列处理状态更新 4. 在下一次渲染时应用所有排队action

完整实现

最终的实现包含： - 支持JSX转换的createElement - 基于Fiber的渲染系统 - 完整的协调算法 - 函数组件支持 - 基础useState Hook

与真实React的区别

  1. 缺少子树跳过优化
  2. 提交阶段遍历整个树而非仅有效Fiber
  3. 每次渲染都创建新Fiber对象
  4. 不支持优先级调度
  5. 缺少key优化等特性

扩展建议

读者可以尝试实现： - 样式对象支持 - 扁平化子数组 - useEffect Hook - 基于key的协调

作者鼓励读者在GitHub仓库提交自己的实现改进。

查看完整代码 | 在线示例

评论总结

总结：

正面评价： 1. 对网站和故事呈现方式的赞赏 - "Amazing website and presentation of the story. Love it!"（"精彩的网站和故事呈现方式。太喜欢了！"） - "That is a fantastic presentation."（"这是一个非常棒的呈现方式。"）

  1. 欣赏互动性和创新性
    • "this one is interactive. Really great job!"（"这个版本是互动的。做得很棒！"）
    • "reminds me of the annotated source/site that backbonejs used to have"（"让我想起backbonejs曾经有的注释源代码/网站"）

所有评论都给出了高度积极的反馈，特别称赞了网站的呈现方式、互动性和创新性设计。