阅读 656

React 源码阅读 - 准备工作

下载源码

首先,去 Github 找到 React 的源码库,然后 fork 到自己的库。

以我的 fork 库为例:

git clone git@github.com:EagleClark/react.git
复制代码

然后,再添加一下主库:

cd react
git remote add main https://github.com/facebook/react.git
复制代码

可以使用以下命令从主库更新代码:

# 查看远程分支
git branch -r
# 切本地分支
git checkout origin/main
# 拉取远端代码 主分支 main
git pull main main
# 拉取远端代码 比如 17.0.2 版本
git pull main 17.0.2
复制代码

安装依赖

推荐使用 yarn 来管理依赖包。

首先,安装 yarn

# macOS
brew install yarn
复制代码

Windows 可以到官网下载 .msi文件进行安装。

安装之后使用下面命令查看版本:

yarn --version
复制代码

yarn 源配置(如果国内网络特别慢可以配置一下国内镜像)

# 镜像查看
yarn config get registry
# 临时修改
yarn save 包名 --registry https://registry.npm.taobao.org/
# 全局修改
yarn config set registry https://registry.npm.taobao.org/
复制代码

另外,electron 的镜像地址也需要配置一下。

yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/
复制代码

进入项目目录,执行下面命令安装依赖

yarn

# Mac 下可能需要加 sudo
sudo yarn
复制代码

打包

打包 reactschedulerreact-dom 三个包为 dev 环境可以使用的 cjs 包。

# 执行打包命令,--type=NODE 
yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE
复制代码

现在源码目录 build/node_modules 下会生成最新代码的包。我们为 reactreact-dom 创建一个快捷方式,他会链接到我们 build 出来的文件。

# link 会将当期模块链接到全局,如果想解除使用 unlink 即可
# 修改 react 指向
cd build/node_modules/react
yarn link

# 修改 react-dom 指向
cd build/node_modules/react-dom
yarn link
复制代码

创建项目并调试

接下来我们通过 create-react-app 在其他地方创建新项目(当然如果觉得 create-react-app 太重,也可以自己搭脚手架)。

npx create-react-app react-test
复制代码

react-test 项目中,将 reactreact-dom 2个包指向 facebook/react 下我们刚才生成的包。

# 将项目内的 react react-dom 指向之前修改指向的包
yarn link react react-dom
复制代码

现在试试在 react/build/node_modules/react-dom/cjs/react-dom.development.js 中随便改改代码,比如: console.log 些东西。

react-test 项目下执行 yarn start,运行项目就可以进行调试了。

目录结构简介

根目录
├── fixtures        # 包含一些给贡献者准备的小型 React 测试项目
├── packages        # 包含元数据(比如 package.json)和 React 仓库中所有 package 的源码(子目录 src)
├── scripts         # 各种工具链的脚本,比如git、jest、eslint等
复制代码

主要需要关注 packages 目录,而其下目录又非常多,我们挑一些比较重要的来看:

packages
├── react             # 包含 React.createElement React.Component 等核心 API
├── react-dom         # 渲染器的核心,负责将变化的组件渲染到页面上
├── react-reconciler  # 协调器,负责找出变化的组件,非常重要的核心
├── scheduler         # 调度器实现,调度任务的优先级,高优任务优先进入 Reconciler
├── shared            # 源码中其他模块公用的方法和全局变量
复制代码

关于 Flow 语法

当你用 VS Code 打开 React 源码的时候,你会发现里面报错非常多,仔细看报错地方的语法和 JS、TS 都有所不同,这是因为 React 的源码是用 Flow 语法所写。项目GitHub地址,其项目背景可以看这里,不过不用深究这些语法,不会再去查也行。

Flow 语法是 Facebook 的 JavaScript 静态类型检查工具,关于 Flow 语法的更多信息可以看其官方文档。下面我针对实用的点或语法做一些简单的介绍。

VS Code 报错解决

在 VS Code 中,Code(文件) -> Preferences(首选项) -> Settings(设置) 中搜索 javascript.validate.enable 将其禁用。

启用 Flow

加入注解就可以启用 Flow

// @flow
复制代码

或者

/**
 * @flow
 */
复制代码

类型注释

基本类型:

  • Booleans
  • Strings
  • Numbers
  • null
  • undefined (void in Flow types)
  • Symbols (new in ECMAScript 2015)
// @flow
function square(n: number): number {
  return n * n;
}

square("2"); // Error!
复制代码

Maybe 类型,可以为当前设置的类型也可以是 nullvoid

// @flow
function acceptsMaybeString(value: ?string) {
  // ...
}

acceptsMaybeString("bar");     // Works!
acceptsMaybeString(undefined); // Works!
acceptsMaybeString(null);      // Works!
acceptsMaybeString();          // Works!
复制代码

Type Aliases 类型别名

// @flow
type MyObject = {
  foo: number,
  bar: boolean,
  baz: string,
};
复制代码
import type {Container} from './ReactDOMHostConfig';
复制代码
文章分类
前端
文章标签