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/
