Big-React
从零实现 React v18 🎉🎉🎉
没什么比自己亲手造个React18更能加深理解的了
TODO List
工程类需求
| 类型 | 内容 | 完成情况 | 在哪个版本实现的 |
|---|---|---|---|
| 架构 | monorepo（pnpm 实现） | ✅ | v1 |
| 规范 | eslint | ✅ | v1 |
| 规范 | prettier | ✅ | v1 |
| 规范 | commitlint + husky | ✅ | v1 |
| 规范 | lint-staged | ✅ | v1 |
| 规范 | tsc | ✅ | v1 |
| 测试 | jest 环境搭建 | ⬜️ | |
| 规范 | tsc | ✅ | v1 |
| 构建 | babel 配置 | ⬜️ | |
| 构建 | Dev 环境包的构建 | ✅ | v1 |
| 构建 | Prod 环境包的构建 | ⬜️ | |
| 部署 | Github Action 执行 lint 与 test | ⬜️ | |
| 部署 | Github Action 根据 tag 发布 npm 包 | ⬜️ |
框架需求
| 类型 | 内容 | 完成情况 | 在哪个版本实现的 |
|---|---|---|---|
| React | JSX 转换 | ✅ | v1 |
| ReactDOM | 浏览器环境 DOM 的插入 | ✅ | v2 |
| ReactDOM | 浏览器环境 DOM 的移动 | ⬜️ | |
| ReactDOM | 浏览器环境 DOM 的属性变化 | ⬜️ | |
| ReactDOM | 浏览器环境 DOM 的删除 | ⬜️ | |
| ReactNoop | ReactNoop Renderer | ⬜️ | |
| Reconciler | Fiber 架构 | ✅ | v1 |
| Reconciler | 事件模型 | ⬜️ | |
| Reconciler | Lane 模型 | ⬜️ | |
| Reconciler | 基础 Update 机制 | ✅ | v1 |
| Reconciler | 带优先级的 Update 机制 | ⬜️ | |
| Reconciler | 插入单节点的 reconcile 流程 | ✅ | v1 |
| Reconciler | 插入多节点的 reconcile 流程 | ⬜️ | |
| Reconciler | 删除节点的 reconcile 流程 | ⬜️ | |
| Reconciler | HostText 类型支持 | ✅ | v2 |
| Reconciler | HostComponent 类型支持 | ✅ | v1 |
| Reconciler | HostRoot 类型支持 | ✅ | v1 |
| Reconciler | FunctionComponent 类型支持 | ⬜️ | |
| Reconciler | 同步调度流程 | ⬜️ | |
| Reconciler | 异步调度流程 | ⬜️ |
调试
主要调试方式包括两个：
- 跑用例
跑React官方的测试用例（还未实现，需要先实现ReactNoop渲染器）
- pnpm link
通过CRA或Vite起一个React测试项目后，在本项目执行pnpm run build:dev打包react与react-dom，在测试项目中通过pnpm link将项目依赖的react与react-dom替换为我们打包的react与react-dom
更新日志
v2
插入单节点的 mount 流程（可以在浏览器环境渲染 DOM），包括如下功能：
- 浏览器环境 DOM 的插入
- HostText 类型支持
v1
插入单节点的 render 阶段 mount 流程，包括如下功能：
- JSX 转换
- Fiber 架构
- 插入单节点的 reconcile 流程
- HostComponent 类型支持
- HostRoot 类型支持
注：还未实现浏览器环境下的渲染