一、React Query

https://github.com/TanStack/query

圖3

簡(jiǎn)而言之，React Query 可以使在 React 中獲取數(shù)據(jù)體驗(yàn)更好。其是一個(gè)處理異步服務(wù)器狀態(tài)的狀態(tài)管理庫(kù)，通過(guò)提供了一個(gè)異步函數(shù)來(lái)獲取數(shù)據(jù)。此外，useQuery hook提供了一堆有用的實(shí)用程序來(lái)處理異步函數(shù)：

• 加載標(biāo)志
• 結(jié)果緩存
• 結(jié)果失效和重新獲取

這些特性對(duì)大型項(xiàng)目具有較大價(jià)值。一般情況下，項(xiàng)目中需要在全局共享獲取結(jié)果、在數(shù)據(jù)更改時(shí)刷新這些結(jié)果、觸發(fā)獲取數(shù)據(jù)等等。使用 React Query 時(shí)，很多情況都不需要自己再進(jìn)行處理。緩存意味著您可以在應(yīng)用程序的任何位置調(diào)用useQuery hook，并且數(shù)據(jù)在所有出現(xiàn)的位置之間共享。

二、Zustand

https://github.com/pmndrs/zustand

圖片1

在React開(kāi)發(fā)的程序中肯定會(huì)涉及到組件間狀態(tài)共享，我們可以通過(guò)props來(lái)實(shí)現(xiàn)，但是這并不利于代碼的維護(hù)，后來(lái)React提供了Context Providers來(lái)進(jìn)行組件間狀態(tài)共享，但是對(duì)于復(fù)雜的全局存儲(chǔ)，Context可能會(huì)變的很繁瑣，有可能導(dǎo)致性能問(wèn)題。為了更好的使用Context，可以使用Zustand，其提供了一個(gè)極其簡(jiǎn)單的API來(lái)創(chuàng)建一個(gè)store，可以從應(yīng)用程序的任何位置訪問(wèn)該store并讀取和寫(xiě)入值。

三、Framer Motion

https://github.com/framer/motion

圖5

動(dòng)畫(huà)是賦予React應(yīng)用程序現(xiàn)代和精致感的最佳方式之一。但這并不容易。使用CSS動(dòng)畫(huà)很棘手，可能會(huì)導(dǎo)致大量的代碼。相比之下，F(xiàn)ramer Motion提供了一個(gè)強(qiáng)大但簡(jiǎn)單的API來(lái)創(chuàng)建自定義動(dòng)畫(huà)。它與React生態(tài)系統(tǒng)原生集成，配有一組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%"],
    }}
  />
)

數(shù)組中的每個(gè)值代表相應(yīng)屬性的一個(gè)關(guān)鍵幀。然后動(dòng)畫(huà)會(huì)循環(huán)播放。當(dāng)然，您可以做的不僅僅是使用 Framer Motion 定義關(guān)鍵幀。還可以動(dòng)畫(huà)化布局的更改、處理手勢(shì)或根據(jù)滾動(dòng)進(jìn)行動(dòng)畫(huà)。

四、Class Variance Authority(CVA)

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

圖片2

TailwindCSS已迅速成為為React應(yīng)用程序添加樣式的主要方式。但使用它構(gòu)建可重用的UI元素可能是一項(xiàng)挑戰(zhàn)。例如，使用Tailwind創(chuàng)建了自定義樣式按鈕，該按鈕會(huì)有多種樣式，所以需要根據(jù)props值將Tailwind類(lèi)組合在一起，通過(guò)添加一些props和相應(yīng)條件邏輯以找出Tailwind類(lèi)的正確組合，如果邏輯過(guò)多，將會(huì)變的非常復(fù)雜。通過(guò)引入CVA（Class Variance Authority），可以消除使用Tailwind類(lèi)名構(gòu)建可組合的React組件時(shí)的痛苦，例如：

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} 
/>;

以聲明方式描述每個(gè)參數(shù)值的按鈕樣式，利用CVA 會(huì)找出正確的樣式組合。我們甚至可以指定默認(rèn)變量使某些屬性成為可選的。

五、Radix UI

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

圖片

如果您喜歡構(gòu)建完全自定義樣式的界面，但不想處理從頭開(kāi)始開(kāi)發(fā)可訪問(wèn) UI 組件的復(fù)雜問(wèn)題，那么 Radix UI 適合您。該庫(kù)附帶了各種常用的 UI 組件。例如對(duì)話框、復(fù)選框和下拉菜單。

雖然組件包含所有邏輯和交互，但它們沒(méi)有任何樣式。這意味著完全可以自己控制組件的樣式。這使能夠構(gòu)建一個(gè)與其它網(wǎng)站不同的真正定制的UI系統(tǒng)。在擁有完全控制樣式的同時(shí)，Radix為您完成所有其他工作。所有組件都是完全可訪問(wèn)的，可以通過(guò)鍵盤(pán)導(dǎo)航等方式進(jìn)行操作。

如果您喜歡Radix的靈活性，但不想從頭開(kāi)始設(shè)計(jì)所有樣式，那么shadcn/ui就是您應(yīng)該查看的內(nèi)容。它是一個(gè)完全模塊化的組件庫(kù)，構(gòu)建在Radix和Tailwind之上?？梢詫⒋a直接復(fù)制到項(xiàng)目中并按照自己的喜好進(jìn)行修改，而不是安裝NPM包。

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