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