{"id":13457744,"url":"https://github.com/BetaSu/big-react","last_synced_at":"2025-03-24T14:32:15.681Z","repository":{"id":37398649,"uuid":"232981344","full_name":"BetaSu/big-react","owner":"BetaSu","description":"跟着我，从0实现React18","archived":false,"fork":false,"pushed_at":"2024-10-17T15:46:29.000Z","size":653,"stargazers_count":3773,"open_issues_count":22,"forks_count":400,"subscribers_count":60,"default_branch":"master","last_synced_at":"2025-02-09T00:02:48.719Z","etag":null,"topics":["react","reactjs"],"latest_commit_sha":null,"homepage":"https://qux.xet.tech/s/2wiFh1","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BetaSu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-10T06:30:06.000Z","updated_at":"2025-02-08T12:57:40.000Z","dependencies_parsed_at":"2024-07-31T09:08:37.673Z","dependency_job_id":"4e61d5b2-938a-4a0c-889b-0c9107b583ee","html_url":"https://github.com/BetaSu/big-react","commit_stats":{"total_commits":120,"total_committers":6,"mean_commits":20.0,"dds":0.04166666666666663,"last_synced_commit":"8e6630eed13aa691a607330bfd8aa1196eca4297"},"previous_names":["betasu/react-on-the-way"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetaSu%2Fbig-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetaSu%2Fbig-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetaSu%2Fbig-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetaSu%2Fbig-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BetaSu","download_url":"https://codeload.github.com/BetaSu/big-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245289632,"owners_count":20591108,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","reactjs"],"created_at":"2024-07-31T09:00:35.366Z","updated_at":"2025-03-24T14:32:15.225Z","avatar_url":"https://github.com/BetaSu.png","language":"TypeScript","readme":"# Big-React\n\n从零实现 React v18 的核心功能，特点如下：\n\n- 👬 与 React 源码最接近的实现\n- 💪 功能完备，当前可跑通官方测试用例数量：34\n- 🚶 按`Git Tag`划分迭代步骤，记录从 0 实现的每个功能\n\n如果想跟着我学习「如何从 0 到 1 实现 React18」，可以[点击这里](https://qux.xet.tech/s/2wiFh1)\n\n## TODO List\n\n### 工程类需求\n\n| 类型 | 内容                               | 完成情况 | 在哪个版本实现的                                  |\n| ---- | ---------------------------------- | -------- | ------------------------------------------------- |\n| 架构 | monorepo（pnpm 实现）              | ✅       | [v1](https://github.com/BetaSu/big-react/tree/v1) |\n| 规范 | eslint                             | ✅       | [v1](https://github.com/BetaSu/big-react/tree/v1) |\n| 规范 | prettier                           | ✅       | [v1](https://github.com/BetaSu/big-react/tree/v1) |\n| 规范 | commitlint + husky                 | ✅       | [v1](https://github.com/BetaSu/big-react/tree/v1) |\n| 规范 | lint-staged                        | ✅       | [v1](https://github.com/BetaSu/big-react/tree/v1) |\n| 规范 | tsc                                | ✅       | [v1](https://github.com/BetaSu/big-react/tree/v1) |\n| 测试 | jest 环境搭建                      | ✅       | [v4](https://github.com/BetaSu/big-react/tree/v4) |\n| 规范 | tsc                                | ✅       | [v1](https://github.com/BetaSu/big-react/tree/v1) |\n| 构建 | babel 配置                         | ✅       | [v4](https://github.com/BetaSu/big-react/tree/v4) |\n| 构建 | Dev 环境包的构建                   | ✅       | [v1](https://github.com/BetaSu/big-react/tree/v1) |\n| 构建 | Prod 环境包的构建                  | ⬜️      |                                                   |\n| 部署 | Github Action 执行 lint 与 test    | ⬜️      |                                                   |\n| 部署 | Github Action 根据 tag 发布 npm 包 | ⬜️      |                                                   |\n\n### 框架需求\n\n| 类型       | 内容                                   | 完成情况 | 在哪个版本实现的                                                                                     |\n| ---------- | -------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |\n| React      | JSX 转换                               | ✅       | [v1](https://github.com/BetaSu/big-react/tree/v1)                                                    |\n| React      | React.isValidElement                   | ✅       | [v4](https://github.com/BetaSu/big-react/tree/v4)                                                    |\n| ReactDOM   | 浏览器环境 DOM 的插入                  | ✅       | [v2](https://github.com/BetaSu/big-react/tree/v2)                                                    |\n| ReactDOM   | 浏览器环境 DOM 的移动                  | ✅       | [v7](https://github.com/BetaSu/big-react/tree/v7)                                                    |\n| ReactDOM   | 浏览器环境 DOM 的属性变化              | ⬜️      |                                                                                                      |\n| ReactDOM   | 浏览器环境 DOM 的删除                  | ✅       | [v5](https://github.com/BetaSu/big-react/tree/v5)                                                    |\n| ReactDOM   | ReactTestUtils                         | ✅       | [v4](https://github.com/BetaSu/big-react/tree/v4)                                                    |\n| ReactNoop  | ReactNoop Renderer                     | ✅       | [v10](https://github.com/BetaSu/big-react/tree/v10)                                                  |\n| Reconciler | Fiber 架构                             | ✅       | [v1](https://github.com/BetaSu/big-react/tree/v1)                                                    |\n| Reconciler | 事件模型                               | ✅       | [v6](https://github.com/BetaSu/big-react/tree/v6)                                                    |\n| Reconciler | onClick 事件支持                       | ✅       | [v6](https://github.com/BetaSu/big-react/tree/v6)                                                    |\n| Reconciler | input 元素 onChange 事件支持           | ⬜️      |                                                                                                      |\n| Reconciler | Lane 模型                              | ✅       | [v8](https://github.com/BetaSu/big-react/tree/v8)                                                    |\n| Reconciler | 基础 Update 机制                       | ✅       | [v1](https://github.com/BetaSu/big-react/tree/v1)                                                    |\n| Reconciler | 带优先级的 Update 机制                 | ✅       | [v8](https://github.com/BetaSu/big-react/tree/v8)                                                    |\n| Reconciler | 插入单节点的 mount 流程                | ✅       | [v1](https://github.com/BetaSu/big-react/tree/v1)                                                    |\n| Reconciler | 插入多节点的 mount 流程                | ✅       | [v7](https://github.com/BetaSu/big-react/tree/v7)                                                    |\n| Reconciler | 插入单节点的 reconcile 流程            | ✅       | [v5](https://github.com/BetaSu/big-react/tree/v5)                                                    |\n| Reconciler | 插入多节点的 reconcile 流程            | ✅       | [v7](https://github.com/BetaSu/big-react/tree/v7)                                                    |\n| Reconciler | 删除节点的 reconcile 流程              | ✅       | [v5](https://github.com/BetaSu/big-react/tree/v5)                                                    |\n| Reconciler | HostText 类型支持                      | ✅       | [v2](https://github.com/BetaSu/big-react/tree/v2)                                                    |\n| Reconciler | HostComponent 类型支持                 | ✅       | [v1](https://github.com/BetaSu/big-react/tree/v1)                                                    |\n| Reconciler | HostRoot 类型支持                      | ✅       | [v1](https://github.com/BetaSu/big-react/tree/v1)                                                    |\n| Reconciler | FunctionComponent 类型支持             | ✅       | [v3](https://github.com/BetaSu/big-react/tree/v3)                                                    |\n| React      | Hooks 架构 mount 时实现                | ✅       | [v3](https://github.com/BetaSu/big-react/tree/v3)                                                    |\n| React      | Hooks 架构 update 时实现               | ✅       | [v5](https://github.com/BetaSu/big-react/tree/v5)                                                    |\n| Reconciler | useState 实现                          | ✅       | [v3](https://github.com/BetaSu/big-react/tree/v3)                                                    |\n| Reconciler | useEffect 实现                         | ✅       | [v9](https://github.com/BetaSu/big-react/tree/v9)                                                    |\n| Reconciler | useRef 实现                            | ✅       | [ref](https://github.com/BetaSu/big-react/commit/41e1b4aff567804a872a19674c1a6efcce07abf6)           |\n| Reconciler | Legacy 调度流程（包含 batchedUpdates） | ✅       | [v8](https://github.com/BetaSu/big-react/tree/v8)                                                    |\n| Reconciler | Concurrent 调度流程                    | ✅       | [v11](https://github.com/BetaSu/big-react/tree/v11)                                                  |\n| Reconciler | useTransition 实现                     | ✅       | [useTransition](https://github.com/BetaSu/big-react/commit/e0754721e1d11465bafc25c0360604a536e16d60) |\n| Reconciler | useContext 及 context 流程实现         | ✅       | [context 实现](https://github.com/BetaSu/big-react/commit/18d25044415b8d3e558d7027e23607d01c03f40a)  |\n| Reconciler | unwind 流程                            | ✅       | [unwind 流程](https://github.com/BetaSu/big-react/commit/18d25044415b8d3e558d7027e23607d01c03f40a)   |\n| Reconciler | Suspense 组件实现                      | ✅       | [Suspense](https://github.com/BetaSu/big-react/commit/306bcf975bca29c19b4d5423cdf01ed7af131c32)      |\n| Reconciler | Offscreen 组件实现                     | ✅       | [Offscreen](https://github.com/BetaSu/big-react/commit/306bcf975bca29c19b4d5423cdf01ed7af131c32)     |\n| Reconciler | use hook 实现                          | ✅       | [use hook](https://github.com/BetaSu/big-react/commit/306bcf975bca29c19b4d5423cdf01ed7af131c32)      |\n| React | React.lazy 实现                          | ✅       |  [Lazy 实现](https://github.com/BetaSu/big-react/pull/49/files) 由[L-Qun](https://github.com/L-Qun)完成    |\n| React | React.memo 实现                          | ✅       |  [React.memo 实现](https://github.com/BetaSu/big-react/commit/bb1cedd2a4e6ba99562d28fdaa38e52d8da70525)   |\n| Reconciler | bailout性能优化策略                          | ✅       |  [bailout 实现](https://github.com/BetaSu/big-react/commit/bb1cedd2a4e6ba99562d28fdaa38e52d8da70525)    |\n| Reconciler | eagerState性能优化策略                          | ✅       |  [eagerState 实现](https://github.com/BetaSu/big-react/commit/bb1cedd2a4e6ba99562d28fdaa38e52d8da70525)   |\n| Reconciler | useMemo 实现                         | ✅       |  [useMemo 实现](https://github.com/BetaSu/big-react/commit/bb1cedd2a4e6ba99562d28fdaa38e52d8da70525)    |\n| Reconciler | useCallback 实现                          | ✅       |  [useCallback 实现](https://github.com/BetaSu/big-react/commit/bb1cedd2a4e6ba99562d28fdaa38e52d8da70525)    |\n| Reconciler | context兼容bailout策略                          | ✅       |  [context兼容](https://github.com/BetaSu/big-react/commit/bb1cedd2a4e6ba99562d28fdaa38e52d8da70525)    |\n\n\n\n\n## 调试\n\n提供 3 种调试方式：\n\n1. 实时调试\n\n执行`pnpm demo`会运行项目`demos`目录下的示例项目（默认项目是针对[v9](https://github.com/BetaSu/big-react/tree/v9)的调试项目）\n\n这种方式的好处是：\n\n- 控制台会打印各个主要步骤的执行信息，可以直观看到执行流程\n\n- 热更新（包括示例代码和源码代码）\n\n2. pnpm link\n\n通过`CRA`或`Vite`起一个`React`测试项目后，在本项目执行`pnpm run build:dev`打包`react`与`react-dom`，在测试项目中通过`pnpm link`将项目依赖的`react`与`react-dom`替换为我们打包的`react`与`react-dom`\n\n这种方式的好处是：最贴合项目中实际使用`React`的情况\n\n3. 跑`React`官方的测试用例\n\n执行`pnpm test`跑官方的测试用例，用例中引用的是执行`pnpm run build:dev`打包的`react`与`react-dom`\n\n这种方式的好处是：可以从官方用例的角度观察框架实现的细节、各种边界情况\n\n## 更新日志\n\n### [v11](https://github.com/BetaSu/big-react/tree/v11)\n\n实现了并发更新，通过修改 packages/react-dom/src/SyntheticEvent.ts 中的 eventTypeToEventPriority 方法下的 click 对应优先级，\n可以观察同步更新（SyncLane）与其他优先级下的点击事件中触发更新的区别（是否会开启时间切片）。包括如下功能：\n\n- Concurrent 调度流程\n\n### [v10](https://github.com/BetaSu/big-react/tree/v10)\n\n这一版的改动比较大，为了实现 React-Noop-Renderer，对 React-Reconciler 与 rollup 配置做了一些调整，使 React-Reconciler 更通用（可以对接不同宿主环境）。包括如下功能：\n\n- 实现 React-Noop-Renderer，可以脱离 ReactDOM 更好的测试 Recocniler 逻辑\n\n- 对 rollup 配置做了改动，以配合 React-Reconciler 更好对接不同宿主环境\n\n- 引入 React 的内部包 jest-react、react-test-renderer，配合自制的 React-Noop-Renderer 测试并发情况下的 React case\n\n- 跑通 useEffect 调用顺序的 case\n\n- 修复了过程中发现的 Diff 算法的小 bug\n\n- Scheduler、jest-react、react-test-renderer 均采用 NPM 包形式引入\n\n### [v9](https://github.com/BetaSu/big-react/tree/v9)\n\n实现了 useEffect，为了实现 useEffect 回调的异步调度，引入了官方的 scheduler 模块。当前 scheduler 模块的生产环境版本放在 packages 目录下，方便对他进行修改。如果后期证实没有需要特别修改的地方，会考虑以 NPM 包的形式引入 scheduler。包括如下功能：\n\n- useEffect 实现\n\n### [v8](https://github.com/BetaSu/big-react/tree/v8)\n\n实现了基础功能的 Lane 模型，可以调度同步更新，并基于此实现了 batchedUpdates（批处理），包括如下功能：\n\n- Lane 模型\n\n- 带优先级的 Update 机制\n\n- Legacy 调度流程（包含 batchedUpdates）\n\n- 修复了多个子节点中 number 类型节点不支持的 bug\n\n### [v7](https://github.com/BetaSu/big-react/tree/v7)\n\n实现了多节点 reconcile 流程（俗称的 Diff 算法），包括如下功能：\n\n- 修复了 update 时 onClick 回调不更新的 bug\n\n- 插入多节点的 mount 流程\n\n- 插入多节点的 reconcile 流程\n\n- 浏览器环境 DOM 的移动\n\nDiff 算法的测试用例还依赖 useEffect、useRef 的实现，放在后面再实现\n\n### [v6](https://github.com/BetaSu/big-react/tree/v6)\n\n实现事件系统，包括如下功能：\n\n- 事件模型\n- onClick 事件支持（以及 onClickCapture 事件）\n\n### [v5](https://github.com/BetaSu/big-react/tree/v5)\n\n实现单节点 update，包括如下功能：\n\n- 浏览器环境 DOM 的删除（比如 h3 变为 p，那么就要经历删除 h3、插入 p）\n- 插入单节点的 reconcile 流程（包括 HostComponent、HostText）\n- 删除节点的 reconcile 流程（为后续 ref、useEffect 特性做准备，实现的比较完备）\n- Hooks 架构 update 时实现\n\n### [v4](https://github.com/BetaSu/big-react/tree/v4)\n\n初始化测试相关架构，包括如下功能：\n\n- 实现 React.isValidElement\n- jest 环境搭建\n- babel 配置\n- ReactTestUtils\n- 跑通关于 jsx 的 17 个官方用例\n\n### [v3](https://github.com/BetaSu/big-react/tree/v3)\n\n实现 useState 的 mount 时流程，包括如下功能：\n\n- FunctionComponent 类型支持\n- Hooks 架构 mount 时实现\n- useState 实现\n\n### [v2](https://github.com/BetaSu/big-react/tree/v2)\n\n插入单节点的 mount 流程（可以在浏览器环境渲染 DOM），包括如下功能：\n\n- 浏览器环境 DOM 的插入\n- HostText 类型支持\n\n### [v1](https://github.com/BetaSu/big-react/tree/v1)\n\n插入单节点的 render 阶段 mount 流程，包括如下功能：\n\n- JSX 转换\n- Fiber 架构\n- 插入单节点的 reconcile 流程\n- HostComponent 类型支持\n- HostRoot 类型支持\n\n注：还未实现浏览器环境下的渲染\n","funding_links":[],"categories":["TypeScript","Web Development","目录"],"sub_categories":["C++/C Toolkit"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBetaSu%2Fbig-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBetaSu%2Fbig-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBetaSu%2Fbig-react/lists"}