React 是用于構(gòu)建用戶界面的JavaScript庫，其核心是讓開發(fā)者能夠使用函數(shù)組件創(chuàng)建組件驅(qū)動的用戶界面。它帶有一些內(nèi)置解決方案，例如，用于本地狀態(tài)、副作用和優(yōu)化性能的 React Hooks，但這些只能處理函數(shù)（組件和Hook）以創(chuàng)建 UI。React 擁有一個龐大的生態(tài)系統(tǒng)，可以幫助開發(fā)人員更快地實現(xiàn)復雜的UI。本文就來看看 React 最新的生態(tài)系統(tǒng)，以實現(xiàn)快速技術(shù)選型！

創(chuàng)建項目

在 React 社區(qū)中，最受歡迎的創(chuàng)建 React 項目的工具就是 Vite，它允許使用各種庫（例如 React）+ 可選的 TypeScript 組合創(chuàng)建項目，它具有強大的性能。

如果你已經(jīng)熟悉 React，可以選擇最流行的（元）框架之一 Next.js 作為替代，它建立在 React 之上。這個領(lǐng)域中另一個流行但較新的框架是 Remix。

雖然 Next.js 最初用于服務端渲染（Web 應用），但它也可用于靜態(tài)站點生成。但是，如果正在尋找一個考慮到靜態(tài)內(nèi)容最佳性能的框架，可以考慮使用 Astro，它與框架無關(guān)，因此可以與 React 一起使用。

建議：

• Vite：用于客戶端 React 應用；
• Next.js ：用于服務器端渲染的 React 應用；
• Astro：用于靜態(tài)站點生成的 React 應用。

包管理器

JavaScript 生態(tài)系統(tǒng)（以及 React）中默認且使用最廣泛的包管理器就是 npm。在 React 應用中安裝依賴項時，通常會使用 npm。然而，在過去幾年中，yarn 一直是一個成功的替代品。另外，pnpm 是一個最新的替代品，它帶來了巨大的性能提升。

如果碰巧創(chuàng)建了多個相互依賴或共享一組通用自定義 UI 組件的 React 應用，可能需要了解 monorepo 的概念。前面提到的所有包管理器都允許開發(fā)者使用其內(nèi)部工作區(qū)功能創(chuàng)建 monorepos。但是，使用 yarn/pnpm 可以獲得最好的開發(fā)體驗。結(jié)合 Turborepo 等 monorepo 工具，monorepo 體驗變得更完美。

建議

• 選擇一個包管理器并堅持使用；
• npm：默認且使用最廣泛；
• 如果是 monorepo，使用 Turborepo。

狀態(tài)管理

React 提供了兩個內(nèi)置的 Hook 來管理本地狀態(tài)：??useState??? 和 ??useReducer???。如果需要全局管理狀態(tài)，可以選擇使用 React 內(nèi)置的 ??useContext??? Hook，在不使用 ??props??? 的情況下將 ??props?? 從頂級組件傳遞到下面的組件，從而避免 props drilling 的問題。這三個 hooks 使開發(fā)人員能夠在 React 中實現(xiàn)強大的狀態(tài)管。

如果需要過于頻繁地使用 React 的 Context 來處理共享/全局狀態(tài)，那么可以考慮使用最流行的狀態(tài)管理庫：Redux。它可以管理全局應用狀態(tài)，可以由連接到其全局 store 的任何 React 組件進行讀取和修改。如果使用 Redux，可以了解一下 Redux Toolkit。它在 Redux 的核心之上提供了一個很棒的 API，極大地改善了開發(fā)人員使用 Redux 的體驗。

作為替代方案，如果喜歡全局存儲的總體思路但不喜歡 Redux 的實現(xiàn)方式，可以使用其他流行的本地狀態(tài)管理解決方案，例如 Zustand、Recoil、XState 或 Jotai。

建議

• useState/useReducer：用于本地狀態(tài)管理；
• useContext：用于小的全局狀態(tài)管理；
• Redux：用于大的全局狀態(tài)管理（或替代方案）。

數(shù)據(jù)獲取

React 的內(nèi)置 Hook 非常適合 UI 狀態(tài)，但是當涉及到遠程數(shù)據(jù)的狀態(tài)管理（以及數(shù)據(jù)獲?。r，建議使用專用的數(shù)據(jù)獲取庫，例如 TanStack Query（以前稱為 React Query）。雖然 TanStack Query 本身不被視為狀態(tài)管理庫，因為它主要用于從 API 獲取遠程數(shù)據(jù)，但它會處理此遠程數(shù)據(jù)的所有狀態(tài)管理（例如緩存、樂觀更新）。

TanStack Query 專為使用 REST API 而設(shè)計，現(xiàn)在它也支持 GraphQL。但是，如果正在為 React 前端尋找專用的 GraphQL 庫，請查看 Apollo Client（流行）、urql（輕量級）或 Relay（Facebook 提供）。

如果已經(jīng)在使用 Redux 并希望在 Redux 中添加具有集成狀態(tài)管理的數(shù)據(jù)獲取，而不是添加 TanStack Query，可能考慮使用 RTK Query，它將數(shù)據(jù)獲取巧妙地集成到 Redux 中。

另外，如果可以控制 TypeScript 編寫的后端，可以考慮使用 tRPC 以獲得端到端類型安全 API。

建議

• TanStack Query（REST API、GraphQL API）；
• axios：數(shù)據(jù)獲取庫；
• Apollo Client（GraphQL API）；
• tRPC：端到端類型安全。

路由

如果使用的是像 Next.js 這樣的 React 框架，那么路由已經(jīng)處理好了。如果在沒有框架的情況下使用 React，并且僅用于客戶端渲染（例如沒有 SSR 的 Vite），那么最強大和最流行的路由庫就是 React Router。考慮到完全支持 TypeScript 的新替代方案是 TanStack Router。

如果在帶有 React Router 的 React 中使用客戶端路由，那么在路由級別引入代碼拆分是很容易的。如果需要進行代碼拆分，可以用 @loadable/component 來替代 React.lazy() ，這會給你更好的用戶體驗和更多的選擇。

建議

• React Router
• 如果喜歡 TypeScript 和 TanStack Query，可以考慮使用 TanStack Router，但是它相對較新。

CSS樣式

對于 React 初學者，通過在 JSX 中使用樣式對象來開始使用內(nèi)聯(lián)樣式和簡單的 CSS 是很好的：

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

內(nèi)聯(lián)樣式可用于在 React 的 JSX 中使用 JavaScript 動態(tài)添加樣式，而外部 CSS 文件可以保存 React 應用的所有剩余樣式：

import './Headline.css';

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

當應用不斷增長時，還有許多其他樣式實現(xiàn)方式。首先，建議將 CSS Module作為眾多 CSS-in-CSS 解決方案之一。Vite 支持 CSS Module，它提供了一種將 CSS 封裝到組件范圍模塊中的方法。這樣，它就不會意外地泄漏到其他 React 組件的樣式中。雖然應用的某些部分仍然可以共享樣式，但其他部分不必訪問它。在 React 中，CSS Module 通常是將 CSS 文件與 React 組件文件放在一起：

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

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

其次，推薦 Styled Components 作為 React 的眾多 CSS-in-JS 解決方案之一。

import styled from 'styled-components';

const BlueHeadline = styled.h1`
  color: blue;
`;

const Headline = ({ title }) =>
  <BlueHeadline>
   {title}
  </BlueHeadline>

第三，推薦 Tailwind CSS 作為最流行的 Utility-First-CSS 解決方案。它帶有預定義的 CSS 類，無需自己定義即可使用。這可以提高開發(fā)人員的效率，并簡化了 React 應用的設(shè)計系統(tǒng)，但需要權(quán)衡了解所有類和許多 CSS 類的冗長內(nèi)聯(lián)：

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

無論選擇 CSS-in-CSS、CSS-in-JS 還是 Utility-First-CSS 都取決于具體場景。這些策略適用于更大的 React 應用。如果想在 React 中有條件地應用一個類名，可以使用像 clsx 這樣的實用程序。

建議

• CSS-in-CSS：CSS Module
• Utility-First-CSS：Tailwind CSS
• CSS-in-JS：Styled Components（最受歡迎）、Emotion（備選方案）
• 條件 CSS 類：clsx

UI組件庫

如果希望使用一個 UI 組件庫，它包含許多共享相同設(shè)計系統(tǒng)的預構(gòu)建組件。以下所有 UI 庫都帶有基本組件，如按鈕、下拉菜單、對話框和列表：

• Ant Design（最推薦）
• Material UI（最受歡迎）
• Mantine UI（最推薦）
• Chakra UI （最推薦）
• Radix （無樣式設(shè)計系統(tǒng)）
• Tailwind
• Headless UI
• Daisy UI
• Tailwind UI (非免費）
• Semantic UI
• React Bootstrap
• Reactstrap
• NextUI
• Primer

盡管這些 UI 組件庫都帶有許多內(nèi)置組件，但它們無法使每個組件都像只專注于一個 UI 組件的庫一樣強大。例如，react-table-library 可以在 React 中創(chuàng)建強大的表格組件，同時還提供主題（例如 Material UI），以便很好地融入流行的 UI 組件庫。

動畫

有時 CSS 動畫無法滿足我們的需求。可以嘗試使用 React Transition Group，這使開發(fā)人員可以使用 React 組件執(zhí)行動畫。其他著名的 React 動畫庫如下：

• Framer Motion （最推薦）
• react-spring（經(jīng)常推薦）
• react-motion
• react-move
• Animated (React Native)

可視化

如果想從頭開始構(gòu)建圖表，可以嘗試使用 D3。它是一個基礎(chǔ)可視化庫，提供了創(chuàng)建圖表所需的一切。如果只是想選擇了一個現(xiàn)成的 React 圖表庫，下面是一些流行的解決方案：

• 推薦: Recharts （出色的可組合性）
• visx（學習難度大）
• 現(xiàn)成的圖表，較難定制：

• Victory
• nivo
• react-chartjs

表單

React 中最流行的表單庫是 React Hook Form。它帶有從驗證（最流行的集成是 zod）到提交到表單狀態(tài)管理所需的一切。替代方案有 Formik 和 React Final Form。如果已經(jīng)在使用了 React UI 庫，可以查看它們內(nèi)置的表單解決方案。

建議

• React Hook Form

• 與用于驗證的 zod 集成

• 如果使用 UI 庫，可以檢查內(nèi)置表單是否滿足所有需求

• React Hook Form 帶有一個干凈的 API，用于 UI 庫集成

類型檢查

React 帶有一個名為 PropTypes 的內(nèi)部類型檢查。通過使用 PropTypes，可以為 React 組件定義 props。每當將錯誤類型的 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 是目前的最佳選擇。如果想超越 TypeScript 進行類型化表單驗證、API 輸入/輸出驗證等，可以使用 Zod。

建議

• 如果需要類型化的 JavaScript，請使用 TypeScript。

風格和格式

如果想擁抱統(tǒng)一的代碼風格，可以在 React 項目中使用 ESLint。ESLint 等 linter 在 React 項目中強制執(zhí)行特定的代碼風格。例如，可以要求 ESLint 遵循流行的風格指南（例如 Airbnb 風格指南）。可以將其與 ESLint 與 IDE/編輯器集成，它會指出每個錯誤。

如果想擁抱統(tǒng)一的代碼格式，可以在 React 項目中使用 Prettier。它是一個代碼格式化程序，只有少數(shù)可選配置?？梢詫⑺傻骄庉嬈骰?IDE 中，以便在每次保存文件時格式化代碼。盡管 Prettier 并沒有取代 ESLint，但它與 ESLint 集成得很好。

建議

• ESLint + Prettier

身份驗證

在 React 應用中，如果希望引入具有注冊、登錄和注銷等功能的身份驗證。通常還需要其他功能，如密碼重置和密碼更改功能。這些功能遠遠超出了 React 的范疇，因為后端應用會管理這些事情。

由于身份驗證會帶來很多安全風險和并非人人都知道的細節(jié)，建議使用現(xiàn)有的身份驗證/后端即服務解決方案：

• Firebase Auth
• Supabase Auth
• Auth0
• AWS Cognito

建議

• 選擇身份驗證服務或 BaaS（例如 Firebase/Supabase）

部署和托管

可以像任何其他 Web 應用一樣部署和托管 React 應用。如果想完全控制，可以選擇 Digital Ocean。如果想讓托管服務處理所有事情，Netlify 或 Vercel（尤其是 Next.js）是流行的解決方案。如果已經(jīng)在使用第三方后端作為 Firebase/Supabase 等服務，可以檢查他們是否也提供托管服務。其他流行的托管服務提供商有 Render、Fly.io 或 Railway。

測試

可以使用 Jest 這樣的測試框架來測試 React 應用。它提供了測試運行程序、斷言庫等功能，綜合了測試框架所需的一切。如果你是 Vite 的粉絲，可以使用 Vitest 作為 Jest 替代品。

可以使用 react-test-renderer 在測試框架中渲染 React 組件。這已經(jīng)足以使用 Jest 或 Vitest 執(zhí)行快照測試?？煺諟y試的工作方式如下：運行測試后，將創(chuàng)建 React 組件的渲染 DOM 元素的快照。當在某個時間點再次運行測試時，將創(chuàng)建另一個快照，用作前一個快照的差異。如果差異不相同，測試框架會報錯，要么必須接受快照，要么更改組件的實現(xiàn)。

React Testing Library (RTL) 是一個比較流行的 React 測試庫，RTL 使渲染組件和模擬 HTML 元素上的事件成為可能。之后，可以使用測試框架（例如 Jest/Vitest）用于 DOM 節(jié)點上的斷言。

如果正在尋找用于 React 端到端 (E2E) 測試的測試工具，Playwright 和 Cypress 是最受歡迎的選擇。

建議

• 單元/集成測試：Jest/Vitest + React Testing Library（最受歡迎）
• 快照測試：Jest/Vitest
• E2E 測試：Playwright、Cypress

不可變數(shù)據(jù)結(jié)構(gòu)

原生 JavaScript 提供了大量內(nèi)置工具來處理數(shù)據(jù)結(jié)構(gòu)，就好像它們是不可變的一樣。但是，如果需要使用不可變數(shù)據(jù)結(jié)構(gòu)，那么最受歡迎的選擇之一就是 Immer。

國際化

當涉及到 React 應用的國際化 i18n 時，不僅需要考慮翻譯，還需要考慮多元化、日期和貨幣的格式等。這些是處理它的最受歡迎的庫：

• FormatJS
• react-i18next

富文本編輯器

React 中的富文本編輯器：

• Draft.js
• Slate.js
• ReactQuill

時間

近年來，JavaScript 本身在處理日期和時間方面變得非常棒，如果 React 應用需要大量處理日期、時間和時區(qū)，可以引入一個庫來管理這些東西。

• date-fns
• Day.js
• Luxon

桌面應用程序

Electron 仍然是跨平臺桌面應用程序的首選框架。還有一些替代方案，例如：

• Tauri（很好的選擇，非常受歡迎）
• Neutralino.js
• NW.js

文件上傳

• react-dropzone
• filepond

移動開發(fā)

將 React 從 Web 帶到移動設(shè)備的首選解決方案是 React Native。

VR/AR

使用 React 可以深入虛擬現(xiàn)實或增強現(xiàn)實?，F(xiàn)成的解決方案包括：

• react-three-fiber
• react-360
• aframe-react

組件文檔

編寫組件文檔的解決方案包括：

• Storybook
• Docusaurus
• Docz
• Styleguidist

參考：https://www.robinwieruch.de/react-libraries/