2020 年你應該知道的 React 庫

時間 2020-02-20

標籤應該知道 react 欄目 React 简体版

原文原文鏈接

首次發表於本人博客：前端桃園
聲明：本文爲譯文，原文連接：https://www.robinwieruch.de/r...javascript

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

然而對於 React 來講，它的核心並非完善全部的可選庫。這是優點仍是劣勢取決於你本身。當我從 Angular 切換到 React，我絕對經歷了它做爲 React 的優點。css

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

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

如何開始 React

若是你是一個徹底不熟悉 React 的初學者想建立一個 React 項目，加入 React 的世界。有許多工具包項目能夠選擇，每一個項目都試圖知足不一樣的需求。 React 社區的現狀是經過 Facebook 的 create-react-app(CRA)。它提供了一個零配置的設置，並給你一個開箱即用而且簡單的啓動和運行的 React 應用程序。全部的工具都對您隱藏起來了，可是最終要由您來更改這些工具。java

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

若是您只是想了解這些初學者工具包是如何工做的，那麼能夠嘗試從頭開始設置 React 項目。你將從一個基本的 HTML 和 JavaScript 項目開始，而後本身添加 React 和它的支持工具。webpack

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

建議：git

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 是很好的。

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

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

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

import styles from './style.css';
const Headline = ({ title }) =>
  <h1 className={styles.headline}>
    {title}
  </h1>

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

import styled from 'styled-components';
const BlueHeadline = styled.h1`
  color: blue;
`;
const Headline = ({ title }) =>
  <BlueHeadline>
    {title}
  </BlueHeadline>

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

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

是否選擇 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 選擇:

React 動畫

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

建議:

React Transition Group

React 可視化和圖表庫

若是你真的想本身從頭開始構建圖表，你沒辦法不去學習 D3 。這是一個底層的可視化庫，它爲你提供了建立使人驚歎的圖表所需的一切。然而，學習 D3 是一個徹底不一樣的冒險，所以許多開發人員只是想選擇一個 React 圖表庫，它能夠爲他們作任何事情，以換取靈活性。如下是一些流行的解決方案:

React 中的表單庫

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

建議:

Formik
React Hook Form

React 中的數據獲取庫

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

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 (
    ...
  );
}

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

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

建議:

瀏覽器的本地 fetch API
axios
Apollo Client

React 類型檢查

幸運的是 React 有本身的類型檢查能力。使用 PropTypes，你能夠爲你的 React 組件定義傳入的 props。不管什麼時候向組件傳遞了錯誤的類型，在運行應用程序時都會收到錯誤消息。可是這種形式的類型檢查只應該用於較小的應用程序。

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,
};

在較大的 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 或 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 建立列表組件變得簡單:

const List = ({ list }) =>
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>

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

建議:

JavaScript
Lodash

react 和不可變的數據機構

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

React 國際化

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

建議:

react-i18next

React 富文本編輯器

當涉及到在 React 中的富文本編輯器時，我只能想到如下內容，由於我沒有在 React 中使用任何其餘內容:

React 中的支付

和其餘網絡應用同樣，最多見的支付提供商是 Stripe 和 PayPal。二者均可以整齊地集成到 React 中。

PayPal
Stripe Elements 或 Stripe Checkout

React 中的時間

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

Reac 桌面應用

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

React 的移動開發

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

REACT VR/AR

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

爲 React 設計原型

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

爲 React 書寫文檔

若是你負責爲你的軟件、 UI 庫或者其餘東西編寫文檔，那麼你可使用一些簡潔的 React 文檔工具。我已經普遍地使用了 Storybook，我能夠說他很是好用，可是我也據說了其餘解決方案的好處:

總結

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