2024年你需要了解的React库

最新推荐文章于 2024-05-18 21:57:13 发布

codeory

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量947

点赞数 11

分类专栏：前端文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/Tory2/article/details/136862905

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用 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。

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

🎨 CSS 和 UI 库

现在，您已经设置好了项目并安装了您的库，那么您将如何为您的 React 项目设置样式呢？

我提到的所有框架都包含基本的 CSS 支持。如果您想要在 2024 年仅使用 普通 CSS 为您的 React 项目设置样式，那完全没问题。

您可以使用 CSS 样式表或 CSS 模块，但也许目前纯样式方面最受欢迎的选择是使用 Tailwind CSS。Tailwind CSS 需要进行一些设置步骤，但它允许您在组件文件中快速添加样式，只需将预先制作的类链接在一起即可。

ShadCN 是一个非常受欢迎的 UI 库，结合了 Tailwind CSS 和一个名为 Radix UI 的组件库。类似 Radix 的组件库允许您轻松添加组件，而无需自己编写代码。由于 Tailwind CSS 的帮助，ShadCN 因提供对组件外观更大的控制而变得受欢迎。

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

💽 状态管理

React 自带了一些工具，比如 useState 和 useReducer，用于在基本应用程序中管理您的应用程序状态。如果您正在使用 Next.js，在处理服务器组件时，状态管理已移至 URL。尽管有这些选项，您可能需要一种更精确地管理状态的方式。

您可能有许多状态片段，并希望更好地控制状态更新如何渲染您的组件。如果是这样，您可以选择专门的状态管理库。

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

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

🐕 数据获取

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

在 2024 年，在 React 应用程序中从服务器获取数据的最佳方式仍然是 React Query 或 Tanstack Query，如今它被称为 TanStack Query。TanStack Query 不仅提供了对数据的精细控制，包括何时获取和重新获取数据、缓存等，而且通过方便的自定义钩子，非常容易地更改或变异数据。

另一个可靠的选择是 SWR，它也提供了一个自定义钩子来处理查询和变异，但在提供的功能方面更简单。您可以选择任何一个，使用 fetch API 获取数据并执行您的 HTTP 请求都不会有错。

🧭 路由

如果您正在使用 Next.js、Remix 或 Astro 等框架，则已经处理了您的路由。它们都提供了内置的方式来在项目中创建路由或页面。

对于像 Vite 或 Create React App 等客户端渲染的 React 应用程序，您将需要选择一个路由库。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 年，普遍偏好于 SQL 数据库（如 MySQL 或 PostgreSQL）而不是 NoSQL 数据库（如 MongoDB 或 Firebase）。

对于您的数据库，要与数据库通信，您将使用纯 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 年，它已经不再定期更新。

未来，一个可靠的拖放替代方案是使用 DnD Kit。它轻量级、非常灵活，文档包含了许多非常有用的示例，涵盖了您在实现拖放时可能遇到的每种情况。

📱 移动应用

如果您想构建移动应用程序，对于 React 开发人员来说，一直以来的库都是 React Native。有一些令人兴奋的库正在推动 React Native 的边界，以扩展到 Web。

Expo 是一个类似于 Vite 的工具，但用于制作移动 React 应用程序。它具有诸如快速刷新之类的出色功能，并且通过 Expo Go，您可以在开发时轻松在自己的设备上运行项目。Expo 让将您的移动代码库部署到 Web 上变得更容易。

另一个项目的最终目标是 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 应用程序分开。