Codebase Overview

这一部分是 React 官网对于源码结构的概述。我大致的了解了一下，并从中选出了自己感兴趣的部分开始学习。

下面记录一点对现在的我来说比较值得记录的内容，剩余的部分对我来说可能暂时涉及不到，就先不记录了。如果有需要，可以去官网查看哦。

Top-Level Folders/顶层文件夹

• packages: 包含了项目的元数据（比如package.json)和 React 仓库中所有 package （比如 react-dom)的源码（在各个 package 的src子目录下）。
• fixtures: 包含了给贡献者提供的一些小的 React 测试项目。
• build：build 是 React 的构建输出。

除此之外，还有一些其他的顶层文件夹。但是他们大多数都是工具类的，所以在贡献代码时一般不会涉及。

Development and Production/开发环境和生产环境

在代码库中使用__DEV__来标识只在开发环境中运行的代码块。

在CommonJS构建时。它会被转为process.env.NODE_ENV !== 'production'。

对于独立构建(standalone build)的情况，当不是最小构建时(unminified build)，它会变为true,当是最小构建时(minified build)，这一整块 if 代码块都会被剥离。

if (__DEV__) {
  // This code will only run in development.
}

• standalone build: 独立构建应该就是所有的内容都构建成一个文件。这样的构建就可以很方便的直接使用 script 直接引入，也可以放在 CDN 上(Content Delivery Network)。

Multiple Packages

React 采用 monorepo 的管理方式。仓库中包含多个独立的包，以便于更改可以一起联调，并且问题只会出现在同一地方。

React Core

React “Core” 中包含所有全局 React API。

**React 核心只包含定义组件必要的 API。**它不包含协调算法或者其他平台特定的代码。它同时适用于 React DOM 和 React Native 组件。

React 核心代码在源码的 packages/react 目录中。在 npm 上发布为 react 包。相应的独立浏览器构建版本称为 react.js，它会导出一个称为 React 的全局对象。

Renderers/渲染器

React 最初只是服务于 DOM。但最近也支持了原生平台的React Native，所以才出现了 Renderers 的概念。

渲染器控制了一颗 React 树如何转换为底层的平台调用。

renderers 也在packages/目录下，大致可分为：

• React DOM Renderer
• React Native Renderer
• React Test Renderer

Reconciler

就算像 React DOM 和 React Native 这样如此不同的 Renderers，也会共享一部分的逻辑。尤其是，为了声明式渲染、自定义组件、状态、生命周期方法以及 refs 等在不同平台效果一致，reconciliation 算法应该尽可能的相似。

为了解决这个问题，不同的 renderers 共享了一些代码。React 的这一部分就称为 Reconciler。

当一个更新被触发（比如setState()），reconciler 会在树的组件上调用render()，也可能会挂载、更新和卸载他们。 原文：When an update such as setState() is scheduled, the reconciler calls render() on components in the tree and mounts, updates, or unmounts them.

对这一句我有点困惑，先记录一下，后面再深入研究。我的困惑是，它提到的 tree 是虚拟树还是真实的 DOM 树？我理解的 reconciler 就是 Renderers 的一部分共用逻辑，Renderers 比如 React-dom，我理解是用来将 React 虚拟树转化为新的 DOM 树或者更新现有 DOM 树。所以我觉得这个 tree 应该是虚拟树，并在 render()的调用过程中，去更新 DOM 树。

Stack Reconciler 和 Fiber Reconciler

Stack Reconciler

它是在 React 15 或者更早版本使用。现在已经不再使用了。

Fiber Reconciler

从 React 16 开始，Fiber Reconciler 成为默认使用的 Reconciler。创造并使用它是为了解决 Stack Reconciler 的问题以及修复一些长期存在的 issues。

源码位于：packages/react-reconciler