🔥 手把手教你实现一个迷你 React！从零开始理解 React 源码
你是否好奇过 React 内部是如何工作的？今天我们就通过手写一个简化版的 React（我们叫它 Didact），来彻底搞懂 React 的核心原理！
🎯 为什么要学习这个？
- 面试加分：理解 React 原理，面试官刮目相看
- 性能优化：知道原理才能写出高性能代码
- 技术成长：从使用者变成创造者
- 框架理解：为学习其他框架打下基础
📁 项目结构一览
react/didact/
├── demo/ # 🎮 基础实现演示
│ ├── didact.js # 💎 核心实现
│ └── index.html # 🌐 演示页面
├── babel-demo/ # 🔧 Babel 转换演示
│ ├── src/ # 📝 源码
│ └── dist/ # ⚡ 编译后代码
├── fiber/ # 🧬 Fiber 架构实现
└── readme.md # 📖 项目说明
🚀 第一步：JSX 魔法揭秘
🤔 问题：JSX 到底是什么？
当我们写 React 时，经常看到这样的代码：
const element = (
<div id="foo">
<a>bar</a>
<b />
</div>
);
等等！ 这看起来像 HTML，但浏览器能理解吗？答案是：不能！
✨ 解决方案：Babel 的魔法
JSX 需要通过 Babel 转换成普通的 JavaScript：
// 🎭 JSX 的"真面目"
const element = <div id="foo"><a>bar</a><b /></div>;
// 🔄 Babel 转换后
const element = Didact.createElement("div", {id: "foo"},
Didact.createElement("a", null, "bar"),
Didact.createElement("b", null)
);
恍然大悟：JSX 就是 createElement 函数的语法糖！
🛠️ 核心实现：createElement
// 🎨 创建虚拟 DOM 节点
function createElement(type, props, ...children) {
return {
type, // 标签类型，如 'div', 'span'
props: {
...props,
children: children.map(child =>
typeof child === "object"
? child // 已经是 VDOM 节点
: createTextElement(child) // 文本节点需要包装
)
}
}
}
// 📝 创建文本节点
function createTextElement(text) {
return {
type: "TEXT_ELEMENT",
props: {
nodeValue: text,
children: []
}
}
}
💡 关键理解：
- 虚拟 DOM 就是一个普通的 JavaScript 对象
- 它描述"要渲染什么"，而不是实际的 DOM
- 所有子节点都统一处理，文本节点用
createTextElement包装
🎨 第二步：虚拟 DOM 到真实 DOM
🤔 问题：如何将虚拟 DOM 渲染到页面？
有了虚拟 DOM 对象，还需要将其转换为真实的 DOM 节点。
🛠️ 核心实现：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);
}
🔄 工作流程：
- 根据
type创建对应的 DOM 节点 - 将
props中的属性设置到 DOM 节点上 - 递归处理所有子节点
- 将节点挂载到容器中
🧬 第三步：Fiber 架构革命
⚠️ 问题：同步渲染的致命缺陷
上面的实现虽然能工作，但存在严重问题：
- 🚫 阻塞主线程：大量 DOM 操作会让页面卡顿
- ⏸️ 无法中断：一旦开始渲染，必须全部完成
- 😤 用户体验差：用户交互会被阻塞
✨ 解决方案：Fiber 架构
React 16 引入了 Fiber 架构，将渲染工作拆分成小单元：
- ⏸️ 可中断：随时暂停和恢复
- 🎯 可优先级：高优先级任务可以插队
- 🔄 可并发：多个任务可以交替执行
🏗️ 核心概念：Fiber 节点
// 🧬 Fiber 节点结构
const fiber = {
type: 'div', // 节点类型
props: {...}, // 属性
dom: null, // 对应的真实 DOM
parent: null, // 父节点
child: null, // 第一个子节点
sibling: null, // 下一个兄弟节点
alternate: null, // 上一次渲染的 Fiber
effectTag: 'PLACEMENT' // 副作用标记
};
🔄 工作循环：可中断的渲染
let nextUnitOfWork = null; // 下一个要处理的工作单元
function workLoop(deadline) {
let shouldYield = false;
// 🏃♂️ 有工作且时间充足时继续
while (nextUnitOfWork && !shouldYield) {
nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
shouldYield = deadline.timeRemaining() < 1; // 时间不够就暂停
}
// 🔄 继续排队等待下次空闲
requestIdleCallback(workLoop);
}
// 🚀 启动工作循环
requestIdleCallback(workLoop);
⏰ 第四步：并发模式与时间切片
🎯 核心机制：requestIdleCallback
// 🕐 浏览器空闲时执行回调
requestIdleCallback((deadline) => {
console.log(deadline.timeRemaining()); // 本帧剩余时间
console.log(deadline.didTimeout); // 是否超时
});
🔍 工作原理：
- 浏览器在每帧的空闲时间调用我们的回调
timeRemaining()告诉我们还有多少时间- 时间不够就暂停，等待下次空闲
🛠️ 工作单元处理：performUnitOfWork
function performUnitOfWork(fiber) {
// 1. 🏗️ 创建 DOM 节点
if (!fiber.dom) {
fiber.dom = createDom(fiber);
}
// 2. 🔄 协调子节点（Diff 算法）
const elements = fiber.props.children;
reconcileChildren(fiber, elements);
// 3. ➡️ 返回下一个工作单元
if (fiber.child) return fiber.child;
let nextFiber = fiber;
while (nextFiber) {
if (nextFiber.sibling) return nextFiber.sibling;
nextFiber = nextFiber.parent; // 回溯到父节点
}
return null; // 所有工作完成
}
🌳 遍历顺序：深度优先，但可中断
App
├── Header
│ ├── Logo
│ └── Nav
└── Main
├── Sidebar
└── Content
遍历顺序：App → Header → Logo → Nav → Main → Sidebar → Content
🎮 完整示例：让我们跑起来！
<!DOCTYPE html>
<html>
<head>
<title>🎉 Didact Demo</title>
</head>
<body>
<div id="root"></div>
<script>
// 🎯 完整的 Didact 实现
const Didact = {
createElement,
render
};
// 🎨 JSX 代码
const element = (
<div id="foo">
<a>bar</a>
<b />
</div>
);
// 🚀 渲染到页面
Didact.render(element, document.getElementById('root'));
</script>
</body>
</html>
🎯 总结与思考
通过这个迷你 React 实现，我们学到了：
🧠 核心概念
- 虚拟 DOM：用 JavaScript 对象描述 UI 结构
- JSX 转换：Babel 将 JSX 转为函数调用
- Fiber 架构：可中断、可优先级的渲染机制
- 时间切片：利用浏览器空闲时间进行渲染
💡 设计思想
- 📝 声明式：描述"要什么"，而不是"怎么做"
- 🧩 组件化：UI 拆分成可复用的组件
- 🎭 虚拟化：通过虚拟 DOM 减少真实 DOM 操作
- ⚡ 并发化：让渲染不阻塞用户交互
🚀 实际意义
理解这些原理有助于：
- 写出更高效的 React 代码
- 理解 React 的性能优化策略
- 掌握现代前端框架的设计思想
- 为学习其他框架打下基础
🎓 下一步学习建议
- 🔧 完善 Diff 算法：实现更智能的节点对比
- 🎣 添加 Hooks 支持：让函数组件更强大
- 🎪 实现事件系统：处理用户交互
- 📊 学习 React 18：了解最新的并发特性
🎉 恭喜你！ 通过这个项目，你已经掌握了 React 的核心原理。继续深入，你就能成为真正的 React 专家！
💬 互动时间：你在学习过程中遇到了什么问题？或者想了解 React 的哪个方面？欢迎在评论区讨论！
如果这篇文章对你有帮助，别忘了点赞和分享哦！ ⭐
