深入剖析 React 代码库 [EP2：仓库中哪个包在 npm 上最受欢迎？]

前言

在上一集中，我们打下了 React 的基础，现在我们准备继续我们的学习之旅！
今天我们将了解 React monorepo 中的其他包，它们存在的意义，以及 NPM 上最受欢迎的包是哪个！

但在那之前，让我们快速回顾一下今天需要用到的基本信息。

记起

React 是一个单体仓库，其中包含不同的 React 相关项目。更具体地说：

• React Core 包用于定义 React 组件，简称为react.
• 一堆渲染器，当然它们会在不同的环境中渲染 React 组件。
  • react-dom
  • react-native-renderer
  • react-art
  • react-test-renderer
  • react-noop-renderer
• 一个实现了差异算法的协调器，称为react-reconciler。

继续进行存储库设置

召回完成后，一切就绪。现在让我们检查一下剩下的包装。

附注：所有软件包的位置都遵循单一模式。./packages/{package-name}

公用设施包

react-is
这是一个实用工具包，可以测试某个值是否为有效的 React 元素，或者某个组件是否属于特定的 React 元素类型。

import React from "react";
import * as ReactIs from "react-is";

const ExampleComponent = () => React.createElement("h1");

// Is a valid React element?
ReactIs.isValidElementType(ExampleComponent); // true
Ract.isisValidElementType(null); // false

// Does a component is of specific React element type?
ReactIs.typeOf(<h1 />) === ReactIs.Element; // true
ReactIs.typeOf(<h1 />) === ReactIs.Fragment; // false

后一种用法让我想起了typeof原生 JavaScript 中的运算符。这可能是因为它也允许你测试任意值的类型。

typeof('Hello world!') === 'string'; // true
typeof('Hello world!') === 'number'; // false

scheduler
这个包用于浏览器中的调度。目前，它仅供 React 自身使用。

订阅相关套餐

React 中有两个用于处理外部资源订阅的包。create-subscription实用函数允许从 React 组件订阅外部数据源，而use-subscription钩子则以并发模式管理此类订阅。

与开发工具相关的软件包

本系列文章不会深入探讨开发者工具，因为这本身就是一个高级话题。但你需要知道，React monorepo 托管了许多可以帮助开发者使用 React 创建应用的软件包，例如 Reactreact-devtools-core本身react-devtools，react-devtools-extensions你或许有机会用到它们。

只有一个软件包与此类别相关，但有点特殊。它就是eslint-plugin-react-hooks。
尽管它的名字里没有“hooks” devtool。它与开发者工具直接相关，因为它是一个 ESLint 插件，用于强制执行所谓的“钩子规则”。它通常会给我一些警告，提示我需要在依赖数组中添加一些东西😄

附注：如此丰富的开发者工具让我觉得，这可能是 React 最初流行起来的原因之一。React 团队一直以来都官方支持其工具，你无需上网搜索外部资源。但这只是我的猜测。

用于测试的软件包

本系列文章不会对用于测试的软件包进行检查，因为这超出了范围。只是想告诉大家，React monorepo 中包含一些这样的软件包，例如dom-event-testing-library、jest-mock-scheduler、jest-react。

实验性软件包

此外，还有许多实验性软件包。由于它们尚未稳定完成，因此我们不会在本系列文章中对它们进行任何探讨。

小计

现在我们已经了解了 React monorepo 提供的所有包。我们将重点关注 `react-build` react、react-reconciler`react-react-build` 和 ` react-domreact-build`，因为它们是 React 开发者的必备工具。但我们也会研究其他包，以防它们对我们整体理解至关重要。

呼，跑了好久，现在终于可以享受乐趣了！

React monorepo 中最流行的 npm 包是什么？

React monorepo 中排名前 5 的 npm 包。

首先，我们先来了解一些基础知识。这里是 monorepo 中下载量排名前 5 的 npm 包的信息图。

有趣的是，这个react软件包本身并不是最受欢迎的。实际上，最受欢迎的软件包下载量高达react-is6.39 亿次，其次是scheduler4.21 亿次，最后才是react下载量“惨淡”的 4.04 亿次。

另一种直观的方法是查看npm 趋势图，你会再次惊叹于它react-is比其他软件包受欢迎多少😄

完整统计数据

这里有一个饼图，展示了所有发布在 npm 上且源代码位于 monorepo 中的软件包。
有趣的是，下载量最低的 10 个软件包（绿色部分）的下载量仅占总下载量的 1% 左右。

包起来

今天我们学习了

让我们总结一下我们从这一集中学到的不同东西。

• 除了 React Core、渲染器和协调器之外，React monorepo 还包含许多其他包，其中包括：
  • 不同的公用事业套餐
  • 与开发工具相关的软件包
  • 用于测试的软件包
  • 实验性软件包
• 我们将重点关注reactreact react-reconciler and-dom，因为它是 React 开发人员的必备工具。
• React monorepo 中最受欢迎的 npm 包并非 React 本身，而是react-is。React 包在列表中仅排名第三。

我期待看到类似的文章，我该怎么做？

首先，如果您喜欢这篇文章，请点赞或留言，​​让我知道我的方向是对的。我非常鼓励您留下任何建设性的反馈，无论是正面的还是负面的。

如果您现在就想看更多类似的内容：

• 请查看我的文章，文章讲述了为什么在 React 组件中必须使用 `<T>`className而不是 `<T>` 。class

如果你想在下周看到更多类似的内容：

• 请在 dev.to 上关注我，我将于 1 月 23 日（下周日！）发布React 代码库深度解析系列的下一集！
• 如果你想了解我发表的每一篇文章，以及阅读它们的总结推文，请在Twitter上关注我。
• 此外，您也可以在 hashnode 上关注我，我会尽力每周在那里发布一篇文章，甚至制作 hashnode 独家系列文章。