一、React Query

https://github.com/TanStack/query

圖3

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

• 加載標志
• 結果緩存
• 結果失效和重新獲取

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

二、Zustand

https://github.com/pmndrs/zustand

圖片1

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

三、Framer Motion

https://github.com/framer/motion

圖5

動畫是賦予React應用程序現(xiàn)代和精致感的最佳方式之一。但這并不容易。使用CSS動畫很棘手，可能會導致大量的代碼。相比之下，F(xiàn)ramer Motion提供了一個強大但簡單的API來創(chuàng)建自定義動畫。它與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ù)組中的每個值代表相應屬性的一個關鍵幀。然后動畫會循環(huán)播放。當然，您可以做的不僅僅是使用 Framer Motion 定義關鍵幀。還可以動畫化布局的更改、處理手勢或根據(jù)滾動進行動畫。

四、Class Variance Authority(CVA)

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

圖片2

TailwindCSS已迅速成為為React應用程序添加樣式的主要方式。但使用它構建可重用的UI元素可能是一項挑戰(zhàn)。例如，使用Tailwind創(chuàng)建了自定義樣式按鈕，該按鈕會有多種樣式，所以需要根據(jù)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} 
/>;

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

五、Radix UI

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

圖片

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

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

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

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