FakeReact - 轻量级 React 克隆实现

简体中文 | English

这个项目是一个 React 核心功能的简单克隆。通过构建自己的虚拟 DOM、Fiber 架构和 Hooks API，深入理解 React 的底层工作原理。

功能特点

• 💡 自定义虚拟 DOM 实现
• 🔄 Fiber 架构实现，支持工作中断和恢复
• ⚛️ 支持函数组件和类组件
• 🎣 实现核心 Hook API (useState, useEffect)
• 🧩 包含多个示例组件展示核心功能

项目演示

访问 在线演示 查看本项目的实际运行效果。

实现的核心功能

• 虚拟 DOM: 使用 JavaScript 对象表示 DOM 树结构
• 协调算法: 比较新旧虚拟 DOM 树并生成最小的 DOM 操作
• Fiber 架构: 支持增量渲染和任务优先级
• 组件: 支持函数组件和类组件
• Hooks API: 实现 React 的核心 Hook 功能

示例组件

• 🎮 TicTacToe 游戏: 展示状态管理和条件渲染
• 📝 Todo 列表: 展示列表渲染和状态更新
• 🎵 音乐播放器: 展示 useEffect 的应用
• 🧭 导航栏: 展示基本的组件布局

技术栈

• TypeScript
• Vite (构建工具)

本地开发

克隆项目并安装依赖:

git clone https://github.com/ltlylfun/react-clone.git
cd react-clone
npm install

启动开发服务器:

npm run dev

构建项目:

npm run build

许可

MIT