https://github.com/eonova/mini-react
Implement a simplified version of React —— 实现一个简化版React🦄
https://github.com/eonova/mini-react
mini practice react vitest
Last synced: 2 months ago
JSON representation
Implement a simplified version of React —— 实现一个简化版React🦄
- Host: GitHub
- URL: https://github.com/eonova/mini-react
- Owner: eonova
- License: mit
- Created: 2024-03-21T12:54:46.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-10T10:58:19.000Z (about 2 years ago)
- Last Synced: 2025-05-18T16:08:29.757Z (about 1 year ago)
- Topics: mini, practice, react, vitest
- Language: JavaScript
- Homepage: https://mini-react.leostar.top
- Size: 63.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mini-react
实现最简的React
## Tasks State
### day 1 实现最简 mini-react
- [x] 实现一个最简单的react
- [x] jsx
### day 2 任务调度器 & fiber架构
- [x] 实现任务调度器
- [x] 实现fiber架构
### day 3 统一提交 & 实现 function component
- [x] 实现统一提交
- [x] 实现function component
### day 4 进军 vdom 的更新
- [x] 实现事件绑定
- [x] 实现更新Props
### day 5 击杀 update children
- [x] diff-更新children
- [x] diff-删除多余的老节点
- [x] 解决edge case的方式
- [x] 优化更新-减少不必要的计算
### day 6 搞定 useState
- [x] 实现 useState
- [x] 批量执行 action
- [x] 提前检测 减少不必要更新
### day 7 搞定 useEffect
- [x] 实现 useEffect
- [x] 实现 cleanup
## day 8 实现 todo-list
- [x] 实现 todo-list
## Directory structure
```text
├── .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配置文件
```