Skip to content

Commit 84881b0

Browse files
BetaSuBetaSu
committed
docs: update doc
1 parent 306bcf9 commit 84881b0

File tree

1 file changed

+207
-0
lines changed

1 file changed

+207
-0
lines changed

‎README.md‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
# Big-React
2+
3+
从零实现 React v18 的核心功能，特点如下：
4+
5+
- 👬 与 React 源码最接近的实现
6+
- 💪 功能完备，当前可跑通官方测试用例数量：34
7+
- 🚶 按`Git Tag`划分迭代步骤，记录从 0 实现的每个功能
8+
9+
如果想跟着我学习「如何从 0 到 1 实现 React18」，可以[点击这里](https://qux.xet.tech/s/2wiFh1)
10+
11+
## TODO List
12+
13+
### 工程类需求
14+
15+
| 类型 | 内容 | 完成情况 | 在哪个版本实现的 |
16+
| ---- | ---------------------------------- | -------- | ------------------------------------------------- |
17+
| 架构 | monorepo（pnpm 实现） | ✅ | [v1](https://github.com/BetaSu/big-react/tree/v1) |
18+
| 规范 | eslint | ✅ | [v1](https://github.com/BetaSu/big-react/tree/v1) |
19+
| 规范 | prettier | ✅ | [v1](https://github.com/BetaSu/big-react/tree/v1) |
20+
| 规范 | commitlint + husky | ✅ | [v1](https://github.com/BetaSu/big-react/tree/v1) |
21+
| 规范 | lint-staged | ✅ | [v1](https://github.com/BetaSu/big-react/tree/v1) |
22+
| 规范 | tsc | ✅ | [v1](https://github.com/BetaSu/big-react/tree/v1) |
23+
| 测试 | jest 环境搭建 | ✅ | [v4](https://github.com/BetaSu/big-react/tree/v4) |
24+
| 规范 | tsc | ✅ | [v1](https://github.com/BetaSu/big-react/tree/v1) |
25+
| 构建 | babel 配置 | ✅ | [v4](https://github.com/BetaSu/big-react/tree/v4) |
26+
| 构建 | Dev 环境包的构建 | ✅ | [v1](https://github.com/BetaSu/big-react/tree/v1) |
27+
| 构建 | Prod 环境包的构建 | ⬜️ | |
28+
| 部署 | Github Action 执行 lint 与 test | ⬜️ | |
29+
| 部署 | Github Action 根据 tag 发布 npm 包 | ⬜️ | |
30+
31+
### 框架需求
32+
33+
| 类型 | 内容 | 完成情况 | 在哪个版本实现的 |
34+
| ---------- | -------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |
35+
| React | JSX 转换 | ✅ | [v1](https://github.com/BetaSu/big-react/tree/v1) |
36+
| React | React.isValidElement | ✅ | [v4](https://github.com/BetaSu/big-react/tree/v4) |
37+
| ReactDOM | 浏览器环境 DOM 的插入 | ✅ | [v2](https://github.com/BetaSu/big-react/tree/v2) |
38+
| ReactDOM | 浏览器环境 DOM 的移动 | ✅ | [v7](https://github.com/BetaSu/big-react/tree/v7) |
39+
| ReactDOM | 浏览器环境 DOM 的属性变化 | ⬜️ | |
40+
| ReactDOM | 浏览器环境 DOM 的删除 | ✅ | [v5](https://github.com/BetaSu/big-react/tree/v5) |
41+
| ReactDOM | ReactTestUtils | ✅ | [v4](https://github.com/BetaSu/big-react/tree/v4) |
42+
| ReactNoop | ReactNoop Renderer | ✅ | [v10](https://github.com/BetaSu/big-react/tree/v10) |
43+
| Reconciler | Fiber 架构 | ✅ | [v1](https://github.com/BetaSu/big-react/tree/v1) |
44+
| Reconciler | 事件模型 | ✅ | [v6](https://github.com/BetaSu/big-react/tree/v6) |
45+
| Reconciler | onClick 事件支持 | ✅ | [v6](https://github.com/BetaSu/big-react/tree/v6) |
46+
| Reconciler | input 元素 onChange 事件支持 | ⬜️ | |
47+
| Reconciler | Lane 模型 | ✅ | [v8](https://github.com/BetaSu/big-react/tree/v8) |
48+
| Reconciler | 基础 Update 机制 | ✅ | [v1](https://github.com/BetaSu/big-react/tree/v1) |
49+
| Reconciler | 带优先级的 Update 机制 | ✅ | [v8](https://github.com/BetaSu/big-react/tree/v8) |
50+
| Reconciler | 插入单节点的 mount 流程 | ✅ | [v1](https://github.com/BetaSu/big-react/tree/v1) |
51+
| Reconciler | 插入多节点的 mount 流程 | ✅ | [v7](https://github.com/BetaSu/big-react/tree/v7) |
52+
| Reconciler | 插入单节点的 reconcile 流程 | ✅ | [v5](https://github.com/BetaSu/big-react/tree/v5) |
53+
| Reconciler | 插入多节点的 reconcile 流程 | ✅ | [v7](https://github.com/BetaSu/big-react/tree/v7) |
54+
| Reconciler | 删除节点的 reconcile 流程 | ✅ | [v5](https://github.com/BetaSu/big-react/tree/v5) |
55+
| Reconciler | HostText 类型支持 | ✅ | [v2](https://github.com/BetaSu/big-react/tree/v2) |
56+
| Reconciler | HostComponent 类型支持 | ✅ | [v1](https://github.com/BetaSu/big-react/tree/v1) |
57+
| Reconciler | HostRoot 类型支持 | ✅ | [v1](https://github.com/BetaSu/big-react/tree/v1) |
58+
| Reconciler | FunctionComponent 类型支持 | ✅ | [v3](https://github.com/BetaSu/big-react/tree/v3) |
59+
| React | Hooks 架构 mount 时实现 | ✅ | [v3](https://github.com/BetaSu/big-react/tree/v3) |
60+
| React | Hooks 架构 update 时实现 | ✅ | [v5](https://github.com/BetaSu/big-react/tree/v5) |
61+
| Reconciler | useState 实现 | ✅ | [v3](https://github.com/BetaSu/big-react/tree/v3) |
62+
| Reconciler | useEffect 实现 | ✅ | [v9](https://github.com/BetaSu/big-react/tree/v9) |
63+
| Reconciler | useRef 实现 | ✅ | [ref](https://github.com/BetaSu/big-react/commit/41e1b4aff567804a872a19674c1a6efcce07abf6) |
64+
| Reconciler | Legacy 调度流程（包含 batchedUpdates） | ✅ | [v8](https://github.com/BetaSu/big-react/tree/v8) |
65+
| Reconciler | Concurrent 调度流程 | ✅ | [v11](https://github.com/BetaSu/big-react/tree/v11) |
66+
| Reconciler | useTransition 实现 | ✅ | [useTransition](https://github.com/BetaSu/big-react/commit/e0754721e1d11465bafc25c0360604a536e16d60) |
67+
| Reconciler | useContext 及 context 流程实现 | ✅ | [context 实现](https://github.com/BetaSu/big-react/commit/18d25044415b8d3e558d7027e23607d01c03f40a) |
68+
| Reconciler | unwind 流程 | ✅ | [unwind 流程](https://github.com/BetaSu/big-react/commit/18d25044415b8d3e558d7027e23607d01c03f40a) |
69+
| Reconciler | Suspense 组件实现 | ✅ | [Suspense](https://github.com/BetaSu/big-react/commit/306bcf975bca29c19b4d5423cdf01ed7af131c32) |
70+
| Reconciler | Offscreen 组件实现 | ✅ | [Offscreen](https://github.com/BetaSu/big-react/commit/306bcf975bca29c19b4d5423cdf01ed7af131c32) |
71+
| Reconciler | use hook 实现 | ✅ | [use hook](https://github.com/BetaSu/big-react/commit/306bcf975bca29c19b4d5423cdf01ed7af131c32) |
72+
73+
## 调试
74+
75+
提供 3 种调试方式：
76+
77+
1. 实时调试
78+
79+
执行`pnpm demo`会运行项目`demos`目录下的示例项目（默认项目是针对[v9](https://github.com/BetaSu/big-react/tree/v9)的调试项目）
80+
81+
这种方式的好处是：
82+
83+
- 控制台会打印各个主要步骤的执行信息，可以直观看到执行流程
84+
85+
- 热更新（包括示例代码和源码代码）
86+
87+
2. pnpm link
88+
89+
通过`CRA`或`Vite`起一个`React`测试项目后，在本项目执行`pnpm run build:dev`打包`react`与`react-dom`，在测试项目中通过`pnpm link`将项目依赖的`react`与`react-dom`替换为我们打包的`react`与`react-dom`
90+
91+
这种方式的好处是：最贴合项目中实际使用`React`的情况
92+
93+
3. 跑`React`官方的测试用例
94+
95+
执行`pnpm test`跑官方的测试用例，用例中引用的是执行`pnpm run build:dev`打包的`react`与`react-dom`
96+
97+
这种方式的好处是：可以从官方用例的角度观察框架实现的细节、各种边界情况
98+
99+
## 更新日志
100+
101+
### [v11](https://github.com/BetaSu/big-react/tree/v11)
102+
103+
实现了并发更新，通过修改 packages/react-dom/src/SyntheticEvent.ts 中的 eventTypeToEventPriority 方法下的 click 对应优先级，
104+
可以观察同步更新（SyncLane）与其他优先级下的点击事件中触发更新的区别（是否会开启时间切片）。包括如下功能：
105+
106+
- Concurrent 调度流程
107+
108+
### [v10](https://github.com/BetaSu/big-react/tree/v10)
109+
110+
这一版的改动比较大，为了实现 React-Noop-Renderer，对 React-Reconciler 与 rollup 配置做了一些调整，使 React-Reconciler 更通用（可以对接不同宿主环境）。包括如下功能：
111+
112+
- 实现 React-Noop-Renderer，可以脱离 ReactDOM 更好的测试 Recocniler 逻辑
113+
114+
- 对 rollup 配置做了改动，以配合 React-Reconciler 更好对接不同宿主环境
115+
116+
- 引入 React 的内部包 jest-react、react-test-renderer，配合自制的 React-Noop-Renderer 测试并发情况下的 React case
117+
118+
- 跑通 useEffect 调用顺序的 case
119+
120+
- 修复了过程中发现的 Diff 算法的小 bug
121+
122+
- Scheduler、jest-react、react-test-renderer 均采用 NPM 包形式引入
123+
124+
### [v9](https://github.com/BetaSu/big-react/tree/v9)
125+
126+
实现了 useEffect，为了实现 useEffect 回调的异步调度，引入了官方的 scheduler 模块。当前 scheduler 模块的生产环境版本放在 packages 目录下，方便对他进行修改。如果后期证实没有需要特别修改的地方，会考虑以 NPM 包的形式引入 scheduler。包括如下功能：
127+
128+
- useEffect 实现
129+
130+
### [v8](https://github.com/BetaSu/big-react/tree/v8)
131+
132+
实现了基础功能的 Lane 模型，可以调度同步更新，并基于此实现了 batchedUpdates（批处理），包括如下功能：
133+
134+
- Lane 模型
135+
136+
- 带优先级的 Update 机制
137+
138+
- Legacy 调度流程（包含 batchedUpdates）
139+
140+
- 修复了多个子节点中 number 类型节点不支持的 bug
141+
142+
### [v7](https://github.com/BetaSu/big-react/tree/v7)
143+
144+
实现了多节点 reconcile 流程（俗称的 Diff 算法），包括如下功能：
145+
146+
- 修复了 update 时 onClick 回调不更新的 bug
147+
148+
- 插入多节点的 mount 流程
149+
150+
- 插入多节点的 reconcile 流程
151+
152+
- 浏览器环境 DOM 的移动
153+
154+
Diff 算法的测试用例还依赖 useEffect、useRef 的实现，放在后面再实现
155+
156+
### [v6](https://github.com/BetaSu/big-react/tree/v6)
157+
158+
实现事件系统，包括如下功能：
159+
160+
- 事件模型
161+
- onClick 事件支持（以及 onClickCapture 事件）
162+
163+
### [v5](https://github.com/BetaSu/big-react/tree/v5)
164+
165+
实现单节点 update，包括如下功能：
166+
167+
- 浏览器环境 DOM 的删除（比如 h3 变为 p，那么就要经历删除 h3、插入 p）
168+
- 插入单节点的 reconcile 流程（包括 HostComponent、HostText）
169+
- 删除节点的 reconcile 流程（为后续 ref、useEffect 特性做准备，实现的比较完备）
170+
- Hooks 架构 update 时实现
171+
172+
### [v4](https://github.com/BetaSu/big-react/tree/v4)
173+
174+
初始化测试相关架构，包括如下功能：
175+
176+
- 实现 React.isValidElement
177+
- jest 环境搭建
178+
- babel 配置
179+
- ReactTestUtils
180+
- 跑通关于 jsx 的 17 个官方用例
181+
182+
### [v3](https://github.com/BetaSu/big-react/tree/v3)
183+
184+
实现 useState 的 mount 时流程，包括如下功能：
185+
186+
- FunctionComponent 类型支持
187+
- Hooks 架构 mount 时实现
188+
- useState 实现
189+
190+
### [v2](https://github.com/BetaSu/big-react/tree/v2)
191+
192+
插入单节点的 mount 流程（可以在浏览器环境渲染 DOM），包括如下功能：
193+
194+
- 浏览器环境 DOM 的插入
195+
- HostText 类型支持
196+
197+
### [v1](https://github.com/BetaSu/big-react/tree/v1)
198+
199+
插入单节点的 render 阶段 mount 流程，包括如下功能：
200+
201+
- JSX 转换
202+
- Fiber 架构
203+
- 插入单节点的 reconcile 流程
204+
- HostComponent 类型支持
205+
- HostRoot 类型支持
206+
207+
注：还未实现浏览器环境下的渲染

0 commit comments

Comments
 (0)