82

0

Big-React

跟着我,从0实现React18

Big-React

从零实现 React v18 的核心功能,特点如下:

  • 👬 与 React 源码最接近的实现
  • 💪 功能完备,当前可跑通官方测试用例数量:34
  • 🚶 按 Git Tag划分迭代步骤,记录从 0 实现的每个功能

如果想加入项目对应的 源码交流群,和 7000+小伙伴们一起交流 React,可以加我微信,备注「开发」:

TODO List

工程类需求

类型 内容 完成情况 在哪个版本实现的
架构 monorepo(pnpm 实现) v1
规范 eslint v1
规范 prettier v1
规范 commitlint + husky v1
规范 lint-staged v1
规范 tsc v1
测试 jest 环境搭建 v4
规范 tsc v1
构建 babel 配置 v4
构建 Dev 环境包的构建 v1
构建 Prod 环境包的构建 ⬜️
部署 Github Action 执行 lint 与 test ⬜️
部署 Github Action 根据 tag 发布 npm 包 ⬜️

框架需求

类型 内容 完成情况 在哪个版本实现的
React JSX 转换 v1
React React.isValidElement v4
ReactDOM 浏览器环境 DOM 的插入 v2
ReactDOM 浏览器环境 DOM 的移动 v7
ReactDOM 浏览器环境 DOM 的属性变化 ⬜️
ReactDOM 浏览器环境 DOM 的删除 v5
ReactDOM ReactTestUtils v4
ReactNoop ReactNoop Renderer v10
Reconciler Fiber 架构 v1
Reconciler 事件模型 v6
Reconciler onClick 事件支持 v6
Reconciler input 元素 onChange 事件支持 ⬜️
Reconciler Lane 模型 v8
Reconciler 基础 Update 机制 v1
Reconciler 带优先级的 Update 机制 v8
Reconciler 插入单节点的 mount 流程 v1
Reconciler 插入多节点的 mount 流程 v7
Reconciler 插入单节点的 reconcile 流程 v5
Reconciler 插入多节点的 reconcile 流程 v7
Reconciler 删除节点的 reconcile 流程 v5
Reconciler HostText 类型支持 v2
Reconciler HostComponent 类型支持 v1
Reconciler HostRoot 类型支持 v1
Reconciler FunctionComponent 类型支持 v3
React Hooks 架构 mount 时实现 v3
React Hooks 架构 update 时实现 v5
Reconciler useState 实现 v3
Reconciler useEffect 实现 v9
Reconciler useRef 实现 ⬜️
Reconciler Legacy 调度流程(包含 batchedUpdates) v8
Reconciler Concurrent 调度流程 v11
Reconciler 异常处理流程 ⬜️
Reconciler useErrorBoundary 实现 ⬜️

调试

提供 3 种调试方式:

  1. 实时调试

执行 pnpm demo会运行项目 demos目录下的示例项目(默认项目是针对v9的调试项目)

这种方式的好处是:

  • 控制台会打印各个主要步骤的执行信息,可以直观看到执行流程
  • 热更新(包括示例代码和源码代码)
  1. pnpm link

通过 CRAVite起一个 React测试项目后,在本项目执行 pnpm run build:dev打包 reactreact-dom,在测试项目中通过 pnpm link将项目依赖的 reactreact-dom替换为我们打包的 reactreact-dom

这种方式的好处是:最贴合项目中实际使用 React的情况

  1. React官方的测试用例

执行 pnpm test跑官方的测试用例,用例中引用的是执行 pnpm run build:dev打包的 reactreact-dom

这种方式的好处是:可以从官方用例的角度观察框架实现的细节、各种边界情