2022 年值得推薦的 React 庫
此文爲譯文,原文出自:
原作者:Amitav Mishra
原文鏈接:React Libraries for 2022[2]
譯者:LBJ
React
出現已經有一定的時間了。從那時起,圍繞組件驅動的庫發展了一個全面而強大的庫生態系統。來自其他編程語言或庫 / 框架的開發者通常很難弄清楚使用 React
創建 Web
應用程序的所有庫。
從本質上講,React
使用戶能夠使用函數組件 [3] 創建組件驅動的用戶界面。不過,它帶有幾個內置的解決方案,例如,用於本地狀態、副作用和性能優化的 React Hooks
。但畢竟,你在這裏只處理函數(組件和鉤子)來創建 UI
。
以下文章將會爲你如何選擇庫來構建 React
應用程序提供指導。
目錄
-
如何創建 React 項目 [4]
-
React 狀態管理 [5]
-
React 數據獲取 [6]
-
使用 React Router[7]
-
React 中的 CSS 樣式 [8]
-
React UI 庫 [9]
-
React 動畫庫 [10]
-
React 中的可視化和圖表庫 [11]
-
React 中的表單庫 [12]
-
React 類型檢查 [13]
-
React 代碼結構:樣式和格式 [14]
-
React 驗證 [15]
-
React 託管 [16]
-
React 中的測試 [17]
-
React 和不可變數據結構 [18]
-
React 國際化 [19]
-
React 中的富文本編輯器 [20]
-
React 中的支付 [21]
-
React 中的時間 [22]
-
React 桌面應用程序 [23]
-
使用 React 進行手機開發 [24]
-
React VR/AR[25]
-
React 的原型設計 [26]
-
React 組件文檔 [27]
如何創建 React 項目
對於每個 React 初學者來說,在加入 React 時如何建立一個 React 項目都是未知的。有許多框架可供選擇。React 社區的現狀是 Facebook 的 create-react-app (CRA)[28]。它的配置爲零,併爲你提供了一個極簡的開箱即用的 React 應用程序。所有工具都對你隱藏,但你可以稍後更改工具(例如 eject 或 craco)。
繼續閱讀:瞭解爲什麼像 React 這樣的框架很重要 [29]
然而,現在 CRA 建立在過時的工具上——這導致了較慢的開發體驗。Vite[30] 是時下最受歡迎的新產品之一,它的開發和生產速度令人難以置信 [31],而且有很多模板可供選擇 (如 React、React + TypeScript)。
如果你已經熟悉 React,你可以選擇它最流行的(元)框架之一作爲替代:Next.js[32] 和 Gatsby.js[33]。這兩個框架都建立在 React 之上,因此你應該已經熟悉 React 的基礎知識 [34]。這個領域另一個流行但更新的框架是 Remix[35],它在 2022 年絕對值得一試。
繼續閱讀:瞭解有關網站和 Web 應用程序的更多信息 [36]
雖然 Next.js 最初用於服務器端渲染 (例如動態 web 應用程序),但 Gatsby.js 主要用於靜態站點(例如靜態網站,如博客和登陸頁面)。但是,在過去幾年中,兩個框架之間的線路都有模糊,因爲 Next.js 允許你選擇加入靜態站點,而 Gatsby 允許你選擇加入服務器端渲染。在這個階段,我會說 Next.js 贏得了大多數用例的流行之戰。
繼續閱讀:如何創建現代 JavaScript 項目 [37]
如果你只是想了解像 create-react-app 這樣的工具在底層是如何工作的,試着自己從頭開始創建一個 React 項目 [38]。你將從一個簡單的 HTML JavaScript 項目開始,自己添加 React 及其支持工具 (如 Webpack, Babel)。這不是你在日常工作中必須要處理的事情,但這是瞭解底層工具的一個很好的學習經驗。
建議:
-
Vite 用於客戶端 React 應用程序
-
CRA 備選
-
Next.js 主要用於服務器端渲染的 React 應用程序
-
前沿技術:Remix
-
Gatsby 用於靜態生成器 備選
-
可選學習經驗:從頭開始創建 React 項目
React 狀態管理
React 自帶兩個內置鉤子來管理本地狀態:useState[39] 和 useReducer[40]。如果狀態需要全局管理,你可以選擇加入 React 內置的 useContext Hook[41],在不使用道具的情況下將道具從頂級組件傳遞到底層組件,從而避免了 props drilling 的問題。
繼續閱讀:瞭解何時使用 useState 和 useReducer[42]
這三個 React 鉤子都能讓開發者在 React 中實現強大的狀態管理,這些狀態管理可以通過 React 的 useState/useReducer 鉤子放在組件中,也可以通過與 React 的 useContext 鉤子結合在一起進行全局管理。
繼續閱讀: 學習如何結合 useState/useReducer 和 useContext[43]
如果你發現自己過於頻繁地使用 React 的 Context 來處理共享 / 全局狀態,你一定要看看 Redux[44],它是最流行的狀態管理庫。它允許你管理應用程序的全局狀態,任何連接到其全局存儲的 React 組件都可以讀取和修改應用程序的全局狀態。
繼續閱讀: 學習 Redux[45]
如果你碰巧使用 Redux,你一定也應該查看 Redux Toolkit[46]。它是 Redux 核心之上的一個很棒的 API,極大地改善了開發者使用 Redux 的體驗。
作爲替代方案,如果你喜歡全局 store 的總體概念,但不喜歡 Redux 的處理方式,請查看其他流行的本地狀態管理解決方案,例如 Zustand[47]、Jotai[48]、XState[49] 或 Recoil[50]。
建議:
-
useState/useReducer 用於共存或共享狀態
-
選擇使用 useContext 來啓用_一些_全局狀態
-
可選學習經驗:學習如何結合 useState/useReducer 和 useContext
-
Redux(或另一種選擇) 用於許多全局狀態
React 數據獲取
React 的內置鉤子非常適合 UI 狀態,但當涉及到遠程數據的狀態管理 (因此也包括數據獲取) 時,我建議使用一個專門的數據獲取庫,比如 React Query[51],它自帶內置的狀態管理功能。雖然 React Query 本身並不被看作是一個狀態管理庫,因爲它主要用於從 api 獲取你的遠程數據,但它會爲你處理這些遠程數據的所有狀態管理 (例如緩存,樂觀更新)。
繼續閱讀: 瞭解 React Query 是如何工作的 [52]
React Query 是爲使用 REST api[53] 而設計的。然而,現在它也支持 GraphQL[54]。但是如果你正在爲你的 React 前端尋找一個專用的 GraphQL 庫,可以選擇 Apollo Client55、urql56 或 Relay[57] (Facebook 版)。
繼續閱讀: React 中關於本地和遠程數據狀態的所有內容 [58]
如果你已經在使用 Redux,並且想在 Redux 中添加具有集成狀態管理的數據獲取功能,而不是添加 React Query,你可能需要查看 RTK Query[59],它將數據獲取巧妙地集成到 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[60]。
繼續閱讀: 學習使用 React Router[61]
在你的 React 項目中引入路由器之前,當你正要學習 React 時,你可以先嚐試一下 React 的條件渲染 [62]。它不是路由的替代品,但在小型應用程序中,它經常以這種方式交換組件。
建議:
-
React Router
-
可選學習經驗:學習使用 React Router
React 中的 CSS 樣式
React 中有很多關於樣式 / CSS 的選項,甚至更多的意見,所以把所有的東西放在一個部分是不夠的。如果你想更深入地瞭解這個主題,瞭解所有的選項,請查看以下指南。
繼續閱讀: React CSS 樣式 [63]
但是讓我們先從概述開始。作爲一個 React 初學者,可以通過使用一個帶有所有 CSS 屬性的樣式對象作爲 HTML 樣式屬性的鍵 / 值對來開始使用內聯樣式和基本的 CSS。
const Headline = ({ title }) =>
<h1 style={{ color: 'blue' }}>
{title}
</h1>
複製代碼
內聯樣式可以在 React 中通過 JavaScript 動態和編程的方式添加樣式,而外部 CSS 文件可以包含 React 應用的所有剩餘樣式:
import './Headline.css';
const Headline = ({ title }) =>
<h1 class 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[64](或其他選擇,如 emotion 或) 的庫來實現的,它將樣式與 JavaScript 放在 React 組件的 JavaScript 文件或共存文件的旁邊:
import styled from 'styled-components';
const BlueHeadline = styled.h1`
color: blue;
`;
const Headline = ({ title }) =>
<BlueHeadline>
{title}
</BlueHeadline>
複製代碼
第三,我想推薦 Tailwind CSS[65] 作爲最流行的實用優先 CSS 解決方案。它提供了預定義的 CSS 類,你可以在 React 組件中使用它們,而不用自己定義它們。這讓你作爲一個開發者更有效率,也讓你的 React 應用程序的設計系統更加一致,但同時也需要了解所有的類:
const Headline = ({ title }) =>
<h1 class>
{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)[66] (最流行)
-
Mantine[67] (最推薦的)
-
Chakra UI[68] (最推薦的)
-
Ant Design[69]
-
Radix[70]
-
Primer[71]
-
NextUI[72]
-
Tailwind UI[73] (不是免費的)
-
Semantic UI[74]
-
React Bootstrap[75]
儘管所有這些 UI 庫都帶有許多內部組件,但它們不能使每個組件都像只關注一個 UI 組件的庫那樣強大。例如,React-table-library[76] 允許你在 React 中創建功能強大的表組件,同時也提供了主題 (如 Material UI),可以很好地融入流行的 UI 組件庫中。
React 動畫庫
web 應用中的任何動畫都是從 CSS 開始的。最終你會發現 CSS 動畫不能滿足你的需求。通常開發者會選擇 React Transition Group[77],這樣他們就可以使用 React 組件來執行動畫了。React 的其他知名動畫庫有:
-
Framer Motion[78] (最推薦的)
-
react-spring[79] (也經常推薦的)
-
react-motion[80]
-
react-move[81]
-
Animated[82] (React Native)
React 中的可視化和圖表庫
如果你真的想要自己從頭開始創建圖表,那麼就沒有辦法繞過 D3[83]。這是一個低級的可視化庫,可以爲你提供創建令人驚歎的圖表所需的一切。然而,學習 D3 是一個完全不同的冒險,因此許多開發人員只是選擇一個 React 圖表庫,它可以爲他們做所有的事情,以換取靈活性。以下是一些流行的解決方案:
-
Recharts[84]
-
react-chartjs[85]
-
visx[86]
-
Victory[87]
React 中的表單庫
React 中最受歡迎的表單庫是 React Hook Form。它提供了從驗證(最流行的集成是 yup 和 zod)到提交到表單狀態管理所需的一切。過去更流行的另一種選擇是 Formik。兩者都是你的 React 應用程序的有效解決方案。這個領域的另一個選擇是 React Final Form。畢竟,如果你已經在使用 React UI 庫,你還可以查看他們的內置表單解決方案。
建議:
-
React Hook Form
-
使用 yup 或 zod 集成進行驗證
-
如果使用 UI 庫,請檢查內置表單是否支持所有需求
React 類型檢查
React 自帶一個內部的類型檢查,叫做 PropTypes[88]。通過使用 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[89] 是現在的最佳選擇。
建議:
- 如果需要類型化的 JavaScript,使用 TypeScript
React 代碼結構:樣式和格式
本質上,有兩種方法可以遵循代碼結構的常識:
如果你想要一種統一的、通用的代碼風格,在你的 React 項目中使用 ESLint。像 ESLint 這樣的檢測程序在你的 React 項目中強制執行特定的代碼風格。例如,你可以在 ESLint 中要求遵循一個流行的風格指南 (如 Airbnb 風格指南)。之後,將 ESLint 與你的 IDE / 編輯器集成,它會指出你的每一個錯誤。
繼續閱讀: React 文件 / 文件夾結構 [90]
如果你想採用統一的代碼格式,在 React 項目中使用 Prettier。它是一個固執的代碼格式化器,只有少量可選擇的配置。你可以將其集成到編輯器或 IDE 中,以便在每次保存文件時對代碼進行格式化。雖然 Prettier 不能取代 ESLint,但它可以很好地與 ESLint 集成。
建議:
- ESLint + Prettier
React 驗證
在 React 應用程序中,你可能希望引入帶有註冊、登錄和退出等功能的身份驗證。其他功能,如密碼重置和密碼更改功能通常也需要。這些特性遠遠超出了 React 的範疇,因爲後臺應用程序會爲你管理這些東西。
繼續閱讀: 如何準備 React Router 認證 [91]
最好的學習經驗是自己實現一個帶有身份驗證的後端應用程序 (例如 GraphQL backend[92])。然而,由於身份驗證有很多安全風險,而且並非每個人都知道細節,我建議使用現有的衆多身份驗證 / 後端即服務解決方案中的一種:
-
Firebase[93]
-
Auth0[94]
-
AWS Cognito[95]
建議:
-
選擇一個認證服務或 BaaS(如 Firebase)
-
可選學習經驗:自定義後端
React 託管
你可以像部署其他 web 應用一樣部署和託管 React 應用。如果你想擁有完全的控制權,選擇像 Digital Ocean[96] 這樣的東西。如果你想找人來處理所有的事情,Cloudflare Workers[97]、Netlify[98] 或 Vercel[99](特別是針對 Next.js) 是流行的解決方案。如果你已經在使用像 Firebase 這樣的第三方後臺服務,你可以檢查他們是否也提供託管服務 (例如 Firebase hosting[100])。
React 中的測試
如果你想深入瞭解 React 中的測試,請閱讀這篇文章: 如何在 React 中測試組件。這裏有一個要點: 測試一個 React 應用的主幹是 Jest。它提供了測試運行器、斷言庫和監視 / 模仿 / 存根功能。一個全面的測試框架所需要的一切。
至少,你可以使用 React-test-renderer[101] 在 Jest 測試中呈現 React 組件。這已經足夠用 Jest 執行所謂的 Snapshot Tests[102] 了。Snapshot Tests 的工作方式如下: 一旦運行測試,就會創建 React 組件中呈現的 DOM 元素的快照。當你在某個時間點再次運行測試時,將創建另一個快照,該快照將用作前一個快照的差異。如果差異不相同,Jest 將發出抱怨,你要麼必須接受快照,要麼更改組件的實現。
最終,你會發現自己正在使用流行的 React 測試庫 (RTL)[103]——它是在 Jest 測試環境中使用的——來爲 React 創建一個更復雜的測試庫。RTL 使呈現組件和在 HTML 元素上模擬事件成爲可能。之後,Jest 用於 DOM 節點上的斷言。
如果你正在尋找 React 端到端 (E2E) 測試的測試工具,Cypress[104] 是最受歡迎的選擇。不過另一個越來越受歡迎的是 Playwright[105]。
建議:
-
Unit/Integration: Jest + React Testing Library (最流行的)
-
Snapshot Tests: Jest
-
E2E Tests: Cypress
React 和不可變數據結構
Vanilla JavaScript 爲你提供了大量的內置工具來處理數據結構,就好像它們是不可變的一樣。但是,如果你和你的團隊覺得需要執行不可變的數據結構,那麼最流行的選擇之一就是 Immer[106]。我個人不使用它,因爲 JavaScript 可以用於管理不可變的數據結構,但任何時候有人問起 JS 的不可變性,就會有人推薦它。
React 國際化
當涉及到 React 應用程序的國際化 i18n 時,你不僅需要考慮翻譯,還需要考慮多元化、日期和貨幣的格式,以及其他一些事情。以下是最常用的處理它的庫:
-
FormatJS[107]
-
react-i18next[108]
React 中的富文本編輯器
說到 React 中的富文本編輯器,我只能想到以下這些,因爲我還沒有在 React 中使用過其他的編輯器:
-
Draft.js[109]
-
Slate.js[110]
-
ReactQuill[111]
React 中的支付
和其他網絡應用一樣,最常見的支付提供商是 Stripe 和 PayPal。兩者都可以巧妙地集成到 React 中。這是一個與 React 集成的 Stripe Checkout。
-
PayPal[112]
-
React Stripe Elements[113] or Stripe Checkout[114]
React 中的時間
JavaScript 本身在最近幾年的日期和時間處理上做得非常棒。因此,實際上不需要使用庫來處理它們。然而,如果你的 React 應用需要處理大量的日期、時間和時區,你可以引入一個庫來爲你管理這些東西。以下是你的選擇:
-
date-fns[115]
-
Day.js[116]
-
Luxon[117]
React 桌面應用程序
Electron[118] 是跨平臺桌面應用程序的框架。然而,也有其他選擇,例如:
-
Tauri[119] (fairly new)
-
NW.js[120]
-
Neutralino.js[121]
使用 React 進行手機開發
想將 React 從網頁帶到手機平臺的解決方案仍然是 React Native。如果你想幫助一個框架創建 React Native 應用程序,請查看 Expo[122]。
繼續閱讀: 學習 React Native[123]
React VR/AR
通過 React,我們可以深入研究虛擬現實或增強現實。老實說,我沒有使用過這些庫中的任何一個,但它們是我在 React 中所熟悉的 AR/VR 庫:
-
react-three-fiber[124] (流行的 3d 庫, 我也看到過 VR 的例子)
-
react-360[125]
-
aframe-react[126]
React 的原型設計
如果你有 UI/UX 背景,你可能想要使用一個工具來快速創建 React 組件、佈局或 UI/UX 概念的原型。我過去使用 Sketch[127],但後來改用 Figma[128]。雖然我兩個都喜歡,但我現在不後悔使用 Figma。Zeplin[129] 是另一種選擇。對於粗糙而輕量級的草圖,我喜歡使用 Excalidraw[130]。如果你正在尋找交互式 UI/UX 設計,請查看 InVision[131]。
React 組件文檔
如果你負責爲組件編寫文檔,有各種各樣的 React 文檔工具。我已經在許多項目中使用了 Storybook,我只能推薦它,但我也聽說過其他解決方案的好處:
-
Docusaurus[132]
-
Docz[133]
-
Styleguidist[134]
畢竟,React 生態系統可以被看作是 React 的一個框架,但它的核心仍然是 React 的靈活性。它是一個靈活的框架,你可以根據自己的瞭解做出想要選擇加入哪些庫的決定。你可以從小處開始,只添加庫來解決特定的問題。相反,如果你只需要 React,你可以只使用這個庫來保持輕量級。
結語
好了以上就是本文的所有內容,如有問題,歡迎指正 🌹
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/RE_GV8MNEq3bZavD22nghQ