Skip to content

chenzewang/react-source-code-debug

 
 

Repository files navigation

flow

添加了 flow 相关配置文件 TODO 更详细的更新说明

-------------------- 以下为原项目内容 ----------------------

React 的秘密

本仓库是我在阅读 React 源码过程中搭建的调试环境,学习过程中对源码添加了较为详细的注释,并记录了一些我自己的理解与思考,输出了十几篇文章。React 的源码庞大且复杂,希望这个仓库可以帮助到学习源码的你,本仓库会中的源码会随官方发布的主要版本进行更新。

可 clone 本仓库到本地直接运行,快速获取源码调试环境,或者 点击查看 调试环境搭建教程

安装依赖

npm install

启动 React 不同版本的调试环境:

  • 启动 18.3.1,该版本源码获取自 2024 年 4 月 26 日官方发布的 18.3.1 版本
 npm run dev:18.3.1
  • 启动 18,该版本代码获取自 2022 年 6 月 2 日下午 3 点 14 分 React 官方仓库的 main 分支
 npm run dev:18
  • 启动 17 正式版
 npm run dev:17
  • 启动 17.0.0-alpha.0
 npm run dev:17.0.0-alpha.0
  • 启动 16.13.1 版本
 npm run dev:16.13.1
  • 启动 16.12.0 版本
npm run dev:16.12.0
  • 查看 Lanes 优先级模型的效果(除 react、react-dom 之外,其他包例如 scheduler、react-reconciler 等引入自 master 分支的代码)

在此感谢yisar提供 Lanes 模型的源码包

由于 Lanes 还未正式发布,master 分支代码虽然开启 concurrent 模式之后优先级用的就是 lanes,但它只是将 expirationTime 替换成了 lanes 去实现, 效果并无变化,真正的效果可以使用下边命令预览,启动命令之前需要将 config/env.js 中的PROFILE环境变量置为 true

npm run dev:lanes

React 源码解析系列文章目录

React 源码体系较为复杂,在了解了整体流程之后,我编排的内容顺序如下。

前置知识

有一些知识需要了解,因为 React17 的优先级模型由 expirationTime 换成了 Lanes 模型,而 Lanes 模型涉及大量的位运算,所以需要先了解位运算。另外,贯穿 React 更新完整周期的优先级机制也是绕不开的话题。

Render 阶段

产生更新后,React 会渲染一棵离屏 Fiber 树(workInProgress 树),Render 阶段正是这棵 Fiber 树的构建阶段。构建过程分为深度优先的向下 beginWork 阶段,以及触碰到叶子节点之后的向上 completeWork 回溯阶段。在 Concurrent 模式下,Render 阶段是可以被打断的。

beginWork 阶段

completeWork 阶段

Commit 阶段

在 Render 阶段完成后,离屏的 Fiber 树构建完成,此时需要进行实际的 DOM 操作,来将更新应用到 DOM 上。除此之外,还会有 use(Layout)Effect 这类 Hook 函数的处理。

DOM 操作系列:

下面的三面文章,可以帮助你深入理解 Commit 阶段 React 操作 DOM 的细节。

其余核心功能

以上是主流程,其余的重要功能不容忽视,例如 React 事件机制,还有 Concurrent 模式下的任务调度机制,都值得深入研究。

Hooks

Hooks 作为革命性的新功能,必然要深入学习,下面的文章从基本的 hooks 链表开始,展开讲解各个 Hooks 的原理

Concurrent 模式下 React 的更新行为

下面三篇文章通过梳理 Concurrent 模式下 React 任务的更新行为,总结了上面所有文章的重要知识点,其中高优先级任务插队这篇文章涉及 React 中重要的多任务协调机制,内容不容错过。

本系列文章在之后会继续更新未完成的部分,会同步发到我的个人网站 以及 segmentFault 专栏 React 的秘密 上。

About

React 源码调试环境,源代码详细注释,跟随官方仓库进行更新

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 97.5%
  • CSS 1.2%
  • Other 1.3%