Big-React
跟着我，从0实现React18
浏览量
854
点击收藏
0
Big-React
从零实现 React v18 的核心功能，特点如下：
- 👬 与 React 源码最接近的实现
- 💪 功能完备，当前可跑通官方测试用例数量：34
- 🚶 按
Git Tag划分迭代步骤，记录从 0 实现的每个功能
如果想加入项目对应的 源码交流群，和 7000+小伙伴们一起交流 React，可以加我微信，备注「开发」：
TODO List
工程类需求
| 类型 | 内容 | 完成情况 | 在哪个版本实现的 |
|---|---|---|---|
| 架构 | 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 实现 | ⬜️ |
调试
提供 3 种调试方式：
- 实时调试
执行 pnpm demo会运行项目 demos目录下的示例项目（默认项目是针对v9的调试项目）
这种方式的好处是：
- 控制台会打印各个主要步骤的执行信息，可以直观看到执行流程
- 热更新（包括示例代码和源码代码）
- pnpm link
通过 CRA或 Vite起一个 React测试项目后，在本项目执行 pnpm run build:dev打包 react与 react-dom，在测试项目中通过 pnpm link将项目依赖的 react与 react-dom替换为我们打包的 react与 react-dom
这种方式的好处是：最贴合项目中实际使用 React的情况
- 跑
React官方的测试用例
执行 pnpm test跑官方的测试用例，用例中引用的是执行 pnpm run build:dev打包的 react与 react-dom
这种方式的好处是：可以从官方用例的角度观察框架实现的细节、各种边界情