在本文中，我將討論您可以在 React 專案中使用的庫(kù)。

如果你喜歡我的文章，可以請(qǐng)我一杯咖啡:)
買咖啡給我

---

1. 樣式組件

它是一個(gè)使 CSS 在 React 應(yīng)用程式中基於元件編寫的函式庫(kù)。由於它具有基於組件的結(jié)構(gòu)，因此它允許您以模組化方式單獨(dú)設(shè)定每個(gè)組件的樣式。它還提供動(dòng)態(tài)樣式和主題之間的切換等功能。

安裝

• npm 我的樣式組件

• 紗線添加樣式組件

---

2.福米克——是的

Formik在表單驗(yàn)證、表單提交操作和formik狀態(tài)管理等方面提供了極大的便利。它簡(jiǎn)化了錯(cuò)誤管理和驗(yàn)證過程，特別是在處理大型且複雜的表單時(shí)。

安裝

• npm i formik

• 紗線添加成型

---

3. TanStack查詢

它會(huì)自動(dòng)管理和更新資料變更。它會(huì)快取資料並使其可重複使用。它透過快取提高效能並減少不必要的網(wǎng)路請(qǐng)求。該應(yīng)用程式可以在後臺(tái)自動(dòng)更新資料。它在用戶介面中提供最新數(shù)據(jù)。它提供動(dòng)態(tài)和最新的資料來增強(qiáng)使用者體驗(yàn)。透過動(dòng)態(tài) URL 或參數(shù)檢索資料。透過有針對(duì)性的資料檢索，可以確保只捕獲必要的資料。這使得創(chuàng)建測(cè)試場(chǎng)景變得更加容易。它提供了強(qiáng)大的功能來檢查和模擬資料狀態(tài)。它提供了有用的機(jī)制來管理錯(cuò)誤並向使用者顯示有意義的錯(cuò)誤訊息。它在錯(cuò)誤情況下提供重試選項(xiàng)。

安裝

• npm 我@tanstack/react-query

• 紗線添加@tanstack/react-query

---

4. 沉浸

不可變是一個(gè)促進(jìn)狀態(tài)更新的函式庫(kù)。它允許您在功能上輕鬆地更改狀態(tài)更新，而無需進(jìn)行突變。當(dāng)與狀態(tài)管理工具（例如 Redux）一起使用時(shí)，它允許您對(duì)不可變的狀態(tài)結(jié)構(gòu)進(jìn)行更清晰、更易於理解的更新。

安裝

• npm 我沉浸

• 紗線添加浸入器

---

5. 反應(yīng)彈簧

它是一個(gè)用於在應(yīng)用程式中建立動(dòng)畫和過渡的函式庫(kù)。它特別廣泛地用於想要添加動(dòng)畫和動(dòng)態(tài)互動(dòng)。

的項(xiàng)目

安裝

• npm 我的反應(yīng)春天

• 紗線添加@react-spring/web

---

6.React虛擬化

它允許處理大型資料集而不會(huì)遇到效能問題。它透過僅渲染可見元素來避免不必要的渲染操作。

安裝

• npm 我反應(yīng)虛擬化

• 紗線添加反應(yīng)虛擬化

---

7. 反應(yīng)DnD

它是一個(gè)功能強(qiáng)大的庫(kù)，用於向使用者介面添加動(dòng)態(tài)交互，例如拖放。即使是複雜的拖放操作也能輕鬆實(shí)現(xiàn)。

安裝

• npm 我反應(yīng)-dnd

• 紗線添加反應(yīng)拖放

---

8.成幀器運(yùn)動(dòng)

Framer Motion 是一個(gè)現(xiàn)代函式庫(kù)，可用於建立動(dòng)畫。您可以輕鬆新增和管理與 React 相容的動(dòng)畫。您可以輕鬆套用從簡(jiǎn)單的運(yùn)動(dòng)效果到複雜的動(dòng)畫的所有內(nèi)容。

安裝

• npm i 幀運(yùn)動(dòng)

• 紗線添加框架運(yùn)動(dòng)

---

9. 開玩笑

Jest 為 JavaScript 和 React 專案提供測(cè)試工具。

安裝

• npm install--save-dev react-test-renderer

• 紗線添加--dev react-test-renderer

---

10. 故事書

它是一個(gè)在隔離環(huán)境中測(cè)試 React 元件的工具。它使組件開發(fā)和測(cè)試過程更加有效率。您可以使用它來測(cè)試不同的使用者介面狀態(tài)並視覺化組件的功能。

安裝

• npm 我@storybook/react

• 紗線添加@storybook/react

---

11. 反應(yīng) i18next

它用於在React專案中開發(fā)多語(yǔ)言應(yīng)用程式。它與 i18next 集成，並促進(jìn)語(yǔ)言更改操作。 動(dòng)態(tài)語(yǔ)言切換操作輕鬆完成。

安裝

• npm 我的反應(yīng)-i18next

• 紗線添加 i18next-react

---

12.Redux工具包

Redux Toolkit 是一個(gè)讓 React 專案中的 全域狀態(tài)管理變得更容易、更有效率的工具。它透過簡(jiǎn)化 Redux 的複雜結(jié)構(gòu)來幫助您管理應(yīng)用程式內(nèi)的資料流。即使在大型複雜專案中，它也為資料管理和資料更新提供了清晰的結(jié)構(gòu)。它也與 Redux DevTools 一起使用，後者提供進(jìn)階除錯(cuò)和時(shí)間旅行偵錯(cuò)功能。

安裝

• npm install @reduxjs/toolkit

• 紗線添加@reduxjs/toolkit

---

13. 軸

它管理React應(yīng)用程式中向外部資源（API、後端等）發(fā)送和接收資料的過程。它的基於 Promise 的 **結(jié)構(gòu)可以輕鬆地與 **async/await 和 then/catch 結(jié)構(gòu)一起使用。它還提供請(qǐng)求逾時(shí)、自動(dòng)轉(zhuǎn)換、全域配置等功能。

安裝

• npm 我 axios

• 紗線添加 axios

---

結(jié)論

在本文中，我們研究了重要的 React 函式庫(kù)。您可以透過將程式庫(kù)包含在 React 專案中來增加應(yīng)用程式的功能。

以上是用於現(xiàn)代 Web 開發(fā)的實(shí)用 React 程式庫(kù)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！