長話短說

在本文中，我們將介紹 5 個庫，它們可以解決 React 開發(fā)中一些最常見的痛點（例如數(shù)據(jù)獲取、樣式、可訪問性和狀態(tài)管理），從而對您的 React 開發(fā)體驗產(chǎn)生積極影響。

（更|多優(yōu)質(zhì)內(nèi)|容：java567 點 c0m）

介紹

掌握 React 的基礎知識很重要。事實上，無需大量額外的庫，您就可以取得很大的成果。但是有一些基礎工具可以將您的 React 開發(fā)體驗提升到一個新的水平。這些庫解決了 React 開發(fā)中最常見的痛點，例如數(shù)據(jù)獲取、樣式、可訪問性和狀態(tài)管理，并且它們以最小且非侵入的方式實現(xiàn)。這使得您可以在整個代碼庫中逐步采用。

我們列出了五個我們認為您應該了解的此類庫。

為什么這很重要

共享開發(fā)工具并影響開發(fā)人員體驗非常重要。當開發(fā)人員能夠使用正確的工具和資源時，他們可以花更多的時間進行構建和創(chuàng)造，而減少分心、開銷和挫折的時間。

這就是為什么我們總是在尋找有用的項目來分享，這也是為什么我們最近推出了自己的開源工具“Preevy”，github：/livecycle/preevy。

開發(fā)人員使用 Preevy 輕松創(chuàng)建可共享的預覽環(huán)境，并更好地與其他人就最新更改進行協(xié)作。

你能看看Preevy并給我們留下一顆星星嗎？它確實幫助我們繼續(xù)向開源社區(qū)貢獻有用的工具和內(nèi)容。

謝謝??????！

現(xiàn)在，我們的介紹已經(jīng)結束，讓我們開始了解這些工具的全部內(nèi)容。

動圖

TanStack React 查詢

github：/TanStack/query

簡而言之，React Query 使在 React 中獲取數(shù)據(jù)成為一種更好的體驗。但它本身并不是一個數(shù)據(jù)獲取庫。相反，它是一個處理異步服務器狀態(tài)的狀態(tài)管理庫。您為其提供了一個異步函數(shù)，然后用于獲取數(shù)據(jù)。然后，該useQuery鉤子為您提供了一堆有用的實用程序來處理異步函數(shù)：

• 加載標志

• 結果緩存

• 結果失效和重新獲取

這聽起來沒那么嚴重。但它對大型代碼庫的影響不可低估。通常，代碼庫具有大量邏輯來全局共享獲取結果、在數(shù)據(jù)更改時刷新這些結果、觸發(fā)獲取數(shù)據(jù)等等。使用 React Query 時，大部分內(nèi)容都不再需要。緩存意味著您可以在整個應用程序中調(diào)用掛鉤useQuery，并且數(shù)據(jù)在所有事件之間共享。

健康）狀況

github：/pmndrs/zustand

每個 React 開發(fā)人員都知道在應用程序中共享狀態(tài)所涉及的痛苦。當?shù)谝淮斡龅竭@個問題時，您不可避免地會在組件樹上“鉆取”數(shù)據(jù)。不用說，這不會產(chǎn)生干凈的代碼，從長遠來看也是不可持續(xù)的。

值得慶幸的是，React 提出了Context 提供者來解決這個問題。如果您需要做的只是在組件樹中傳遞一些值，那么上下文就非常有用。但對于更復雜的全球商店來說，它可能會變得很麻煩。兩者都是因為開發(fā)人員需要小心性能影響，而且一些開發(fā)人員不太喜歡它的 API。

如果您想從 Context 進行設置，Zustand 是您的最佳選擇。它提供了一個極其簡單的 API，可讓您創(chuàng)建具有值和函數(shù)的商店。然后，您可以從應用程序中的任何位置訪問該存儲以讀取和寫入值。包括反應性！如果您想在存儲中存儲嵌套對象數(shù)據(jù)，請考慮使用Immer和 Zustand 來輕松更改嵌套狀態(tài)。

成幀器運動

github：/framer/motion

動畫是給你的 React 應用程序帶來現(xiàn)代和精致感覺的最佳方式之一。但這并不容易。使用 CSS 動畫很棘手，并且可能會產(chǎn)生大量代碼。相比之下，F(xiàn)ramer Motion 提供了強大但簡單的 API 來創(chuàng)建自定義動畫。它通過一組鉤子和組件原生集成到 React 生態(tài)系統(tǒng)中。

例如，以下代碼是平滑地動畫從圓形到正方形的轉換所需的全部內(nèi)容：

?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 定義關鍵幀。您還可以對布局中的更改進行動畫處理、處理手勢或基于滾動進行動畫處理。

類別差異管理局 (CVA)

github：/joe-bell/cva

TailwindCSS 已迅速成為 React 應用程序樣式的主要方式。但用它構建可重用的 UI 元素可能是一個挑戰(zhàn)。假設您使用 Tailwind 創(chuàng)建自己的自定義樣式按鈕。由于您想在整個應用程序中重用它，因此您創(chuàng)建了一個組件。但現(xiàn)在您需要該組件的多個變體。主要風格和次要風格。所以現(xiàn)在您需要根據(jù) prop 值將 Tailwind 類組合在一起。現(xiàn)在您還需要不同顏色和不同尺寸的按鈕。因此，添加一些 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 會找出正確的樣式組合。我們甚至可以指定默認變體以使某些屬性成為可選的。

基數(shù)用戶界面

github：/radix-ui/primitives

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

雖然組件包含所有邏輯和交互性，但它們的樣式為零。這意味著您可以完全控制自己設計組件的樣式。這使您能夠構建一個真正的自定義 UI 系統(tǒng)，該系統(tǒng)與其他網(wǎng)站不同。在完全控制樣式的同時，Radix 會為您完成所有其他工作。所有組件都可以完全訪問 - 例如通過鍵盤導航。

如果您喜歡 Radix 的靈活性，但又不想從頭開始設計所有內(nèi)容，那么您應該檢查一下shadcn/ui 。它是一個構建在 Radix 和 Tailwind 之上的完全模塊化的組件庫。您可以將代碼直接復制到您的項目中并根據(jù)您的喜好進行修改，而不是安裝 NPM 包。

包起來

本文討論的庫可以幫助您將 React 應用程序提升到一個新的水平。采用它們將幫助您的應用程序為用戶和開發(fā)人員提供更好的體驗。您可以在項目中逐步采用所有這些方法，而不是進行一項重大更改。而且它們上手非常簡單。因此，在開始編碼之前無需花費數(shù)小時來研究文檔。

希望您覺得這有幫助！

（更|多優(yōu)質(zhì)內(nèi)|容：java567 點 c0m）