2021 年你需要了解的顶级 React 库

上次我们稍微了解了 React 的背景和一些内置功能。正如承诺的那样，现在是时候看看一些可选工具了。与 Vue 和 Angular 一样，组件在这里扮演着重要的角色，你可以像往常一样创建自己的组件，也可以使用快速发展的社区开发的一些组件。让我们来看看在 2020 年结束之前你应该了解的 React 库。

基于 React 的框架

如果您打算使用 React，很可能需要在 Gatsby.js 和 Next.js 这两个入门框架之间做出选择。React 本身仅适用于客户端，不提供服务器端渲染，而这两个框架则构建于 React 之上，并提供 SSR/SSG 功能。两者都遵循 JAMStack 架构，并为您提供了有助于加快和简化开发流程的样板。关于它们的相似之处就介绍到这里，让我们来看看选择的关键点：

• Gatsby.js：在构建时通过服务器端生成器生成 HTML，这意味着您无需 Node.js 服务器来处理渲染，构建后即可立即获得 HTML 文件。数据获取通过 G​​raphQL 处理，这有其优势（您只需获取所需的数据，从而节省资源和时间），但也将您与 GraphQL 绑定，而并非所有人都喜欢或愿意使用 GraphQL。Gatsby.js 的典型用例包括 Figma.com、React 官方网站和 State of Javascript。

• Next.js：通过服务器端渲染页面，这需要 Node.js 服务器来运行应用程序并处理动态 HTML 渲染。如果您不喜欢 Next.js，它从 9.3 版本开始也支持 SSG。使用什么数据获取完全由您决定，您甚至可以使用 GraphQL。Next.js 的典型应用包括 TikTok、Hulu 和 Twitch 移动版。

资料来源：undraw.co

状态管理

状态管理是任何现代 React 应用中最关键的部分。大多数情况下，它是开发者在开发前端项目时面临的最大挑战，尤其是在开发大型复杂的企业级商业应用时。状态管理是一项非常复杂的任务，需要借助外部库才能妥善处理，因为在某些时候，React 本身将无法再提供令人满意的解决方案。

• Redux：一个可预测的独立 JavaScript 应用状态容器，可帮助您编写行为一致且可在不同环境中运行的应用程序。作为一个独立的库，即使您尚未设置 UI，也可以使用 Redux。Redux 可以与任何 UI 框架（例如 React）配合使用。在 React 中，您可以将 UI 描述为状态函数，并让 Redux 跟踪组件状态并根据 UI 操作进行相应更新。在 React 状态管理方面，Redux 绝对是最受欢迎的选择，NPM 上每周下载量近 500 万次。

• MobX：一个简单、可扩展的状态管理解决方案。它比 Redux 更易学易用，专注于帮助开发者用更少的样板代码开发更简洁的应用程序。其主要目标是通过映射状态和派生类之间的关系来减少 bug 数量，同时保持引用完整性。另一个优点是它可以在客户端或服务器端使用，并且作为一个 JavaScript 库，可以让你保留 JS 现有的实用功能。

资料来源：undraw.co

表格

大多数 Web 和移动应用中都存在表单。与 Angular 和 Vue 不同，它们都提供了开箱即用的表单验证方式，而 React 则要求你自行处理所有表单验证。幸运的是，有一些库正在努力帮助你解决这个问题。

• Formik：是 React（以及 React Native）最受欢迎的表单库。Formik 包含数十项微功能，例如不同类型的验证、API 错误处理、自动保存表单数据等等。它凝聚了 React 社区在 UI、安全性、可访问性等方面多年的经验。使用 Formik，您可以专注于产品开发，而无需为表单的方方面面而苦恼。它是一个经过充分测试和高度优化的解决方案，可以减少表单中出现意外错误和边缘情况的可能性。

• React Hook Forms：一个轻量级的 React 表单库，让您能够以极少的代码实现令人惊叹的效果，这使得它非常注重性能。React Hook Forms 经过优化，通过为开发人员提供隔离组件重新渲染的方法，消除了组件不必要的重新渲染，从而提升了移动或 Web 应用程序的性能。它能够为您的应用程序提供高性能、灵活、易于使用和管理的表单。

资料来源：undraw.co

测试

测试驱动开发 (TDD) 是当今应用程序开发的主流方法之一。由于它能够降低未来出现重大 bug 的可能性，因此越来越受欢迎。测试驱动开发的一个明显缺点是，产品上市所需的时间通常比行为驱动开发方法更长。幸运的是，一些实用的 React 库可以让编写测试变得轻松许多。

• Enzyme：一款 JS 测试工具，可让您轻松测试 React 组件。您可以根据输出操作、遍历，甚至以某种方式模拟运行时。Enzyme 由 AirBnB 内部开发，并于 2015 年作为开源项目发布。该工具旨在提供直观的 API，其灵感源自 jQuery 的 DOM 操作和遍历 API，旨在尽可能简化操作。

• React 测试库：一款让您无需依赖 React 组件实现细节即可进行测试的工具。这种方法有助于提高可访问性，因为它让您站在 React 应用最终用户的立场上。其指导原则是，您的测试越符合软件的预期使用方式，运行起来就越有信心。它比 Enzyme（功能更多）更轻量级、更容易上手，并且根据 React 文档，它是推荐的测试应用。

资料来源：undraw.co

用户界面

如果您想要开箱即用的 React 组件，社区里有很多实用的库值得一试。这些库能提供实用且可复用的解决方案，在各个方面为您提供帮助，从而真正节省开发时间和精力。

• React Bootstrap：一款用 React 代码取代 Bootstrap JavaScript 的 UI 工具包。它可以说是快速构建 UI 的最佳方式，因为它拥有数千个现成的主题和资源。难怪它是最受欢迎的组件库之一，NPM 上每周下载量超过 70 万次。

• Material UI： Google 基于其著名的 Material Design 协议创建的一套组件。这些组件本质上是自维护的，并且只注入需要显示的样式。它还提供了大量可访问、可配置的 UI 小部件以及随时可用的网站模板。这显著提升了性能，尤其考虑到该库定期更新，并拥有强大的社区支持（GitHub 上超过 6 万颗星），并且可能是最受欢迎的组件库，NPM 上每周下载量超过 160 万次。

• Rebass：一个功能强大的小组件库。Rebass 仅包含 8 个组件，大小仅为 4 KB，但却能用于创建一组强大的可主题化 UI 元素。它基于 Styled System 库，致力于快速启动您的开发流程。如果您不想过度依赖社区组件库，或者打算创建自己的自定义 UI，那么 Rebass 将非常方便。

• Semantic UI React： Semantic UI 的官方 React 集成。它提供了基于 jQuery 的 React 代码重新编写的所有附加功能。它附带大量专为简化使用和生成语义友好代码而设计的预构建组件。

• Ant Design：一套面向企业级产品的设计系统。它基于 Ant Design 项目，提供 60 多个基于开发者开发的设计语言精心打造的高质量组件。这些组件可定制，并支持数十种语言。其重点是帮助企业内部桌面应用构建丰富的交互式 UI（此外，还有适用于移动应用的 Ant Design Mobile）。

资料来源：undraw.co

加入吧！

当然，这只是一些流行的库，还有更多，每个人都能轻松找到一些有用的。大多数库并不复杂，只需花一点时间就能掌握，考虑到它们通常能显著加快和简化开发流程，这段时间是值得投入的。自己动手创建所有内容固然有其好处，但总而言之，快速发展且规模庞大的 React 社区可能是使用它的最大优势。

Michał Tyszkiewicz为GraphQL 编辑器博客撰写的客座博文

想要加快您的 GraphQL 模式开发吗？

GraphQL 编辑器是一款支持工具，既适用于高级 GraphQL 用户，也适用于 GraphQL API 新手。我们一体化的 GraphQL 开发环境将帮助您更快地构建、管理和部署 GraphQL API。免费试用 GraphQL 编辑器！