2023年提升您React项目的五个库

一、React Query

https://github.com/TanStack/query

图3

简而言之，React Query 可以使在 React 中获取数据体验更好。其是一个处理异步服务器状态的状态管理库，通过提供了一个异步函数来获取数据。此外，useQuery hook提供了一堆有用的实用程序来处理异步函数：

• 加载标志
• 结果缓存
• 结果失效和重新获取

这些特性对大型项目具有较大价值。一般情况下，项目中需要在全局共享获取结果、在数据更改时刷新这些结果、触发获取数据等等。使用 React Query 时，很多情况都不需要自己再进行处理。缓存意味着您可以在应用程序的任何位置调用useQuery hook，并且数据在所有出现的位置之间共享。

二、Zustand

https://github.com/pmndrs/zustand

图片1

在React开发的程序中肯定会涉及到组件间状态共享，我们可以通过props来实现，但是这并不利于代码的维护，后来React提供了Context Providers来进行组件间状态共享，但是对于复杂的全局存储，Context可能会变的很繁琐，有可能导致性能问题。为了更好的使用Context，可以使用Zustand，其提供了一个极其简单的API来创建一个store，可以从应用程序的任何位置访问该store并读取和写入值。

三、Framer Motion

https://github.com/framer/motion

图5

动画是赋予React应用程序现代和精致感的最佳方式之一。但这并不容易。使用CSS动画很棘手，可能会导致大量的代码。相比之下，Framer Motion提供了一个强大但简单的API来创建自定义动画。它与React生态系统原生集成，配有一组hooks和组件。例如，将圆形平滑的变换为正方形：

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 定义关键帧。还可以动画化布局的更改、处理手势或根据滚动进行动画。

四、Class Variance Authority(CVA)

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

图片2

TailwindCSS已迅速成为为React应用程序添加样式的主要方式。但使用它构建可重用的UI元素可能是一项挑战。例如，使用Tailwind创建了自定义样式按钮，该按钮会有多种样式，所以需要根据props值将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 会找出正确的样式组合。我们甚至可以指定默认变量使某些属性成为可选的。

五、Radix UI

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

图片

如果您喜欢构建完全自定义样式的界面，但不想处理从头开始开发可访问 UI 组件的复杂问题，那么 Radix UI 适合您。该库附带了各种常用的 UI 组件。例如对话框、复选框和下拉菜单。

虽然组件包含所有逻辑和交互，但它们没有任何样式。这意味着完全可以自己控制组件的样式。这使能够构建一个与其它网站不同的真正定制的UI系统。在拥有完全控制样式的同时，Radix为您完成所有其他工作。所有组件都是完全可访问的，可以通过键盘导航等方式进行操作。

如果您喜欢Radix的灵活性，但不想从头开始设计所有样式，那么shadcn/ui就是您应该查看的内容。它是一个完全模块化的组件库，构建在Radix和Tailwind之上。可以将代码直接复制到项目中并按照自己的喜好进行修改，而不是安装NPM包。

参考文章：https://livecycle.io/blogs/react-libraries/