从零实现 React v18 的核心功能,特点如下:
- 👬 与 React 源码最接近的实现
- 💪 功能完备,当前可跑通官方测试用例数量:34
- 🚶 按
Git Tag
划分迭代步骤,记录从 0 实现的每个功能
类型 | 内容 | 完成情况 | 在哪个版本实现的 |
---|---|---|---|
架构 | monorepo(pnpm 实现) | ✅ | v1 |
规范 | eslint | ✅ | v1 |
规范 | prettier | ✅ | v1 |
规范 | commitlint + husky | ✅ | v1 |
规范 | lint-staged | ✅ | v1 |
规范 | tsc | ✅ | v1 |
测试 | jest 环境搭建 | ✅ | v4 |
规范 | tsc | ✅ | v1 |
构建 | babel 配置 | ✅ | v4 |
构建 | Dev 环境包的构建 | ✅ | v1 |
构建 | Prod 环境包的构建 | ⬜️ | |
部署 | Github Action 执行 lint 与 test | ⬜️ | |
部署 | Github Action 根据 tag 发布 npm 包 | ⬜️ |
类型 | 内容 | 完成情况 | 在哪个版本实现的 |
---|---|---|---|
React | JSX 转换 | ✅ | v1 |
React | React.isValidElement | ✅ | v4 |
ReactDOM | 浏览器环境 DOM 的插入 | ✅ | v2 |
ReactDOM | 浏览器环境 DOM 的移动 | ✅ | v7 |
ReactDOM | 浏览器环境 DOM 的属性变化 | ⬜️ | |
ReactDOM | 浏览器环境 DOM 的删除 | ✅ | v5 |
ReactDOM | ReactTestUtils | ✅ | v4 |
ReactNoop | ReactNoop Renderer | ✅ | v10 |
Reconciler | Fiber 架构 | ✅ | v1 |
Reconciler | 事件模型 | ✅ | v6 |
Reconciler | onClick 事件支持 | ✅ | v6 |
Reconciler | input 元素 onChange 事件支持 | ⬜️ | |
Reconciler | Lane 模型 | ✅ | v8 |
Reconciler | 基础 Update 机制 | ✅ | v1 |
Reconciler | 带优先级的 Update 机制 | ✅ | v8 |
Reconciler | 插入单节点的 mount 流程 | ✅ | v1 |
Reconciler | 插入多节点的 mount 流程 | ✅ | v7 |
Reconciler | 插入单节点的 reconcile 流程 | ✅ | v5 |
Reconciler | 插入多节点的 reconcile 流程 | ✅ | v7 |
Reconciler | 删除节点的 reconcile 流程 | ✅ | v5 |
Reconciler | HostText 类型支持 | ✅ | v2 |
Reconciler | HostComponent 类型支持 | ✅ | v1 |
Reconciler | HostRoot 类型支持 | ✅ | v1 |
Reconciler | FunctionComponent 类型支持 | ✅ | v3 |
React | Hooks 架构 mount 时实现 | ✅ | v3 |
React | Hooks 架构 update 时实现 | ✅ | v5 |
Reconciler | useState 实现 | ✅ | v3 |
Reconciler | useEffect 实现 | ✅ | v9 |
Reconciler | useRef 实现 | ⬜️ | |
Reconciler | Legacy 调度流程(包含 batchedUpdates) | ✅ | v8 |
Reconciler | Concurrent 调度流程 | ✅ | v11 |
Reconciler | 异常处理流程 | ⬜️ | |
Reconciler | useErrorBoundary 实现 | ⬜️ |