建站
咨詢
售后
建站咨詢
新聞中心
一、React Query
https://github.com/TanStack/query
10余年的薌城網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整薌城建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“薌城網(wǎng)站設(shè)計(jì)”,“薌城網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
圖3
簡(jiǎn)而言之，React Query 可以使在 React 中獲取數(shù)據(jù)體驗(yàn)更好。其是一個(gè)處理異步服務(wù)器狀態(tài)的狀態(tài)管理庫，通過提供了一個(gè)異步函數(shù)來獲取數(shù)據(jù)。此外，useQuery hook提供了一堆有用的實(shí)用程序來處理異步函數(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開發(fā)的程序中肯定會(huì)涉及到組件間狀態(tài)共享，我們可以通過props來實(shí)現(xiàn)，但是這并不利于代碼的維護(hù)，后來React提供了Context Providers來進(jìn)行組件間狀態(tài)共享，但是對(duì)于復(fù)雜的全局存儲(chǔ)，Context可能會(huì)變的很繁瑣，有可能導(dǎo)致性能問題。為了更好的使用Context，可以使用Zustand，其提供了一個(gè)極其簡(jiǎn)單的API來創(chuàng)建一個(gè)store，可以從應(yīng)用程序的任何位置訪問該store并讀取和寫入值。
三、Framer Motion
https://github.com/framer/motion
圖5
動(dòng)畫是賦予React應(yīng)用程序現(xiàn)代和精致感的最佳方式之一。但這并不容易。使用CSS動(dòng)畫很棘手，可能會(huì)導(dǎo)致大量的代碼。相比之下，F(xiàn)ramer Motion提供了一個(gè)強(qiáng)大但簡(jiǎn)單的API來創(chuàng)建自定義動(dòng)畫。它與React生態(tài)系統(tǒng)原生集成，配有一組hooks和組件。例如，將圓形平滑的變換為正方形：
import { motion } from "framer-motion"
export const MyComponent = () => (
數(shù)組中的每個(gè)值代表相應(yīng)屬性的一個(gè)關(guān)鍵幀。然后動(dòng)畫會(huì)循環(huán)播放。當(dāng)然，您可以做的不僅僅是使用 Framer Motion 定義關(guān)鍵幀。還可以動(dòng)畫化布局的更改、處理手勢(shì)或根據(jù)滾動(dòng)進(jìn)行動(dòng)畫。
四、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類組合在一起，通過添加一些props和相應(yīng)條件邏輯以找出Tailwind類的正確組合，如果邏輯過多，將會(huì)變的非常復(fù)雜。通過引入CVA（Class Variance Authority），可以消除使用Tailwind類名構(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,
VariantProps {}
export const Button: React.FC = ({
className,
intent,
size,
...props
}) => ; 以聲明方式描述每個(gè)參數(shù)值的按鈕樣式，利用CVA 會(huì)找出正確的樣式組合。我們甚至可以指定默認(rèn)變量使某些屬性成為可選的。
五、Radix UI
https://github.com/radix-ui/primitives
圖片
如果您喜歡構(gòu)建完全自定義樣式的界面，但不想處理從頭開始開發(fā)可訪問 UI 組件的復(fù)雜問題，那么 Radix UI 適合您。該庫附帶了各種常用的 UI 組件。例如對(duì)話框、復(fù)選框和下拉菜單。
雖然組件包含所有邏輯和交互，但它們沒有任何樣式。這意味著完全可以自己控制組件的樣式。這使能夠構(gòu)建一個(gè)與其它網(wǎng)站不同的真正定制的UI系統(tǒng)。在擁有完全控制樣式的同時(shí)，Radix為您完成所有其他工作。所有組件都是完全可訪問的，可以通過鍵盤導(dǎo)航等方式進(jìn)行操作。
如果您喜歡Radix的靈活性，但不想從頭開始設(shè)計(jì)所有樣式，那么shadcn/ui就是您應(yīng)該查看的內(nèi)容。它是一個(gè)完全模塊化的組件庫，構(gòu)建在Radix和Tailwind之上。可以將代碼直接復(fù)制到項(xiàng)目中并按照自己的喜好進(jìn)行修改，而不是安裝NPM包。
參考文章：https://livecycle.io/blogs/react-libraries/
文章名稱：2023年提升您React項(xiàng)目的五個(gè)庫
網(wǎng)站URL：http://www.5511xx.com/article/dhposhe.html
