2023 年的 React 生態(tài)

作者：CUGGZ 2023-02-23 18:14:21

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

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

創(chuàng)建項(xiàng)目

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

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

建議：

Vite：用于客戶端 React 應(yīng)用；
Next.js ：用于服務(wù)器端渲染的 React 應(yīng)用；
Astro：用于靜態(tài)站點(diǎn)生成的 React 應(yīng)用。

包管理器

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

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

建議

選擇一個(gè)包管理器并堅(jiān)持使用；
npm：默認(rèn)且使用最廣泛；
如果是 monorepo，使用 Turborepo。

狀態(tài)管理

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

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

作為替代方案，如果喜歡全局存儲(chǔ)的總體思路但不喜歡 Redux 的實(shí)現(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)，但是當(dāng)涉及到遠(yuǎn)程數(shù)據(jù)的狀態(tài)管理（以及數(shù)據(jù)獲取）時(shí)，建議使用專用的數(shù)據(jù)獲取庫(kù)，例如 TanStack Query（以前稱為 React Query）。雖然 TanStack Query 本身不被視為狀態(tài)管理庫(kù)，因?yàn)樗饕糜趶?API 獲取遠(yuǎn)程數(shù)據(jù)，但它會(huì)處理此遠(yuǎn)程數(shù)據(jù)的所有狀態(tài)管理（例如緩存、樂(lè)觀更新）。

TanStack Query 專為使用 REST API 而設(shè)計(jì)，現(xiàn)在它也支持 GraphQL。但是，如果正在為 React 前端尋找專用的 GraphQL 庫(kù)，請(qǐng)查看 Apollo Client（流行）、urql（輕量級(jí)）或 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ù)獲取庫(kù)；
Apollo Client（GraphQL API）；
tRPC：端到端類型安全。

路由

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

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

建議

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

CSS樣式

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

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

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

import './Headline.css';

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

當(dāng)應(yīng)用不斷增長(zhǎng)時(shí)，還有許多其他樣式實(shí)現(xiàn)方式。首先，建議將 CSS Module作為眾多 CSS-in-CSS 解決方案之一。Vite 支持 CSS Module，它提供了一種將 CSS 封裝到組件范圍模塊中的方法。這樣，它就不會(huì)意外地泄漏到其他 React 組件的樣式中。雖然應(yīng)用的某些部分仍然可以共享樣式，但其他部分不必訪問(wèn)它。在 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 解決方案。它帶有預(yù)定義的 CSS 類，無(wú)需自己定義即可使用。這可以提高開發(fā)人員的效率，并簡(jiǎn)化了 React 應(yīng)用的設(shè)計(jì)系統(tǒng)，但需要權(quán)衡了解所有類和許多 CSS 類的冗長(zhǎng)內(nèi)聯(lián)：

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

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

建議

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

UI組件庫(kù)

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

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

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

動(dòng)畫

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

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

可視化

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

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

Victory
nivo
react-chartjs

表單

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

建議

React Hook Form

與用于驗(yàn)證的 zod 集成

如果使用 UI 庫(kù)，可以檢查內(nèi)置表單是否滿足所有需求
React Hook Form 帶有一個(gè)干凈的 API，用于 UI 庫(kù)集成

類型檢查

React 帶有一個(gè)名為 PropTypes 的內(nèi)部類型檢查。通過(guò)使用 PropTypes，可以為 React 組件定義 props。每當(dāng)將錯(cuò)誤類型的 prop 傳遞給組件時(shí)，將在運(yùn)行應(yīng)用時(shí)收到錯(cuò)誤消息：

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 核心庫(kù)中。在過(guò)去的幾年里，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 進(jìn)行類型化表單驗(yàn)證、API 輸入/輸出驗(yàn)證等，可以使用 Zod。

建議

如果需要類型化的 JavaScript，請(qǐng)使用 TypeScript。

風(fēng)格和格式

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

如果想擁抱統(tǒng)一的代碼格式，可以在 React 項(xiàng)目中使用 Prettier。它是一個(gè)代碼格式化程序，只有少數(shù)可選配置。可以將它集成到編輯器或 IDE 中，以便在每次保存文件時(shí)格式化代碼。盡管 Prettier 并沒(méi)有取代 ESLint，但它與 ESLint 集成得很好。

建議

ESLint + Prettier

身份驗(yàn)證

在 React 應(yīng)用中，如果希望引入具有注冊(cè)、登錄和注銷等功能的身份驗(yàn)證。通常還需要其他功能，如密碼重置和密碼更改功能。這些功能遠(yuǎn)遠(yuǎn)超出了 React 的范疇，因?yàn)楹蠖藨?yīng)用會(huì)管理這些事情。

由于身份驗(yàn)證會(huì)帶來(lái)很多安全風(fēng)險(xiǎn)和并非人人都知道的細(xì)節(jié)，建議使用現(xiàn)有的身份驗(yàn)證/后端即服務(wù)解決方案：

Firebase Auth
Supabase Auth
Auth0
AWS Cognito

建議

選擇身份驗(yàn)證服務(wù)或 BaaS（例如 Firebase/Supabase）

部署和托管

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

測(cè)試

可以使用 Jest 這樣的測(cè)試框架來(lái)測(cè)試 React 應(yīng)用。它提供了測(cè)試運(yùn)行程序、斷言庫(kù)等功能，綜合了測(cè)試框架所需的一切。如果你是 Vite 的粉絲，可以使用 Vitest 作為 Jest 替代品。

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

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

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