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