2020 年你應該知道的 React 庫技术頭條網

2020 年你應該知道的 React 庫

React 已經誕生很久了，自從它誕生開始，圍繞組件驅動形成了一個非常全面的生態，但是來自其他編程語言或者框架的開發人員很難找到要構建一個 React 系統的所有組件。如果你是來自於像 Angular 這樣的框架的開發者，你可能已經習慣了框架包含了所需要的所有功能，

然而對於 React 來說，它的核心並不是完善所有的可選庫。這是優勢還是劣勢取決於你自己。當我從 Angular 切換到 React，我絕對經歷了它作為 React 的優勢。

只有通過 React，您才能使用函數組件和 props 構建組件驅動的用戶界面。它帶有一些內置的解決方案，例如，用於本地狀態和副作用的 React Hooks。

下面的文章將向您提供一些自己總結的方法，以便從補充庫中進行選擇，從而構建一個全面的 React 應用程序。

如何開始 React

如果你是一個完全不熟悉 React 的初學者想創建一個 React 項目，加入 React 的世界。有許多工具包項目可以選擇，每個項目都試圖滿足不同的需求。 React 社區的現狀是通過 Facebook 的 create-react-app(CRA)。它提供了一個零配置的設置，並給你一個開箱即用並且簡單的啟動和運行的 React 應用程序。所有的工具都對您隱藏起來了，但是最終要由您來更改這些工具。

如果你已經熟悉 React，你可以選擇它流行的入門工具包之一: Next.js 和 Gatsby.js。這兩個框架都建立在 React 之上，因此你應該已經熟悉 React 的基本原理。 Next.js 用於服務器端渲染(如動態 web 應用程序) ，Gatsby.js 用於靜態站點生成(如博客、登陸頁面)。

如果您只是想了解這些初學者工具包是如何工作的，那麼可以嘗試從頭開始設置 React 項目。你將從一個基本的 HTML 和 JavaScript 項目開始，然後自己添加 React 和它的支持工具。

如果你想選擇一個自定義樣板項目，試著縮小你的要求。樣板文件應該是最小的，不要試圖解決所有問題。它應該針對你的問題。例如，gatsby-Firebase-authentication 樣板文件只在 Gatsby.js 中為您提供了完整的 Firebase 身份驗證機制，但是其他所有內容都被省略了。

建議：

create-react-app for React beginners/advanced
Gatsby.js for static websites in React
Next.js for server-side rendered React
custom React project to understand the underlying tools

React 狀態管理

React 帶有內置的 hooks 來管理局部狀態: useState、 useReducer 和 useContext。所有這些都可以在 React 中用於複雜的本地狀態管理。它甚至可以模擬 Redux(Redux 是 React 的一個流行的狀態管理庫)。

所有 React 的內置 hooks 都非常適合本地狀態管理。當涉及到遠程數據的狀態管理時，如果遠程數據帶有 GraphQL 端點，我建議使用 Apollo Client。Apollo Client 的替代方案是 urql 和 Relay。

如果遠程數據不是來自 GraphQL 端點，請嘗試使用 React 的 Hooks 來管理它。如果不行，像 Redux 或者 MobX/Mobx State tree 這樣的解決方案可能會有所幫助。

如果你想了解更多細節，請訪問我的綜合狀態管理反應教程。

推薦：

局部狀態: React 的 useState, useReducer, useContext Hooks
通過 Graph QL 的遠程狀態: Apollo Client
通過 REST 的遠程狀態: React Hooks or Redux/MobX/Mobx State Tree

使用 React 路由

路由在 React 中起著重要作用。畢竟，React 可以幫助您實現在客戶端處理路由的單頁應用程序。當介紹一個複雜的路由的時候，有好幾個路由解決方案。最值得推薦的解決方案是 React Router。

在您引入路由以前，您可以先嚐試 React 的條件渲染，它雖然不是路由的合理替代，但是小型應用中以及足夠用了。

建議:

React Router

React 中的樣式庫

雖然關於 React 樣式處理有很多解決方法，但是作為一個 React 初學者，剛開始使用內聯樣式和基本 CSS 是很好的。

<code>import './Headline.css';/<code>

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

<code>/<code>

<code>  {title}/<code>

<code>

雖然內聯樣式可以用 JavaScript 在 React 中動態地添加樣式，但是一個外部的 CSS 文件可以擁有 React 應用程序的所有剩餘樣式。一旦您的應用程序增長，還有許多其他樣式方案選擇。

首先，我建議您研究一下 CSS Modules，將其作為 CSS-in-CSS 解決方案之一。 CSS Modules 受到 create-react-app 的支持，併為您提供了將 CSS 封裝到模塊中的方法。這樣，它就不會意外地洩漏到其他人的樣式中。儘管應用程序的某些部分仍然可以共享樣式，但其他部分不必訪問它。在 React 中，CSS Modules 通常將 CSS 文件與 React 組件文件共存。

<code>import styles from './style.css';/<code>

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

<code>   
/<code>

<code>    {title}/<code>

<code>  /<code>

其次，我想推薦的是被稱作為 styled components，作為 React 的 CSS-in-JS 解決方案之一。這個方法是由一個名為 styled-components 的庫提供的，它將樣式與 JavaScript 共享到 React 組件的旁邊:

<code>import styled from 'styled-components';/<code>

<code>const BlueHeadline = styled.h1`/<code>

<code>  color: blue;/<code>

<code>`;/<code>

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

<code>  <blueheadline>/<code>

<code>    {title}/<code>

<code>  /<code>

第三，我想推薦 Tailwind CSS 作為一個函數式的 CSS 解決方案:

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

是否選擇 CSS in CSS、 CSS in js 或函數式 CSS 取決於您。所有的策略都適用於大型的 React 應用程序。

建議:

CSS-in-CSS with CSS Modules
CSS-in-JS with Styled Components
Functional CSS with Tailwind CSS

React UI 庫

如果您不想從頭開始構建所有必要的 React UI 組件，您可以選擇 React UI Library 來完成這項工作。所有這些都有一些基本的組件，比如按鈕，下拉菜單，對話框和列表。有很多 UI 庫可供 React 選擇:

Ant Design
Chakra UI
Tailwind UI
Semantic UI
Material UI
React Bootstrap 1. React Bootstrap

React 動畫

任何 web 應用程序中的動畫都是從 CSS 開始的。最終你會發現 CSS 動畫並不能滿足你的需求。通常開發人員會檢查 React Transition Group，這樣他們就可以使用 React 組件執行動畫。其他著名的 React 動畫庫有:

react-motion
react-spring
Framer Motion
Animated (React Native)

建議:

React Transition Group

React 可視化和圖表庫

如果你真的想自己從頭開始構建圖表，你沒辦法不去學習 D3 。這是一個底層的可視化庫，它為你提供了創建令人驚歎的圖表所需的一切。然而，學習 D3 是一個完全不同的冒險，因此許多開發人員只是想選擇一個 React 圖表庫，它可以為他們做任何事情，以換取靈活性。以下是一些流行的解決方案:

nivo
Victory
react-vis
Recharts
Chart Parts

React 中的表單庫

在 React 中最流行的表單庫是 Formik。它提供了從驗證到提交到形成狀態管理所需的一切。另外一個選擇是 React Hook Form。如果您開始使用更復雜的表單，這兩種方法對於 React 應用程序都是有效的解決方案。

建議:

Formik
React Hook Form

React 中的數據獲取庫

很快，您就必須向遠程 API 發出請求，以便在 React 中獲取數據。現代瀏覽器帶有本地獲取 API 來執行異步數據請求:

<code>function App() {  React.useEffect(() => {    const result = fetch(my/api/domain)      .then(response => response.json())      .then(result => {        // do success handling        // e.g. store in local state      });    setData(result.data);  });  return (    ...  );}/<code>

基本上，你不需要添加任何其他庫來完成這項工作。但是，有時候不僅需要提供複雜的異步請求，還需要它們具有更強大的功能，而且只是一個輕量級的庫。我推薦的這些庫之一稱為 axios。當您的應用程序增大時，可以使用它來代替本地獲取 API。

如果您有足夠的時間來處理 GraphQL API，我建議您使用 Apollo Client。可供選擇的 GraphQL 客戶端將是 urql 或 Relay。

建議:

瀏覽器的本地 fetch API
axios
Apollo Client

React 類型檢查

幸運的是 React 有自己的類型檢查能力。使用 PropTypes，你可以為你的 React 組件定義傳入的 props。無論何時向組件傳遞了錯誤的類型，在運行應用程序時都會收到錯誤消息。但是這種形式的類型檢查只應該用於較小的應用程序。

<code>import PropTypes from 'prop-types';const List = ({ list }) =>      {list.map(item => {item.title}
)}  
List.propTypes = {  list: PropTypes.array.isRequired,};/<code>

在較大的 React 應用程序中，TypeScript 為整個應用程序增加了類型安全性，而不是使用 React PropTypes。當使用這樣的類型檢查器時，您可以在開發期間獲得錯誤。您不必啟動應用程序就可以找到本可以通過這種類型檢查防止的 bug。這樣一來，類型檢查器就可以提高您的開發人員體驗，避免首先引入 bug。

建議:

TypeScript

React 代碼風格

對於代碼風格，基本上有三個選項可以用的。

第一種方法是遵循一個被社區所接受的風格指南。一個流行的 Airbnb 開源的React style guide 。即使你沒有刻意遵循這些樣式指南，但是讀一讀它們，在 React 中獲得常見代碼樣式的要點是有意義的。

第二種方法是使用 linter，比如 ESLint。雖然樣式指南只給出建議，但是 linter 在應用程序中強制執行這個建議。例如，你可以要求遵循流行的 Airbnb 樣式指南，你的 IED/編輯器會告訴你每一個錯誤。

第三種也是最流行的方法是使用 Prettier。它是一個強制的代碼格式化程序。您可以將其集成到編輯器或 IDE 中，使其在每次保存文件時格式化您的代碼。也許它並不總是符合您的口味，但至少您不必再擔心自己或團隊代碼庫中的代碼格式。雖然 Prettier 不能取代 ESLint，但是它與 ESLint 的集成非常好。

建議:

ESLint
Prettier

React 認證

在較大的 React 應用程序中，您可能希望引入具有註冊、登錄和退出功能的身份驗證。此外，密碼重置和密碼更改功能往往是需要的。這些特性遠遠超出了 React，因為後端應用程序為您管理這些事情。

通常的方法是使用自定義身份驗證實現自己的自定義後端應用程序。如果您不想啟動自己的身份驗證，可以考慮類似 Passport.js 的東西。

如果你根本不想關心後端，以下三種解決方案可能適合你:

Firebase
Auth0
AWS Cognito

如果您正在尋找身份驗證 + 數據庫的一體化解決方案，請堅持使用 Firebase 或 AWS。

建議:

DIY: Custom Backend
Get it off the shelf: Firebase

React 主機

您可以像其他 web 應用程序一樣部署和託管 React 應用程序。如果你想擁有完全的控制權，選擇像Digital Ocean這樣的。如果你希望有人來處理所有的事情，如果你已經在使用第三方的身份驗證/數據庫，Netlify 是一個很受歡迎的解決方案，比如 Firebase，你可以檢查他們是否也提供主機服務(比如 Firebase Hosting)。您還可以使用 S3的靜態站點與 Cloudfront 一起託管。

React 測試

如果您想深入瞭解 React 中的測試，請閱讀以下內容: How to test components in React。要點如下: 測試 React 應用程序的主幹是 Jest。它提供了測試運行程序、斷言庫和監視(spying)/模擬(mocking)/stubbing 功能，一個全面的測試框架中需要的所有東西。

至少，您可以使用 React-test-renderer 在 Jest 測試中渲染 React 組件。這已經足以用 jest 來執行所謂的快照測試了。快照測試的工作方式如下: 運行測試之後，將創建 React 組件中渲染的 DOM 元素的快照。當您在某個時間點再次運行測試時，將創建另一個快照，用作前一個快照的差異。如果 diff 不完全相同，則 Jest 將報錯，您要麼必須接受快照，要麼必須更改組件的實現。

最終，您會發現自己在使用 Enzyme 或 React Testing Library (這兩個都在 Jest 測試環境中使用)來進行更詳細的測試功能集。這兩個庫使得在 HTML 元素上呈現組件和模擬事件成為可能。然後，Jest 用於 DOM 節點上的斷言。

如果您正在為 React-to-end (E2E)測試尋找測試工具，Cypress 是最受歡迎的選擇。

建議:

Unit/Integration/Snapshot Tests: Jest + React Testing Library
E2E Tests: Cypress 2e test: Cypress

用於 React 的工具庫

Javascript 為處理數組、對象、數字、對象和字符串提供了大量內置功能。 React 中最常用的 JavaScript 內置功能之一是內置 map() 數組。為什麼？因為您總是必須呈現組件中的列表。由於 JSX 是 HTML 和 JavaScript 的混合物，所以您可以使用 JavaScript 在數組上進行映射並返回 JSX。使用 React 創建列表組件變得簡單:

<code>const List = ({ list }) =>      {list.map(item => {item.title}
)}  
/<code>

但是，您可能需要選擇一個實用程序庫來提供更詳細的功能。您甚至可能希望在將這些實用函數鏈接起來時更加靈活，甚至可以將它們動態地組合在一起。這時，您將引入一個實用程序庫: Lodash 或 Ramda。對於每一個 JavaScript 開發者來說，Lodash 是一個更加實際的庫，而 Ramda 在函數式編程中有一個強大的核心。請記住，現代 JavaScript 提供了很多開箱即用的特性，現在使用實用程序庫的必要性已經降低了。

建議:

JavaScript
Lodash

react 和不可變的數據機構

原生 JavaScript 提供了大量內置工具來處理數據結構，就像它們是不可變的一樣。但是，如果您和您的團隊認為有必要實施不可變的數據結構，最流行的選擇之一是 Immer。就我個人而言，我不使用它，但是任何時候有人問到 JS 中的不變性(immutability)，大家都會指出 Immer，並且這可以加上 redux 或 React hooks。

React 國際化

當涉及到 React 應用程序的國際化時，您不僅需要考慮翻譯，還需要考慮多元化、日期和貨幣的格式化，以及其他一些事項。以下是最受歡迎的處理該問題的庫:

react-i18next
react-intl
LinguiJS
FBT

建議:

react-i18next

當涉及到在 React 中的富文本編輯器時，我只能想到以下內容，因為我沒有在 React 中使用任何其他內容:

Draft.js
Slate

React 中的支付

和其他網絡應用一樣，最常見的支付提供商是 Stripe 和 PayPal。兩者都可以整齊地集成到 React 中。

PayPal
Stripe Elements 或 Stripe Checkout

React 中的時間

如果你的 React 應用程序正在處理大量的日期和時區，你應該引入一個庫來為你管理這些事情。最受歡迎的庫是 moment.js。更輕量級的替代品是 date-fns 和 Day.js。

Reac 桌面應用

Electron 是跨平臺桌面應用程序的首選框架。不過，也有其他選擇，例如:

NW.js
Neutralino.js

React 的移動開發

我想把 React 從網絡帶到移動設備的首選解決方案仍然是 React Native。如果您是 React Native 開發人員，想要創建一個 Web 應用程序，您應該查看 React Native Web。

REACT VR/AR

實話說，我們很有可能用 React 深入虛擬現實或者增強現實中，我沒有使用過這些庫中的任何一個，但是它們是我在談到 React AR/VR 時從大腦閃過的就是：

React 360
react-viro
react-native-arkit

為 React 設計原型

如果您來自 UI/UX 背景，那麼您可能希望使用一個工具為新的 React 組件、佈局或 UI/UX 概念進行快速原型設計。我以前用過 Sketch，但最近轉到了 Figma。儘管我兩者都喜歡，但我現在並不後悔使用 Figma。另一個流行的工具是 Framer。

為 React 書寫文檔

如果你負責為你的軟件、 UI 庫或者其他東西編寫文檔，那麼你可以使用一些簡潔的 React 文檔工具。我已經廣泛地使用了 Storybook，我可以說他非常好用，但是我也聽說了其他解決方案的好處:

Styleguidist
docz
Docusaurus

總結

所以最終，React 生態系統可以看作是一個 React 的框架，但它保持靈活性。它是一個靈活的框架，您可以自己決定選擇哪些庫。您可以從小型開始，只添加庫來解決特定的問題。當應用程序增長時，您可以沿途擴展構建塊。否則你可以通過使用普通的 React 來保持輕量級。因此，這裡再次列出了可以補充 React 作為應用程序關於不同項目大小的核心的庫。請記住，這個列表是我的個人看法，我也渴望得到你的反饋。