Mini React Vibe 项目

Mini React 是一个仅用单个文件实现的轻量级 React 类 UI 库，完整支持虚拟 DOM、键差异对比（keyed diffing）、函数组件、Hooks、Context 和 Memo，压缩后仅约 3.5 KB，完全零依赖。源码约 700 行且逐行注释，是学习 React 内部工作原理的理想教材。

项目简介

Mini React 由开发者 Vladocar 创建，旨在用最少的代码实现 React 的核心功能，让读者能够通过阅读源码彻底理解虚拟 DOM、Diff 算法和 Hooks 的实现机制。项目在线提供多个互动演示、15 节课的入门教程，以及与 React 18 的性能基准对比。

核心功能

1. 虚拟 DOM 与 keyed diffing — 实现完整的虚拟 DOM 机制，组件变化时通过 key 精准匹配新旧节点，实现高效的局部更新。

2. 完整的 Hooks 支持 — 提供 useState、useEffect、useReducer、useRef、useMemo、useCallback、useContext 和 memo，几乎覆盖 React 主流 Hooks 场景。

3. Context API — 使用 createContext 和 useContext 实现跨层级数据传递，无需通过 props 层层透传。

4. 零依赖单文件 — 所有功能浓缩在一个约 700 行的源文件中，无任何第三方依赖，便于嵌入和定制。

技术实现

Mini React 的源码采用原生 JavaScript 编写，核心结构围绕 h() 虚拟 DOM 创建函数、createRoot() 渲染入口和 render() 方法展开。

虚拟 DOM 创建：h() 函数接收类型、属性对象和子节点数组，返回描述 DOM 结构的普通 JavaScript 对象，模拟 React.createElement 的逻辑。

渲染与挂载：createRoot() 接收一个真实 DOM 容器，返回包含 render() 和 unmount() 方法的对象，render() 接收虚拟 DOM 树并通过对比算法将变化高效地同步到真实 DOM。

状态与副作用：useState() 通过闭包存储状态，每次状态变更触发一次重新渲染；useEffect() 在 DOM 更新后执行副作用函数，支持依赖数组和清理函数；useMemo() 和 useCallback() 通过缓存避免不必要的重复计算和函数创建。

Diff 算法：组件更新时，Mini React 会对新旧虚拟 DOM 树进行深度优先比较，通过 key 精准定位需要更新的节点，将变化批量写入真实 DOM，兼顾正确性和性能。

整个项目不使用任何构建工具即可在浏览器中直接运行，也支持通过 esbuild 或 Vite 等工具与 JSX 配合使用。

快速上手

1. 浏览器直接使用：下载 dist/mini-react.min.js 到项目目录，通过 script 标签引入，即可使用 h、createRoot 和 useState 等 API。

2. CDN 引入：在 HTML 中直接引入 jsDelivr CDN 上的脚本，一行代码即可开始使用，无需 npm 安装。

3. npm 安装：运行 npm install github:vladocar/mini-react 将项目安装为本地依赖，配合打包工具使用 JSX 语法。

4. 学习调试：项目提供 15 节互动教程，每节课都有可直接在页面内修改和运行的示例，从创建第一个元素到构建完整应用循序渐进。

适用人群

前端开发者，特别是希望深入理解 React 内部原理的工程师；想学习虚拟 DOM 和 Hooks 实现机制的 JavaScript 学习者；需要在轻量级场景中使用 React 语法但不希望引入完整 React 依赖的开发者。