在本文中，我们将介绍 5 个库，它们可以解决 React 开发中一些最常见的痛点（例如数据获取、样式、可访问性和状态管理），从而对您的 React 开发体验产生积极影响。
（更|多优质内|容：java567 点 c0m）
介绍
掌握 React 的基础知识很重要。事实上，无需大量额外的库，您就可以取得很大的成果。但是有一些基础工具可以将您的 React 开发体验提升到一个新的水平。这些库解决了 React 开发中最常见的痛点，例如数据获取、样式、可访问性和状态管理，并且它们以最小且非侵入的方式实现。这使得您可以在整个代码库中逐步采用。
我们列出了五个我们认为您应该了解的此类库。
为什么这很重要
共享开发工具并影响开发人员体验非常重要。当开发人员能够使用正确的工具和资源时，他们可以花更多的时间进行构建和创造，而减少分心、开销和挫折的时间。
这就是为什么我们总是在寻找有用的项目来分享，这也是为什么我们最近推出了自己的开源工具“Preevy”，github：/livecycle/preevy。
开发人员使用 Preevy 轻松创建可共享的预览环境，并更好地与其他人就最新更改进行协作。
你能看看Preevy并给我们留下一颗星星吗？它确实帮助我们继续向开源社区贡献有用的工具和内容。
谢谢❤️❤️❤️！
现在，我们的介绍已经结束，让我们开始了解这些工具的全部内容。
动图
TanStack React 查询
github：/TanStack/query
简而言之，React Query 使在 React 中获取数据成为一种更好的体验。但它本身并不是一个数据获取库。相反，它是一个处理异步服务器状态的状态管理库。您为其提供了一个异步函数，然后用于获取数据。然后，该useQuery钩子为您提供了一堆有用的实用程序来处理异步函数：
-
加载标志
-
结果缓存
-
结果失效和重新获取
这听起来没那么严重。但它对大型代码库的影响不可低估。通常，代码库具有大量逻辑来全局共享获取结果、在数据更改时刷新这些结果、触发获取数据等等。使用 React Query 时，大部分内容都不再需要。缓存意味着您可以在整个应用程序中调用挂钩useQuery，并且数据在所有事件之间共享。
健康）状况
github：/pmndrs/zustand
每个 React 开发人员都知道在应用程序中共享状态所涉及的痛苦。当第一次遇到这个问题时，您不可避免地会在组件树上“钻取”数据。不用说，这不会产生干净的代码，从长远来看也是不可持续的。
值得庆幸的是，React 提出了Context 提供者来解决这个问题。如果您需要做的只是在组件树中传递一些值，那么上下文就非常有用。但对于更复杂的全球商店来说，它可能会变得很麻烦。两者都是因为开发人员需要小心性能影响，而且一些开发人员不太喜欢它的 API。
如果您想从 Context 进行设置，Zustand 是您的最佳选择。它提供了一个极其简单的 API，可让您创建具有值和函数的商店。然后，您可以从应用程序中的任何位置访问该存储以读取和写入值。包括反应性！如果您想在存储中存储嵌套对象数据，请考虑使用Immer和 Zustand 来轻松更改嵌套状态。
成帧器运动
github：/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)
github：/joe-bell/cva
TailwindCSS 已迅速成为 React 应用程序样式的主要方式。但用它构建可重用的 UI 元素可能是一个挑战。假设您使用 Tailwind 创建自己的自定义样式按钮。由于您想在整个应用程序中重用它，因此您创建了一个组件。但现在您需要该组件的多个变体。主要风格和次要风格。所以现在您需要根据 prop 值将 Tailwind 类组合在一起。现在您还需要不同颜色和不同尺寸的按钮。因此，添加一些 props 甚至更多条件逻辑来找出 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 会找出正确的样式组合。我们甚至可以指定默认变体以使某些属性成为可选的。
基数用户界面
github：/radix-ui/primitives
如果您喜欢构建完全自定义样式的界面，但不想处理从头开始开发高保真可访问 UI 组件的复杂问题，Radix UI 适合您。该库附带了各种常用的 UI 组件。例如对话框、复选框和下拉菜单。但有一个转折。
虽然组件包含所有逻辑和交互性，但它们的样式为零。这意味着您可以完全控制自己设计组件的样式。这使您能够构建一个真正的自定义 UI 系统，该系统与其他网站不同。在完全控制样式的同时，Radix 会为您完成所有其他工作。所有组件都可以完全访问 - 例如通过键盘导航。
如果您喜欢 Radix 的灵活性，但又不想从头开始设计所有内容，那么您应该检查一下shadcn/ui 。它是一个构建在 Radix 和 Tailwind 之上的完全模块化的组件库。您可以将代码直接复制到您的项目中并根据您的喜好进行修改，而不是安装 NPM 包。
包起来
本文讨论的库可以帮助您将 React 应用程序提升到一个新的水平。采用它们将帮助您的应用程序为用户和开发人员提供更好的体验。您可以在项目中逐步采用所有这些方法，而不是进行一项重大更改。而且它们上手非常简单。因此，在开始编码之前无需花费数小时来研究文档。
希望您觉得这有帮助！