2024 年高效开发的 React 生态系统

要使用 React 制作应用程序，需要熟悉正确的库来添加您需要的功能。例如，要添加某个功能（例如身份验证或样式），您需要找到一个好的第三方库来处理它。

在这份综合指南中，我将向您展示我建议您在 2024 年使用的所有库，以轻松构建快速、可靠的 React 应用程序。

🛠️ React 框架

首先，我们如何在 2024 年创建我们的 React 应用程序？

如果你想要一个客户端渲染的 React 项目，你最好的选择是 Vite，它取代了已弃用的 Create React App 工具。

如果您有兴趣构建服务器渲染或全栈 React 项目，Next.js 是最完整、最流行的全栈 React 框架。 Next.js 13 版本引入了应用程序路由器，它为我们提供了服务器组件和服务器操作等功能，使我们能够获取数据并在服务器上渲染 React 组件。

如果 Next.js 的某些功能对您来说有点难以掌握，那么用于制作动态和静态网站的一个很好的全栈替代方案是 Remix。

如果您正在制作一个想要快速加载并主要提供静态内容的应用程序，另一个不错的选择是 Astro。 Astro 允许您将 React 与 Vue 和 Svelte 等其他框架一起使用，这意味着它是与框架无关的，并且旨在向客户端提供最少量的必要 JavaScript，从而实现非常快的加载时间。

📦 包管理器

要安装本指南中列出的所有这些库，您将需要一个称为包管理器的东西。

如果您安装了 Node.js（这是在计算机上本地运行 React 项目所必需的），您可以简单地使用 NPM，这在 2024 年仍然是一个不错的选择。NPM 还有其他替代品，包括 Yarn 和 PNPM。

最新的替代方案是 Bun，它在 JavaScript 世界中迅速变得非常流行。 Bun 既是一个像 Node 一样的 JavaScript 运行时，也是一个包管理器，并且被宣传为 Node 和 NPM 的更快替代品。

🎨 CSS 和 UI 库

现在您已经设置了项目并安装了库，您将如何设计您的 React 项目？

我上面提到的所有框架都包含基本的 CSS 支持。如果你想坚持使用纯 CSS 来设计你的 React 项目，那么到 2024 年就完全没问题了。

您可以使用 CSS 样式表或 CSS 模块，但就纯样式而言，目前最流行的选择可能是使用 Tailwind CSS。 Tailwind CSS 确实附带了一些设置步骤，但它允许您将预制类链接在一起，以便直接在组件文件中快速添加样式。

shadcn 是 2024 年非常流行的 UI 库，它将 Tailwind CSS 与名为 Radix UI 的组件库结合在一起。像 Radix 这样的组件库允许您轻松添加组件，而无需自己编码。 shadcn 之所以流行，是因为它在 Tailwind CSS 的帮助下可以更好地控制组件的外观。

还有许多其他非常流行的功能组件库。 Material UI 以及 Mantine 和 Chakra UI 等其他 UI 仍然很受欢迎。您选择哪一个实际上取决于您希望最终应用程序的外观。我建议尝试一堆这样的 UI 库，看看你最喜欢哪一个。

💽 状态管理

React 具有 useState 和 useReducer 等内置工具来管理基本应用程序中的应用程序状态。如果您使用 Next.js，则在使用服务器组件时，状态管理已移至 URL。尽管有这些选项，您可能需要一种更精确的方式来管理状态的方法。

您可能有很多状态，并且希望更好地控制状态更新如何呈现组件。如果是这样，您可以使用专用的状态管理库。

Zustand、Recoil 和 Jotai 等库都非常相似，允许您通过声明对象的属性和方法来管理状态。这最终是处理应用程序组件状态管理的最简单方法。

如果我必须在 2024 年为我的所有 React 项目选择一个状态管理库，我会选择 Zustand。几乎不需要时间就能学会如何使用它。它还不需要您向应用程序添加提供程序组件，这使得在您喜欢的任何组件中使用都非常方便。

🐕 数据获取

状态管理和数据获取通常是齐头并进的。如果您正在构建客户端渲染的 React 应用程序，您可能需要一个数据获取库。

2024 年，在 React 应用程序中从服务器获取数据的最佳方式仍然是 React Query 或现在的 Tanstack Query。 TanStack Query 不仅可以让您对获取数据、何时获取和重新获取数据、缓存进行细粒度控制，还可以非常轻松地更改或变异数据。

另一个可靠的替代方案是 SWR，它还提供了一个自定义挂钩来处理查询和突变，但就其提供的功能而言，它要简单得多。选择其中任何一个并获取数据并使用 fetch API 执行 HTTP 请求都不会出错。

🧭 路由

如果您使用的是 Next.js、Remix 或 Astro 等框架，那么您的路由已经处理好了。所有这些都带有内置的方法来在项目中创建路由或页面。

对于客户端渲染的 React 应用程序（例如使用 Vite 或 Create React App 制作的应用程序），您将需要选择一个路由库。 React Router 仍然是最受欢迎的选择。它可以满足您可能有的每一个路由需求。由于其使用 loader 属性加载数据的功能，它也非常先进。 loader 属性允许您获取给定路线的数据，而无需使用 React Query 等外部库。

Tanstack Router 是一个新兴的库，它似乎具有同样出色的功能。 Tanstack Router 被设计为完全类型安全，并为数据获取提供了很好的默认设置，就像 React Router 版本 6 提供的那样。

虽然 Tanstack Router 有点新，但任何一个选择都不会出错，如果您已经在应用程序中使用 Tanstack Query 或 SWR，那么它是完美的搭配。

🔒 认证

虽然身份验证是由我们项目的服务器端处理的，但值得了解哪些库在客户端和服务器上与 React 项目集成得最好。

到 2024 年，Supabase已成为一种非常强大的身份验证解决方案，并提供与 React 应用程序的轻松集成，无论是在服务器上（例如 Next.js 项目）还是在客户端上。在过去的几年中，出于类似的原因选择了 Firebase，但它更难集成到服务器端。

如果您使用 Next.js，您可以使用大量选项，例如 NextAuth、Clerk 和新来者 Lucia。不幸的是，今年 Next.js 还没有内置的身份验证库，但也许将来会有一个。

与此同时，我个人将使用 Supabase，并强烈建议您通过他们的文档查看它们。

🥞 数据库和 ORM

与身份验证非常相似，您的数据库将并且应该在很大程度上与您的服务器端代码进行交互。

Supabase 和 Firebase 等数据库不需要您拥有服务器。您可以直接在客户端中获取和更改数据，并且可以在仪表板中添加安全规则，以确保根据用户的身份验证状态和角色允许或不允许某些类型的请求。

除了这两个选项之外，如果您使用传统服务器或全栈框架，还有无数的选项。到 2024 年，人们显然更倾向于使用 MySQL 或 PostgreSQL 等 SQL 数据库，而不是 MongoDB 或 Firebase 等 NoSQL 数据库。

对于数据库，要与数据库对话，您可以使用纯 SQL 或允许您使用自定义查询语言的 ORM。 ORM 的流行选项包括 Prisma 或 Drizzle。两者都允许您生成类型安全的代码，以便您知道将返回哪些数据，并且两者都可以与您选择的 SQL 或 NoSQL 数据库很好地集成。

🕰️ 日期和时间

当您使用 JavaScript 时，始终建议您拥有一个日期库。 JavaScript 的日期构造函数是不可预测的，并且几乎不可能可靠地处理时区等事物。

有很多选择，但我倾向于使用 date-fns 或 day.js。两者都是非常小但内容丰富的库，允许您在浏览器或后端操作 JavaScript 日期。任何一个都不会出错。

📋 表格

在大多数情况下，如果您只是使用简单的注册表单构建应用程序，则可能不需要表单库，通常只需要在输入中使用 required 属性即可。

如果您正在构建更复杂的东西并且有很多表单，React Hook Form 是一个功能齐全的表单库，它允许您使用很少的代码来验证表单输入并显示错误。

其他表单库，例如 Formik 和 React Final Form，将为您提供相同的功能，但 React Hook Form 更好一些，因为它具有基于钩子的更现代的 API，并且通常需要更少的代码。

☔️ 拖放

当谈到向应用程序添加拖放功能时，您几乎肯定需要第三方库。过去最受欢迎的选择是 React Beautiful DnD。自 2024 年起，它不再接收定期更新。

展望未来，拖放的可靠替代品是使用免打扰套件。它是轻量级的，非常灵活，并且文档包含一堆超级有用的示例，涵盖了您在实现拖放时可能遇到的每个用例。

📱 移动应用程序

如果你想构建一个移动应用程序，React Native 一直是 React 开发人员可以使用的库。有一些令人兴奋的库突破了 React Native 的界限，扩展到了网络。

Expo 是一个类似于 Vite 的工具，但用于制作移动 React 应用程序。它具有快速刷新等出色功能，并且借助 Expo Go，您可以在开发项目时轻松在自己的设备上运行项目。 Expo 使您可以更轻松地获取移动代码库并将其部署到网络上。

这是 Tamagui 等其他项目的最终目标，如果您想制作一个在 Android、iOS 和 Web 上运行的真正的本机应用程序，您也应该检查一下。

如果您已经编写了要在浏览器中运行的 React 应用程序，则使其作为本机应用程序运行并在 Apple App Store 或 Google Play Store 上启动的最快方法是使用 Capacitor.js。

🚀 部署

部署 React 应用程序的方法比以往更多。Vercel 可能是部署 React 应用程序最简单的平台，无论是客户端渲染还是服务器渲染。它们几乎支持您能想到的所有框架，包括非 JavaScript 语言。他们有一个慷慨的爱好计划，同一领域的竞争对手包括 Netlify 和 Cloudflare Pages。

Cloudflare Pages 的设置可能有点棘手，特别是如果您有一个全栈 React 项目，但就价格而言，它是所有这些选项中最慷慨的。如果你不介意购买服务器，你可以使用 Railway 或 Render 之类的东西，如果你有一个与你的 React 应用程序分开的服务器，那么部署到它是很棒的。