组件库是一组低级通用组件，是每个应用程序所需的乐高积木。比如按钮、日期选择器和自动完成。

当大多数开发者谈论组件库时，他们通常指的是第三方组件库。最受欢迎的第三方组件库是 Material UI。

说实话，我不推荐在大多数情况下使用这些工具。它们在一些有限的用例中（例如原型设计、构建内部工具）可能有用，但我个人认为它们不适合生产应用程序。

为什么不呢？我写了一篇博客文章来回答这个问题。如果你想了解我对此主题的完整看法，我建议你去读一读！

• 你不需要一个 UI 框架

这里是最关键的一点：很少有科技公司实际上依赖这些工具。如果你的目标是成为一名 React 开发者，你需要知道如何在不依赖这些工具的情况下构建应用程序。

我在 6 家科技公司工作过，其中没有一家使用过像 Material UI 这样的工具。*通常，我们会构建自己的第一方组件库。在 DigitalOcean，我们构建了 Walrus。在 Khan Academy，我们构建了 Wonder Blocks。

设计系统

要理解为什么很少有以产品为中心的公司使用第三方组件库，我们需要谈谈设计系统。

设计系统赋予品牌独特的身份。它是一系列规则，规范了产品的外观、感觉和行为。它包括颜色和排版样式的标记，以及特定 UI 元素的详细设计。

设计系统由设计师使用设计软件（如 Figma 或 Sketch）构建。他们将这些文档提供给我们开发者，以便根据他们的设计实现组件。

从类比的角度来看，设计系统就像一本食谱。组件库就是所需的准备好的食材——切好的番茄、打成泥的胡萝卜。然后，网络应用就是完成的菜肴。

问题在于：第三方组件库内置了自己的设计系统。

例如，Material UI 使用了谷歌的“Material Design”系统。这是一种非常特定的美学，被谷歌官方应用程序在网页和安卓上广泛使用。

现在，第三方组件库确实允许我们自定义/调整样式，但以这种方式更换整个设计系统将会非常困难和烦人。我与几位尝试过这样做的开发者交谈过，他们都对此感到后悔。

底线是：很少有科技公司依赖像 Material UI 这样的“预样式”组件库，因为他们希望对品牌/美学拥有完全的控制权。因此，为了更好地为你作为 React 开发者的实际工作做准备，我们也不会使用这些工具。

应用程序结构

在构建像 Wonder Blocks 这样的第一方组件库时，组件库通常是一个独立的项目：它有自己的 git 仓库、自己的登录页面和自己的文档。

当我们的组件需要在多个项目中共享时，这很有用，但老实说，这会增加很多摩擦。

在本课程中，我们将重点关注我在实际产品中使用的策略，比如这个课程平台。我将我所有的组件，从各个领域，保存在一个目录中。

为了好玩，我截取了这个课程平台前几个组件目录的屏幕截图，并根据它们在光谱上的位置标记了一些。

带有单个紫色星号 * 的组件是最低级别的组件。它包括您在任何组件库中会找到的通用组件，如 Breadcrumbs ，但也包括我在项目中使用的一些更有趣的东西，如 Boop。

向上移动到更高的层次，标记为 ** 的组件是稍微高级一些的东西，比如 AccountDropdown ，它在右上角渲染这个家伙：

最后，我有标记为 *** 的高级组件，比如 AccountPage ，它渲染了账户页面上的所有主要内容。

将所有东西混在一起可能看起来有点混乱，但这是我最喜欢的工作方式。在“组件库组件”和“其他所有东西”之间没有虚假的二元对立。这是一个光谱，每个组件在光谱上都有一个位置。我需要的所有组件都在我指尖触手可及，我可以自由地组合和增强它们。

最后一点：这些目录中有些包含多个组件。例如， AccountPage 包含以下文件：

这让我可以将相关内容放在一起。我知道 MyAccountInfo 组件永远不会在 AccountPage 组件之外使用，因此将它放在我的 /src/components 目录中是没有意义的。