2021年如何选择合适的React组件库工具

React 生态系统非常庞大，这没什么不好。你可以自由选择你认为适合你产品的技术。但是该如何选择呢？嗯，你得全部都试一遍😅

在本系列文章中，我将介绍一些目前正在积极开发并已准备好接受新用户的工具。这并非指导您如何立即创建一个新的组件库，而是精选一些值得关注并考虑在 2021 年使用的工具。

2021年如何穿搭？

在我们开始之前……我们需要决定一件非常重要的事情……

我曾使用纯 CSS 和 CSS-in-JS 开发过不同的 Vue 和 React 设计系统，因此对设计系统工具已经形成了一些看法。现在是时候承认了：我喜欢 CSS-in-JS。在经历了几个月的“折磨”之后，我意识到使用第三方管理器将 props 映射到最终样式所带来的好处远远大于运行时开销。而对于组件库来说，管理样式是其目标之一，因此它是必不可少的。

但可供选择的选项实在太多了：

• styled-components和emotion是两个众所周知的选择，但我们知道现在还有一些更新、更优秀的库。
• 可能无需编写任何运行时代码，CSS 在构建时预先构建。
• 它使用glazetreat，但内置了实用性优先的方法（类似于Tailwind CSS——您可以组合类来设置元素样式，而不是为每种情况创建新类）。
• Linaria运行时为 0，styled-components语法
• @compiledCSS in JS会智能地预构建组件，以便注入样式并使用哈希类名，因此运行时成本为 0，速度非常快。

到这时，你可能觉得大多数工具都大同小异。虽然它们@emotion拥有styled-components最大的用户群，但所有新出现的工具都源于对更快运行速度的需求，它们在构建时就完成了大部分工作。因此，我们要介绍一个闪亮的新秀：Modulz的Stitches。我立刻就喜欢上了它，因为它：

• 它具备预编译 CSS-in-JS 解决方案的所有优点（对 SSR 友好、运行时占用少、性能好）。
• 生成原子 CSS，因此您的 CSS 不会随着应用程序的扩展而增长。
• 安装简便——因为它在运行时管理样式，所以您无需在两者之间进行选择rollup，也webpack无需费心处理babel插件的执行顺序或 CRA/Next/Gatsby 设置。
• 支持受人喜爱的styled-system-kind 工具和令牌

2021年如何编写文档

呼，这选择简单多了，对吧？
没错，但也不完全是。
所以，我们真正想要的是使用.mdx这种格式来编写文档。因为它是一种易于维护和扩展的文档格式。

• 我想最流行的选择和首选方案应该是Storybook，它最近发布了第六个主要版本，带来了许多改进和一些弃用（再见knobs）。它支持 MDX 格式，还可以解析组件的源文件来显示 props 表。但说实话……它很枯燥。我们不希望人们访问我们的文档页面，看到 Storybook 就觉得我们不认真对待设计系统文档，好像我们不在乎似的。我们很在乎！
• 《恐龙医生2》总是近在咫尺。
• docz已经很久没有更新了，启动一个有很多弃用警告的新项目令人担忧。
• React Styleguidist对于那些只想完成工作的人来说，是一个略显乏味的选择。

但我们将选择dokz：

• 开箱即用，外观不错。
• 它具有很高的可定制性。
• 它很容易使用

最终，我们的选择其实并不重要，因为mdxjs这是一个独立的项目，所有这些工具都使用它。所以mdx无论我们的文档网站使用什么引擎，格式都是可移植的。

无障碍

我想这是你在开始编写新的组件库之前应该考虑的最重要的事情。

从零开始构建并维护一个易于访问的设计系统成本很低。但要让现有的设计系统（以及使用它的应用程序）变得易于访问，成本却极其高昂。

问题在于，实现无障碍设计并非易事。相关知识尚未普及，企业往往只有在客户开始抱怨时才愿意投入资源，设计师也常常将无障碍设计视为事后考虑。但如果我们希望产品成功，就必须事先考虑无障碍设计。下面列举几个我们的组件库可以帮助实现无障碍设计的功能：

• 使用对比度足够的易辨识颜色。
• 自动分配或强制分配标签和ARIA 角色
• 确保我们的组件和组件组合（Modals，Selects）可通过键盘访问

由于无障碍设计并非一蹴而就，而是一项持续的投入，因此，如果能有一个随着时间推移不断改进的解决方案，那就太好了。非常感谢发布Adobe。react-aria它是一套软件包，可以帮助您使自定义组件具备无障碍功能！而且文档也非常棒。您不仅可以看到如何使用软件包，还能了解它的功能和优势。

那么，我们将在 2021 年将其部署在哪里呢？

我见过很多不同的方案，但Vercel和Next.js提供的价值是无与伦比的。这就像你找到了自己最喜欢的冰淇淋口味，从此以后就再也不想吃别的了。

看来我们已经完成了这里的工作，可以开始真正的开发了！