Web前端：2022年每个项目都应该使用的5个React库

有上百个很棒的React库可供选择，但是你的React项目最需要哪些库呢?在本文中，我们将分解你的React项目所需的五个库。

1.更快的Create-React-App

如果你想创建一个React项目，你可能会使用像Create-React-App这样的工具。

虽然Create-React-App是一个令人惊叹的工具，并允许你通过运行一个命令来创建React项目，但它有一个新的竞争对手—Vite。

Create-React-App使用Webpack来构建我们的React开发代码。但是已经出现了在速度上与Webpack竞争的构建工具。Vite就是这样一个构建工具，它使用一个更快的捆绑器，称为esbuild。简而言之，它利用了浏览器的本地ES模块来获得更快的开发体验。

在开发中运行React时，Vite比Create-React-App快很多倍。如果你有时对Create-React-App需要多长时间启动感到烦恼，一定要看看Vite。

最重要的是，我强烈推荐这个工具Create-Next-App。这允许我们非常快速地创建下一个JS项目。是的，Next.js是一个框架，但它是一个React框架，需要的依赖性非常少。事实上，它只需要依赖React、React DOM和Next。

创建下一个React项目时，请务必查看Vite和Create Next App。

2.数据提取库

对于任何React应用程序，我们都必须管理一些服务器状态。这意味着我们从外部服务器(如API)获取数据，并将这些数据引入我们的应用程序，然后将这些数据与应用程序组件的本地状态相结合。

许多React开发人员，不管他们的技术水平如何，都很难弄清楚如何用本地状态管理服务器状态。大多数开发人员求助于像Redux这样的库作为解决方案。

在过去的一年中，出现了几个库，使得在React组件中管理服务器状态变得非常容易。这些是React Query和软件SWR。他们通过给我们一些非常有用的自定义钩子来帮助我们获取数据。但最重要的是，它们有自己的内部缓存。这种内部缓存允许我们非常容易地将外部数据与我们的应用程序集成。我们将每个查询分配给一个自定义键。要读取或更新我们获取的任何数据，我们只需要引用那个键!

除了改进我们的状态管理之外，获取数据也变得更加容易，它们包括许多很棒的工具，允许我们做诸如重新提取查询、创建分页查询、无限查询等等。

简而言之，如果你在React应用程序中跨多个组件获取数据，一定要使用这些较新的数据获取库之一。

3.一个非常简单的状态管理库

说到管理全局应用状态，Redux一直是首选。

它帮助React开发人员将状态值分离成一个共享对象值，可以在应用程序的任何组件中读取和更新该值。

然而，Redux带来了一些概念性的包袱。为了正确设置Redux并管理我们的状态，我们必须理解并编写单独的操作、缩减器和选择器。

Redux有一些新的竞争对手，他们试图毫不费力地给我们提供该库的几乎所有好处，这些是Zustand和Jotai。它们都非常相似，它们的强大之处在于，它们是用钩子优先的方法创建的，用于处理状态。这意味着一旦创建了存储，就可以通过将其作为钩子调用来读取其任何值。

Zustand和Jotai使状态管理变得更简单，因为你不需要将存储分为动作、减少器和选择器。

如果你想要更新状态，请在你的存储中编写一个函数来执行此操作，并在你的组件中使用它。如果你想选择你的状态的一部分，使用你的存储作为钩子并获取你想要的状态对象的属性。

另外，你不需要任何额外的库来执行异步操作(不像Redux，需要Redux Thunk或Redux Saga)。

最后，你不需要用上下文提供者包装整个组件树，所以除了创建你的存储并在你的组件中使用它之外，基本上不需要任何设置。

4.强大的组件库

React旨在创建令人印象深刻的用户界面。因此，我们需要库来帮助我们实现这个目标。

有大量的组件库为我们提供定制的、设计良好的、开箱即用的组件。然而，面对如此多的选择，你会选择哪一个呢?

如果你希望能够构建外观精美且功能相同的应用程序，你可以查看大量维护良好的库，如Ant Design, Material UI，以及Chakra UI。

所有这些库都有大量的组件，甚至还有专用的图标库。但是可以说，它们最重要的是它们有一个直观的语法，允许我们更容易地构建有吸引力的组件。

大多数开发人员选择组件库是因为它们的外观和特性，但是最好的库也包括额外的工具，使我们的应用程序具有功能性。

5.基于钩子的表单库

你构建的每个React应用程序可能都有一个表单。不用说， 构建表单是一件痛苦的事情!

不仅要创建表单本身，还要添加一些棘手的东西，比如输入验证和错误处理。

2022年你可以使用的最好的表单库是React Hook Form和Formik。

在内置钩子的帮助下，它们使得构建可重用的功能表单变得非常容易。甚至是具有复杂条件的表单，如相互依赖或需要异步验证的字段。

值得注意的是，Formik已经发生了变化，我们不再需要使用它以前使用的传统渲染道具模式。

你可以使用Formik包中名为useFormik的自定义挂钩，它允许我们借助同名的自定义挂钩构建表单。

值得注意的是，在这些库之上，你可能需要的唯一东西是一个验证库。

Formik和React Hook Form都旨在非常容易地与验证库(如库Yup)集成。如何做到这一点在他们的文档中非常简单。