阅读源码之前的准备工作

阅读源码之前当然是先准备好阅读环境了。React 经过这么多年的发展，代码仓库已经非常庞大，安装依赖也有些麻烦，因此独立出一篇记录准备环境中遇到的问题，以及我们需要使用哪些工具。

下载代码

React 源代码托管在 Github 上，通过如下命令可以将源代码下载到本地。

git clone git@github.com:facebook/react.git

鉴于目前的网络环境，访问 Github 不是很友好，我们可以稍稍优化下，减少代码下载时间。

git clone git@github.com:facebook/react.git --depth=1

由于我们要基于 v16.13.1 版本的代码，因此我们是全量下载代码。

安装依赖

下载完成之后，我们需要安装项目的依赖，在安装过程中，我们碰到了几个问题，记录如下。

首先在代码更目录执行：

yarn

安装依赖，在安装过程中，报了一个错误：

error /Users/xxx/workspace/open-source/react/node_modules/gifsicle: Command failed.
Exit code: 1
Command: node lib/install.js
Arguments:
Directory: /Users/xxx/workspace/open-source/react/node_modules/gifsicle
Output:
⚠ connect ECONNREFUSED 0.0.0.0:443
  ⚠ gifsicle pre-build test failed
  ℹ compiling from source
  ✖ Error: Command failed: /bin/sh -c autoreconf -ivf
/bin/sh: autoreconf: command not found

1
2
3
4
5
6
7
8
9
10
11

是因为 React 的依赖包中依赖了 autoconf 这个包，我们使用 Homebrew 来安装。

brew install autoconf automake libtool

默认情况下，Homebrew 会先执行更新，这是一项非常耗时的操作，我们可以通过设置环境变量 HOMEBREW_NO_AUTO_UPDATE=1 来禁用更新。可以将这个环境变量写入 ~/.bashrc 中，每次执行 Homebrew 都生效：

export HOMEBREW_NO_AUTO_UPDATE=1

或者在命令行使用，单次生效：

HOMEBREW_NO_AUTO_UPDATE=1 brew install autoconf automake libtool

Homebrew 安装完成后，重新执行 yarn 命令，过了一段时间，提示 electron 安装超时。我们可以通过在 ~/.npmrc 中添加如下配置（注意最后的 '/'）：

electron_mirror=https://npm.taobao.org/mirrors/electron/

将 electron 的镜像源设置为淘宝的站点，来加速下载。

阅读工具

工欲善其事必先利其器，没有一个好的工具怎么能提高阅读代码的效率呢？

作为一个前端开发人员，VSCode 是一个不错的选择。

使用 VSCode 打开代码以后，会发现每个代码文件都提示很多语法错误。原因是 React 代码中使用 Flowopen in new window 来声明类型，VSCode 中 TS 引擎默认会对 JS 进行语法检查，因此会提示在 JS 文件中不能声明类型，需要将文件重命名为 TS 文件。

这当然属于误报，我们需要在设置中关闭 JS 检查。CMD + , 打开设置页面，输入 javascript.validate，去勾选查出来的第一项即可。

同时我们也建议安装下 Flow Language Supportopen in new window 这个插件，可以提供对 Flow 提供很好的支持。

在解决完满屏的红色错误提示以后，我们需要安装 Bookmarksopen in new window 这个插件，有了它，我们可以在任意代码打一个标签，然后在任意时间点通过这个标签返回到这段代码，避免在庞大的代码仓库中迷路。

关注微信公众号，获取最新推送~

加微信，深入交流~

# 下载代码

# 安装依赖

# 阅读工具

下载代码

安装依赖

阅读工具