2023 年的 React 生態

React 是用於構建用戶界面的 JavaScript 庫，其核心是讓開發者能夠使用函數組件創建組件驅動的用戶界面。它帶有一些內置解決方案，例如，用於本地狀態、副作用和優化性能的 React Hooks，但這些只能處理函數（組件和 Hook）以創建 UI。React 擁有一個龐大的生態系統，可以幫助開發人員更快地實現複雜的 UI。本文就來看看 React 最新的生態系統，以實現快速技術選型！

創建項目

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

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

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

建議：

包管理器

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

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

建議

狀態管理

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

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

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

建議

數據獲取

React 的內置 Hook 非常適合 UI 狀態，但是當涉及到遠程數據的狀態管理（以及數據獲取）時，建議使用專用的數據獲取庫，例如 TanStack Query（以前稱爲 React Query）。雖然 TanStack Query 本身不被視爲狀態管理庫，因爲它主要用於從 API 獲取遠程數據，但它會處理此遠程數據的所有狀態管理（例如緩存、樂觀更新）。

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

如果已經在使用 Redux 並希望在 Redux 中添加具有集成狀態管理的數據獲取，而不是添加 TanStack Query，可能考慮使用 RTK Query，它將數據獲取巧妙地集成到 Redux 中。

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

建議

路由

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

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

建議

CSS 樣式

對於 React 初學者，通過在 JSX 中使用樣式對象來開始使用內聯樣式和簡單的 CSS 是很好的：

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

內聯樣式可用於在 React 的 JSX 中使用 JavaScript 動態添加樣式，而外部 CSS 文件可以保存 React 應用的所有剩餘樣式：

import './Headline.css';

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

當應用不斷增長時，還有許多其他樣式實現方式。首先，建議將 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 類，無需自己定義即可使用。這可以提高開發人員的效率，並簡化了 React 應用的設計系統，但需要權衡瞭解所有類和許多 CSS 類的冗長內聯：

const Headline = ({ title }) =>
  <h1 class>
    {title}
  </h1>

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

建議

UI 組件庫

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

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

動畫

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

可視化

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

表單

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

建議

類型檢查

React 帶有一個名爲 PropTypes 的內部類型檢查。通過使用 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。

建議

風格和格式

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

如果想擁抱統一的代碼格式，可以在 React 項目中使用 Prettier。它是一個代碼格式化程序，只有少數可選配置。可以將它集成到編輯器或 IDE 中，以便在每次保存文件時格式化代碼。儘管 Prettier 並沒有取代 ESLint，但它與 ESLint 集成得很好。

建議

身份驗證

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

由於身份驗證會帶來很多安全風險和並非人人都知道的細節，建議使用現有的身份驗證 / 後端即服務解決方案：

建議

部署和託管

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

測試

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

可以使用 react-test-renderer 在測試框架中渲染 React 組件。這已經足以使用 Jest 或 Vitest 執行快照測試。快照測試的工作方式如下：運行測試後，將創建 React 組件的渲染 DOM 元素的快照。當在某個時間點再次運行測試時，將創建另一個快照，用作前一個快照的差異。如果差異不相同，測試框架會報錯，要麼必須接受快照，要麼更改組件的實現。

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

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

建議

不可變數據結構

原生 JavaScript 提供了大量內置工具來處理數據結構，就好像它們是不可變的一樣。但是，如果需要使用不可變數據結構，那麼最受歡迎的選擇之一就是 Immer。

國際化

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

富文本編輯器

React 中的富文本編輯器：

時間

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

桌面應用程序

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

文件上傳

移動開發

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

VR/AR

使用 React 可以深入虛擬現實或增強現實。現成的解決方案包括：

組件文檔

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

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/0iyRsqo7Ijgh5T2iF4H-fA

猜你喜歡