2022 年值得推薦的 76個 React 庫！

此文為譯文，原文出自：

原作者：Amitav Mishra 原文連結： React Libraries for 2022 ^[1]

譯者：LBJ

React 出現已經有一定的時間了。從那時起，圍繞元件驅動的庫發展了一個全面而強大的庫生態系統。來自其他程式語言或庫/框架的開發者通常很難弄清楚 使用 React 建立 Web 應用程式的所有庫。

從本質上講， React 使使用者能夠使用 函式元件 ^[2] 建立元件驅動的使用者介面。不過，它帶有幾個內建的解決方案，例如，用於本地狀態、副作用和效能優化的 React Hooks 。但畢竟，你在這裡只處理函式（元件和鉤子）來建立 UI 。

以下文章將會為你 如何選擇庫來構建 React 應用程式 提供指導。

目錄

本文目錄如下：

• 如何建立 React 專案

• React 狀態管理

• React 資料獲取

• 使用 React Router

• React 中的 CSS 樣式

• React UI 庫

• React 動畫庫

• React 中的視覺化和圖表庫

• React 中的表單庫

• React 型別檢查

• React 程式碼結構：樣式和格式

• React 驗證

• React 託管

• React 中的測試

• React 和不可變資料結構

• React 國際化

• React中的富文字編輯器

• React 中的支付

• React 中的時間

• React 桌面應用程式

• 使用React進行手機開發

• React VR/AR

• React的原型設計

• React 元件文件

如何建立 React 專案

對於每個React初學者來說，在加入React 時如何建立一個React專案都是未知的。有許多框架可供選擇。React社群的現狀是Facebook的 create-react-app (CRA) ^[3] 。它的配置為零，併為你提供了一個極簡的開箱即用的React應用程式。所有工具都對你隱藏，但你可以稍後更改工具（例如 eject 或 craco）。

繼續閱讀： 瞭解為什麼像React這樣的框架很重要 ^[4]

然而，現在CRA建立在過時的工具上——這導致了較慢的開發體驗。 Vite ^[5] 是時下最受歡迎的新產品之一，它的開發和生產 速度令人難以置信 ^[6] ，而且有很多模板可供選擇(如React、React + TypeScript)。

如果你已經熟悉 React，你可以選擇它最流行的（元）框架之一作為替代： Next.js ^[7] 和 Gatsby.js ^[8] 。這兩個框架都建立在 React 之上，因此你應該已經熟悉 React 的基礎知識 ^[9] 。這個領域另一個流行但更新的框架是 Remix ^[10] ，它在 2022 年絕對值得一試。

繼續閱讀： 瞭解有關網站和 Web 應用程式的更多資訊 ^[11]

雖然Next.js最初用於伺服器端渲染(例如動態web應用程式)，但Gatsby.js主要用於靜態站點（例如靜態網站，如部落格和登陸頁面）。但是，在過去幾年中，兩個框架之間的線路都有模糊，因為 Next.js 允許你選擇加入靜態站點，而 Gatsby 允許你選擇加入伺服器端渲染。在這個階段，我會說 Next.js 贏得了大多數用例的流行之戰。

繼續閱讀： 如何建立現代 JavaScript 專案 ^[12]

如果你只是想了解像create-react-app這樣的工具在底層是如何工作的，試著自己從頭開始 建立一個React專案 ^[13] 。你將從一個簡單的HTML JavaScript專案開始，自己新增React及其支援工具(如Webpack, Babel)。這不是你在日常工作中必須要處理的事情，但這是瞭解底層工具的一個很好的學習經驗。

建議：

• Vite 用於客戶端 React 應用程式

• CRA 備選

• Next.js 主要用於伺服器端渲染的 React 應用程式

• 前沿技術：Remix

• Gatsby 用於靜態生成器 備選

• 可選學習經驗：從頭開始建立 React 專案

React 狀態管理

React自帶兩個內建鉤子來管理本地狀態: useState ^[14] 和 useReducer ^[15] 。如果狀態需要全域性管理，你可以選擇加入React內建的 useContext Hook ^[16] ，在不使用道具的情況下將道具從頂級元件傳遞到底層元件，從而避免了props drilling的問題。

繼續閱讀： 瞭解何時使用useState和useReducer ^[17]

這三個React鉤子都能讓開發者在React中實現強大的狀態管理，這些狀態管理可以通過React的useState/useReducer鉤子放在元件中，也可以通過與React的useContext鉤子結合在一起進行全域性管理。

繼續閱讀: 學習如何結合useState/useReducer和useContext ^[18]

如果你發現自己過於頻繁地使用React的Context來處理共享/全域性狀態，你一定要看看 Redux ^[19] ，它是最流行的狀態管理庫。它允許你管理應用程式的全域性狀態，任何連線到其全域性儲存的React元件都可以讀取和修改應用程式的全域性狀態。

繼續閱讀: 學習Redux ^[20]

如果你碰巧使用Redux，你一定也應該檢視 Redux Toolkit ^[21] 。它是Redux核心之上的一個很棒的API，極大地改善了開發者使用Redux的體驗。

作為替代方案，如果你喜歡全域性store的總體概念，但不喜歡 Redux 的處理方式，請檢視其他流行的本地狀態管理解決方案，例如 Zustand ^[22] 、 Jotai ^[23] 、 XState ^[24] 或 Recoil ^[25] 。

建議：

• useState/useReducer 用於共存或共享狀態

• 選擇使用 useContext 來啟用

  一些

  全域性狀態

• 可選學習經驗：學習如何結合useState/useReducer和useContext

• Redux(或另一種選擇)用於許多全域性狀態

React 資料獲取

React的內建鉤子非常適合UI狀態，但當涉及到遠端資料的狀態管理(因此也包括資料獲取)時，我建議使用一個專門的資料獲取庫，比如 React Query ^[26] ，它自帶內建的狀態管理功能。雖然React Query本身並不被看作是一個狀態管理庫，因為它主要用於從api獲取你的遠端資料，但它會為你處理這些遠端資料的所有狀態管理(例如快取，樂觀更新)。

繼續閱讀: 瞭解React Query是如何工作的 ^[27]

React Query是為使用 REST api ^[28] 而設計的。然而，現在它也支援 GraphQL ^[29] 。但是如果你正在為你的React前端尋找一個專用的GraphQL庫，可以選擇 Apollo Client ^[30] (流行版)、 urql ^[31] (輕量級版)或 Relay ^[32] (Facebook版)。

繼續閱讀: React中關於本地和遠端資料狀態的所有內容 ^[33]

如果你已經在使用 Redux，並且想在 Redux 中新增具有整合狀態管理的資料獲取功能，而不是新增 React Query，你可能需要檢視 RTK Query ^[34] ，它將資料獲取巧妙地整合到 Redux 中。

建議：

• React Query (REST APIs, GraphQL APIs)

• 使用axios作為獲取庫

• Apollo Client (GraphQL APIs)

• 可選的學習經驗：學習React Query是如何工作的

使用 React Router

如果你使用的是像Next.js或Gatsby.js這樣的React框架，路由已經為你解決了。然而，如果你使用React時沒有框架，只用於客戶端渲染(如CRA)，那麼最強大、最流行的路由庫是 React Router ^[35] 。

繼續閱讀: 學習使用React Router ^[36]

在你的React專案中引入路由器之前，當你正要學習React時，你可以先嚐試一下React的 條件渲染 ^[37] 。它不是路由的替代品，但在小型應用程式中，它經常以這種方式交換元件。

建議：

• React Router

• 可選學習經驗：學習使用React Router

React 中的 CSS 樣式

React中有很多關於樣式/CSS的選項，甚至更多的意見，所以把所有的東西放在一個部分是不夠的。如果你想更深入地瞭解這個主題，瞭解所有的選項，請檢視以下指南。

繼續閱讀: React CSS樣式 ^[38]

但是讓我們先從概述開始。作為一個React初學者，可以通過使用一個帶有所有CSS屬性的樣式物件作為HTML樣式屬性的鍵/值對來開始使用內聯樣式和基本的CSS。

const Headline = ({ title }) =>
  <h1 style={{ color: 'blue' }}>
    {title}
  </h1>

內聯樣式可以在React中通過JavaScript動態和程式設計的方式新增樣式，而外部CSS檔案可以包含React應用的所有剩餘樣式：

import './Headline.css';

const Headline = ({ title }) =>
  <h1 className="headline" style={{ color: 'blue' }}>
    {title}
  </h1>

一旦你的應用程式增長，還有很多其他的樣式選擇。首先，我建議你將CSS模組作為眾多CSS中CSS解決方案之一來研究。CRA支援CSS模組，並提供了一種將CSS封裝到元件範圍內的模組的方法。這樣，它就不會意外地洩露到其他React元件的樣式中。儘管你的應用程式的某些部分仍然可以共享樣式，但其他部分不必訪問它。在React中，CSS模組通常是將CSS檔案放在React元件檔案中：

import styles from './style.module.css';

const Headline = ({ title }) =>
  <h1 className={styles.headline}>
    {title}
  </h1>

其次，我想向你推薦所謂的風格元件，作為React的眾多CSS-in-JS解決方案之一。這種方法是通過一個名為 styles-components ^[39] (或其他選擇，如emotion或)的庫來實現的，它將樣式與JavaScript放在React元件的JavaScript檔案或共存檔案的旁邊：

import styled from 'styled-components';

const BlueHeadline = styled.h1`
  color: blue;
`;
const Headline = ({ title }) =>
  <BlueHeadline>
    {title}
  </BlueHeadline>

第三，我想推薦 Tailwind CSS ^[40] 作為最流行的實用優先CSS解決方案。它提供了預定義的CSS類，你可以在React元件中使用它們，而不用自己定義它們。這讓你作為一個開發者更有效率，也讓你的React應用程式的設計系統更加一致，但同時也需要了解所有的類：

const Headline = ({ title }) =>
  <h1 className="text-blue-700">
    {title}
  </h1>

選擇 CSS-in-CSS、CSS-in-JS 還是函式式 CSS 取決於你。所有策略都適用於較大的React應用程式。最後一點提示：如果你想在React中有條件地應用一個className，請使用像clsx這樣的工具。

建議：

• CSS-in-CSS 用 CSS Modules

• CSS-in-JS 用 styles-components (最流行)

• 備選: Emotion 或 Stitches

• 函式式的 CSS 用 Tailwind CSS

• 可選: 有條件地應用一個className 選擇使用 clsx

React UI 庫

對於初學者來說，從零開始構建可重用的元件是一個很好的學習經驗，值得推薦。無論它是下拉選單、單選按鈕還是複選框，你最終都應該知道如何建立這些UI元件。

歡迎關注公眾號： 前端印象

然而，在某些時候，你想要使用一個UI庫，它可以讓你訪問許多共享相同設計系統的預構建元件。以下所有的UI庫都帶有基本元件，如按鈕、下拉選單、對話方塊和列表:

• Material UI (MUI) ^[41] (最流行)

• Mantine ^[42] (最推薦的)

• Chakra UI ^[43] (最推薦的)

• Ant Design ^[44]

• Radix ^[45]

• Primer ^[46]

• NextUI ^[47]

• Tailwind UI ^[48] (不是免費的)

• Semantic UI ^[49]

• React Bootstrap ^[50]

儘管所有這些UI庫都帶有許多內部元件，但它們不能使每個元件都像只關注一個UI元件的庫那樣強大。例如， React-table-library ^[51] 允許你在React中建立功能強大的表元件，同時也提供了主題(如Material UI)，可以很好地融入流行的UI元件庫中。

React 動畫庫

web應用中的任何動畫都是從CSS開始的。最終你會發現CSS動畫不能滿足你的需求。通常開發者會選擇 React Transition Group ^[52] ，這樣他們就可以使用React元件來執行動畫了。React的其他知名動畫庫有：

• Framer Motion ^[53] (最推薦的)

• react-spring ^[54] (也經常推薦的)

• react-motion ^[55]

• react-move ^[56]

• Animated ^[57] (React Native)

React 中的視覺化和圖表庫

如果你真的想要自己從頭開始建立圖表，那麼就沒有辦法繞過 D3 ^[58] 。這是一個低階的視覺化庫，可以為你提供建立令人驚歎的圖表所需的一切。然而，學習D3是一個完全不同的冒險，因此許多開發人員只是選擇一個React圖表庫，它可以為他們做所有的事情，以換取靈活性。以下是一些流行的解決方案：

• Recharts ^[59]

• react-chartjs ^[60]

• visx ^[61]

• Victory ^[62]

React 中的表單庫

React 中最受歡迎的表單庫是 React Hook Form。它提供了從驗證（最流行的整合是 yup 和 zod）到提交到表單狀態管理所需的一切。過去更流行的另一種選擇是Formik。兩者都是你的 React 應用程式的有效解決方案。這個領域的另一個選擇是 React Final Form。畢竟，如果你已經在使用 React UI 庫，你還可以檢視他們的內建表單解決方案。

建議：

• React Hook Form

• 使用yup或zod整合進行驗證

• 如果使用UI庫，請檢查內建表單是否支援所有需求

React 型別檢查

React自帶一個內部的型別檢查，叫做 PropTypes ^[63] 。通過使用PropTypes，你可以為React元件定義prop。當一個錯誤型別的prop被傳遞給元件時，你會在執行應用程式時得到一個錯誤訊息:

import PropTypes from 'prop-types';

const List = ({ list }) =>
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>

List.propTypes = {
  list: PropTypes.array.isRequired,
};

然而，PropTypes不再包含在React核心庫中。在過去的幾年裡，PropTypes變得不那麼流行了，取而代之的是TypeScript：

type Item = {
  id: string;
  title: string;
};

type ListProps = {
  list: Item[];
};

const List: React.FC<ListProps> = ({ list }) =>
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>

如果你真的想在React中擁抱型別， TypeScript ^[64] 是現在的最佳選擇。

建議：

• 如果需要型別化的JavaScript，使用TypeScript

React 程式碼結構：樣式和格式

本質上，有兩種方法可以遵循程式碼結構的常識：

如果你想要一種統一的、通用的程式碼風格，在你的React專案中使用ESLint。像ESLint這樣的檢測程式在你的React專案中強制執行特定的程式碼風格。例如，你可以在ESLint中要求遵循一個流行的風格指南(如Airbnb風格指南)。之後，將ESLint與你的IDE/編輯器整合，它會指出你的每一個錯誤。

繼續閱讀: React檔案/資料夾結構 ^[65]

如果你想採用統一的程式碼格式，在React專案中使用Prettier。它是一個固執的程式碼格式化器，只有少量可選擇的配置。你可以將其整合到編輯器或IDE中，以便在每次儲存檔案時對程式碼進行格式化。雖然Prettier不能取代ESLint，但它可以很好地與ESLint整合。

建議：

• ESLint + Prettier

React 驗證

在React應用程式中，你可能希望引入帶有註冊、登入和退出等功能的身份驗證。其他功能，如密碼重置和密碼更改功能通常也需要。這些特性遠遠超出了React的範疇，因為後臺應用程式會為你管理這些東西。

繼續閱讀: 如何準備React Router認證 ^[66]

最好的學習經驗是自己實現一個帶有身份驗證的後端應用程式(例如 GraphQL backend ^[67] )。然而，由於身份驗證有很多安全風險，而且並非每個人都知道細節，我建議使用現有的眾多身份驗證/後端即服務解決方案中的一種:

• Firebase ^[68]

• Auth0 ^[69]

• AWS Cognito ^[70]

建議：

• 選擇一個認證服務或BaaS(如Firebase)

• 可選學習經驗：自定義後端

React 託管

你可以像部署其他web應用一樣部署和託管React應用。如果你想擁有完全的控制權，選擇像 Digital Ocean ^[71] 這樣的東西。如果你想找人來處理所有的事情， Cloudflare Workers ^[72] 、 Netlify ^[73] 或 Vercel ^[74] (特別是針對Next.js)是流行的解決方案。如果你已經在使用像Firebase這樣的第三方後臺服務，你可以檢查他們是否也提供託管服務(例如 Firebase hosting ^[75] )。

React 中的測試

如果你想深入瞭解React中的測試，請閱讀這篇文章:如何在React中測試元件。這裡有一個要點:測試一個React應用的主幹是Jest。它提供了測試執行器、斷言庫和監視/模仿/存根功能。一個全面的測試框架所需要的一切。

至少，你可以使用 React-test-renderer ^[76] 在Jest測試中呈現React元件。這已經足夠用Jest執行所謂的 Snapshot Tests ^[77] 了。Snapshot Tests的工作方式如下:一旦執行測試，就會建立React元件中呈現的DOM元素的快照。當你在某個時間點再次執行測試時，將建立另一個快照，該快照將用作前一個快照的差異。如果差異不相同，Jest將發出抱怨，你要麼必須接受快照，要麼更改元件的實現。

最終，你會發現自己正在使用流行的 React測試庫(RTL) ^[78] ——它是在Jest測試環境中使用的——來為React建立一個更復雜的測試庫。RTL使呈現元件和在HTML元素上模擬事件成為可能。之後，Jest用於DOM節點上的斷言。

如果你正在尋找React端到端(E2E)測試的測試工具， Cypress ^[79] 是最受歡迎的選擇。不過另一個越來越受歡迎的是 Playwright ^[80] 。

建議：

• Unit/Integration: Jest + React Testing Library (最流行的)

• Snapshot Tests: Jest

• E2E Tests: Cypress

React 和不可變資料結構

Vanilla JavaScript 為你提供了大量的內建工具來處理資料結構，就好像它們是不可變的一樣。但是，如果你和你的團隊覺得需要執行不可變的資料結構，那麼最流行的選擇之一就是 Immer ^[81] 。我個人不使用它，因為JavaScript可以用於管理不可變的資料結構，但任何時候有人問起JS的不可變性，就會有人推薦它。

React 國際化

當涉及到React應用程式的國際化i18n時，你不僅需要考慮翻譯，還需要考慮多元化、日期和貨幣的格式，以及其他一些事情。以下是最常用的處理它的庫：

• FormatJS ^[82]

• react-i18next ^[83]

React中的富文字編輯器

說到React中的富文字編輯器，我只能想到以下這些，因為我還沒有在React中使用過其他的編輯器：

• Draft.js ^[84]

• Slate.js ^[85]

• ReactQuill ^[86]

React 中的支付

和其他網路應用一樣，最常見的支付提供商是Stripe和PayPal。兩者都可以巧妙地整合到React中。這是一個與React整合的Stripe Checkout。

• PayPal ^[87]

• React Stripe Elements ^[88] or Stripe Checkout ^[89]

React 中的時間

JavaScript本身在最近幾年的日期和時間處理上做得非常棒。因此，實際上不需要使用庫來處理它們。然而，如果你的React應用需要處理大量的日期、時間和時區，你可以引入一個庫來為你管理這些東西。以下是你的選擇：

• date-fns ^[90]

• Day.js ^[91]

• Luxon ^[92]

React 桌面應用程式

Electron ^[93] 是跨平臺桌面應用程式的框架。然而，也有其他選擇，例如：

• Tauri ^[94] (fairly new)

• NW.js ^[95]

• Neutralino.js ^[96]

使用React進行手機開發

想將React從網頁帶到手機平臺的解決方案仍然是React Native。如果你想幫助一個框架建立React Native應用程式，請檢視 Expo ^[97] 。

繼續閱讀: 學習React Native ^[98]

React VR/AR

通過React，我們可以深入研究虛擬現實或增強現實。老實說，我沒有使用過這些庫中的任何一個，但它們是我在React中所熟悉的AR/VR庫:

• react-three-fiber ^[99] (流行的 3d 庫, 我也看到過VR的例子)

• react-360 ^[100]

• aframe-react ^[101]

React的原型設計

如果你有UI/UX背景，你可能想要使用一個工具來快速建立React元件、佈局或UI/UX概念的原型。我過去使用 Sketch ^[102] ，但後來改用 Figma ^[103] 。雖然我兩個都喜歡，但我現在不後悔使用Figma。 Zeplin ^[104] 是另一種選擇。對於粗糙而輕量級的草圖，我喜歡使用E xcalidraw ^[105] 。如果你正在尋找互動式UI/UX設計，請檢視 InVision ^[106] 。

React 元件文件

如果你負責為元件編寫文件，有各種各樣的React文件工具。我已經在許多專案中使用了Storybook，我只能推薦它，但我也聽說過其他解決方案的好處：

• Docusaurus ^[107]

• Docz ^[108]

• Styleguidist ^[109]

畢竟，React生態系統可以被看作是React的一個框架，但它的核心仍然是React的靈活性。它是一個靈活的框架，你可以根據自己的瞭解做出想要選擇加入哪些庫的決定。你可以從小處開始，只新增庫來解決特定的問題。相反，如果你只需要React，你可以只使用這個庫來保持輕量級。

結語

好了以上就是本文的所有內容，如有問題，歡迎指正 :rose:

作者：LBJ

連結：http://juejin.cn/post/7085558184252801061

參考資料

往期推薦