2023 年，5 个 React 库助你项目更上一层楼

TL;DR

在本文中，我们将介绍 5 个库，它们可以解决 React 开发中最常见的一些痛点，例如数据获取、样式、可访问性和状态管理，从而对您的 React 开发体验产生积极影响。

介绍

掌握 React 的基础知识至关重要。事实上，即使没有大量的额外库，你也能走得很远。但有一些基础工具可以提升你的 React 开发体验。这些库解决了 React 开发中最常见的痛点，例如数据获取、样式设置、可访问性和状态管理，并且以极简且非侵入的方式实现。这使得你能够在你的代码库中逐步采用它们。

我们整理了一份清单，列出了我们认为您应该了解的五个这样的图书馆。

为什么这很重要

共享开发者工具并提升开发者体验至关重要。当开发者能够使用合适的工具和资源时，他们可以将更多时间投入到构建和创作中，减少分心、开销和挫败感。

这就是为什么我们一直在寻找有用的项目来分享，也是为什么我们最近推出了自己的开源工具“Preevy”  https://github.com/livecycle/preevy。

开发人员使用 Preevy 轻松创建可共享的预览环境，并更好地与他人协作获取最新更改。

你能看看Preevy并给我们点个星吗？这真的能帮助我们继续为开源社区贡献有用的工具和内容。

谢谢❤️❤️❤️！

现在，介绍完毕，让我们开始了解这些工具的全部用途。

动图

TanStack React 查询

https://github.com/TanStack/query

简而言之，React Query 让在 React 中获取数据的体验更加出色。但它本身并非一个数据获取库，而是一个处理异步服务器状态的状态管理库。你只需提供一个异步函数，它就能获取数据。useQuery然后，该钩子会提供一系列实用工具来处理异步函数：

• 正在加载标志
• 结果缓存
• 结果无效并重新获取

这听起来似乎没什么，但它对大型代码库的影响不容小觑。通常，代码库包含大量逻辑，用于全局共享获取结果、在数据更改时刷新结果、触发获取数据等等。使用 React Query 后，这些逻辑大部分都不再需要了。缓存意味着你可以useQuery在整个应用程序中调用钩子，并且数据会在所有实例之间共享。

立场

https://github.com/pmndrs/zustand

每个 React 开发者都深知在应用程序间共享状态的痛苦。初次遇到这个问题时，你难免会想方设法地在组件树中“钻取”数据。毋庸置疑，这不仅会导致代码不简洁，而且从长远来看也是不可持续的。

值得庆幸的是，React 推出了Context 提供程序来解决这个问题。如果你只需要在组件树中传递一些值，那么 Context 就很棒了。但对于更复杂的全局存储，使用起来可能会很麻烦。一方面是因为开发者需要注意性能影响，另一方面是因为有些开发者不太喜欢它的 API。

如果您想从 Context 进行设置，Zustand 是您的最佳选择。它提供了极其简单的 API，允许您创建包含值和函数的存储。然后，您可以从应用程序的任何位置访问该存储来读取和写入值。并且支持响应式！如果您想在存储中存储嵌套对象数据，可以考虑将Immer与 Zustand 结合使用，以便轻松更改嵌套状态。

帧运动

https://github.com/framer/motion

动画是赋予 React 应用现代精致感的最佳方式之一。但这并非易事。使用 CSS 动画比较棘手，而且代码量很大。相比之下，Framer Motion 提供了强大而简单的 API 来创建自定义动画。它通过一系列钩子和组件原生集成到 React 生态系统中。

例如，此代码即可平滑地实现从圆形到正方形的动画转换：

import { motion } from "framer-motion"

export const MyComponent = () => (
  <motion.div
    animate={{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 270, 270, 0],e      borderRadius: ["20%", "20%", "50%", "50%", "20%"],
    }}
  />
)

数组中的每个值代表相应属性的一个关键帧。动画会循环播放这些关键帧。当然，除了使用 Framer Motion 定义关键帧之外，您还可以实现更多功能。您还可以为布局变化添加动画、处理手势或基于滚动添加动画。

类别差异授权 (CVA)

https://github.com/joe-bell/cva

TailwindCSS 已迅速成为 React 应用程序样式的主要设计工具。但用它构建可复用的 UI 元素却并非易事。假设你使用 Tailwind 创建了自定义样式的按钮。由于你想在整个应用中复用它，所以创建了一个组件。但现在你需要该组件的多个变体，一个主要样式和一个次要样式。因此，你需要根据 prop 值将 Tailwind 类组合在一起。现在你还希望按钮具有不同的颜色和大小。因此，你需要添加一些 prop 以及更多条件逻辑，才能找到正确的 Tailwind 类组合。这很快就会让人感到沮丧。

CVA 是 Class Variance Authority 的缩写。它是一个简单的库，可以让你轻松使用 Tailwind 类名构建可组合的 React 组件。以下是他们文档中的示例：

import React from "react";\
import { cva, type VariantProps } from "class-variance-authority";****\

const button = cva("button", {\
  variants: {\
    intent: {\
      primary: [\
        "bg-blue-500",\
        "text-white",\
        "border-transparent",\
        "hover:bg-blue-600",\
      ],\
      secondary: [\
        "bg-white",\
        "text-gray-800",\
        "border-gray-400",\
        "hover:bg-gray-100",\
      ],\
    },\
    size: {\
      small: \["text-sm", "py-1", "px-2"],\
      medium: \["text-base", "py-2", "px-4"],\
    },\
  },\
  compoundVariants: \[{ intent: "primary", size: "medium", class: "uppercase" }],\
  defaultVariants: {\
    intent: "primary",\
    size: "medium",\
  },\
});

export interface ButtonProps\
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\
    VariantProps<typeof button> {}****\
export const Button: React.FC<ButtonProps> = ({\
  className,\
  intent,\
  size,\
  ...props\
}) => <button className={button({ intent, size, className })} {...props} 
/>;

我们以声明的方式为每个参数值描述按钮样式。然后，CVA 会找出正确的样式组合。我们甚至可以指定默认变体，使某些属性成为可选属性。

Radix 用户界面

https://github.com/radix-ui/primitives

如果您喜欢构建完全自定义风格的界面，但又不想从头开始开发高保真、易访问的 UI 组件，那么 Radix UI 就是您的理想之选。该库附带各种常用的 UI 组件，例如对话框、复选框和下拉菜单。但又略有不同。 

虽然组件包含所有逻辑和交互功能，但它们没有任何样式。这意味着您可以完全控制组件的样式。这使您能够构建一个真正自定义的 UI 系统，使其看起来与众不同。在完全控制样式的同时，Radix 还为您完成了所有其他工作。所有组件均可完全访问 - 例如通过键盘导航。

如果您喜欢 Radix 的灵活性，但又不想从头开始设计所有内容，那么shadcn/ui值得一试。它是一个基于 Radix 和 Tailwind 构建的完全模块化组件库。无需安装 NPM 包，您可以直接将代码复制到项目中并根据自己的喜好进行修改。

总结

本文讨论的库可以帮助您将 React 应用程序提升到一个新的水平。采用它们将为您的应用带来更佳的用户和开发者体验。您可以在项目中逐步采用所有这些库，而无需一次性进行重大更改。而且它们上手非常简单。因此，您无需在开始编码之前花费数小时研究文档。

希望您觉得这有帮助！