mini-react

实现最简的React

Tasks State

day 1 实现最简 mini-react

• 实现一个最简单的react
• jsx

day 2 任务调度器 & fiber架构

• 实现任务调度器
• 实现fiber架构

day 3 统一提交 & 实现 function component

• 实现统一提交
• 实现function component

day 4 进军 vdom 的更新

• 实现事件绑定
• 实现更新Props

day 5 击杀 update children

• diff-更新children
• diff-删除多余的老节点
• 解决edge case的方式
• 优化更新-减少不必要的计算

day 6 搞定 useState

• 实现 useState
• 批量执行 action
• 提前检测 减少不必要更新

day 7 搞定 useEffect

• 实现 useEffect
• 实现 cleanup

day 8 实现 todo-list

• 实现 todo-list

Directory structure

├── .vscode               // vscode配置
├── packages              // mini-react
│   ├── react
│   └── react-dom
├── playground            // 测试项目
│   ├── public
│   ├── src
│   ├── index.html
│   └── package.json
├── .editorconfig         // IDE配置文件
├── .gitignore            // git忽略文件
├── LICENSE              // 许可证
├── README.md             // 项目说明文件
├── packages.json         // 项目配置文件
├── pnpm-lock.yaml        // pnpm依赖文件
└── pnpm-workspace.yaml   // pnpm monorepo配置文件