在本文中，我將討論您可以在 React 項(xiàng)目中使用的庫。

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

---

1. 樣式組件

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

安裝

• npm 我的樣式組件

• 紗線添加樣式組件

---

2.福米克——是的

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

安裝

• npm i formik

• 紗線添加成型

---

3. TanStack查詢

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

安裝

• npm 我@tanstack/react-query

• 紗線添加@tanstack/react-query

---

4. 沉浸

不可變是一個(gè)促進(jìn)狀態(tài)更新的庫。它允許您在功能上輕松地更改狀態(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)用程序中創(chuàng)建動(dòng)畫和過渡的庫。它特別廣泛地用于想要添加動(dòng)畫和動(dòng)態(tài)交互。

的項(xiàng)目

安裝

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

• 紗線添加@react-spring/web

---

6.React虛擬化

它允許處理大型數(shù)據(jù)集而不會(huì)遇到性能問題。它通過僅渲染可見元素來避免不必要的渲染操作。

安裝

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

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

---

7. 反應(yīng)DnD

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

安裝

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

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

---

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

Framer Motion 是一個(gè)現(xiàn)代庫，可用于創(chuàng)建動(dòng)畫。您可以輕松添加和管理與 React 兼容的動(dòng)畫。您可以輕松應(yīng)用從簡(jiǎn)單的運(yùn)動(dòng)效果到復(fù)雜的動(dòng)畫的所有內(nèi)容。

安裝

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

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

---

9. 開玩笑

Jest 為 JavaScript 和 React 項(xiàng)目提供測(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項(xiàng)目中開發(fā)多語言應(yīng)用程序。它與 i18next 集成，并促進(jìn)語言更改操作。 動(dòng)態(tài)語言切換操作輕松完成。

安裝

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

• 紗線添加 i18next-react

---

12.Redux工具包

Redux Toolkit 是一個(gè)使 React 項(xiàng)目中的 全局狀態(tài)管理變得更容易、更高效的工具。它通過簡(jiǎn)化 Redux 的復(fù)雜結(jié)構(gòu)來幫助您管理應(yīng)用程序內(nèi)的數(shù)據(jù)流。即使在大型復(fù)雜項(xiàng)目中，它也為數(shù)據(jù)管理和數(shù)據(jù)更新提供了清晰的結(jié)構(gòu)。它還與 Redux DevTools 一起使用，后者提供高級(jí)調(diào)試和時(shí)間旅行調(diào)試功能。

安裝

• npm install @reduxjs/toolkit

• 紗線添加@reduxjs/toolkit

---

13. 軸

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

安裝

• npm 我 axios

• 紗線添加 axios

---

結(jié)論

在本文中，我們研究了重要的 React 庫。您可以通過將庫包含在 React 項(xiàng)目中來增加應(yīng)用程序的功能。

以上是使用 React 構(gòu)建時(shí)您應(yīng)該了解的庫的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！