前言

React生態(tài)系統(tǒng)已經(jīng)發(fā)展成為越來越多的開發(fā)工具和庫。過多的工具是對其流行性的真實證明。對于開發(fā)人員而言，導航這種以斷頸速度變化的迷宮可能是令人頭暈的練習。為了幫助您順利前進，以下是2020年必備的React工具列表。

[[329883]]

Hooks

 

 

• 網(wǎng)站：reactjs.org/docs/hooks-intro.html
• 倉庫：github.com/facebook/react
• GitHub星級：140,000+
• 開發(fā)人員：Facebook
• 版本：16.8
• 貢獻者：1,300+

從16.8版本開始，鉤子是React的新增功能。它們解鎖了無類組件中的有用功能。使用Hooks，React不再需要生命周期方法(例如componentDidMount管理狀態(tài))。這鼓勵了關注點的分離，因為組件無法管理自己的狀態(tài)。在類組件中放置大量狀態(tài)管理會增加復雜性。這使得有狀態(tài)組件更難以維護。Hooks試圖通過提供關鍵功能來緩解此問題。

以下是基本的掛鉤：

• useState：用于在無生命周期方法的情況下更改無類組件中的狀態(tài)
• useEffect：用于執(zhí)行渲染后的功能，對于觸發(fā)Ajax請求非常有用
• useContext：用于切換組件上下文數(shù)據(jù)，甚至在組件外部

優(yōu)點：

• 減輕狀態(tài)管理的復雜性
• 支持功能組件
• 鼓勵分離關注點

缺點：

• 上下文數(shù)據(jù)切換可以指數(shù)化認知負荷

功能組件(Functional Components)

 

 

• 網(wǎng)站：reactjs.org
• 倉庫：github.com/facebook/react
• GitHub星級：140,000+
• 開發(fā)人員：Facebook
• 當前版本：16.12
• 貢獻者：1,300+

功能組件是一種無需類組件即可創(chuàng)建JSX標記的聲明方式。它們包含功能范式，因為它們不管理生命周期方法中的狀態(tài)。這強調了沒有太多邏輯的UI標記。由于組件依賴道具，因此變得更容易測試。道具與渲染輸出具有一對一的關系。

這是React中功能組件的樣子：

 

const SimpleComponent = ({isInit, data}) => 
<> 
  {useEffect(() => {!isInt && loadAjaxData()})} 
  {data} 
</> 

優(yōu)點：

• 僅關注UI
• 可測試的組件
• 考慮組件時減少認知負荷

缺點：

• 沒有生命周期方法

創(chuàng)建React應用(Create React App)

 

 

• 網(wǎng)站：create-react-app.dev
• 倉庫：github.com/facebook/create-react-app
• GitHub星級：76,000+
• 開發(fā)人員：Facebook
• 當前版本：3.4
• 貢獻者：700+

觸發(fā)新的React項目的典型工具。這通過單個npm軟件包管理所有React依賴項。不再需要處理Babel，webpack等。整個依賴項工具鏈都使用react-scriptsin 進行了升級package.json。有一種方法可以將Create React App與任何服務器端渲染工具集成在一起。工具輸出文件夾中的index.html靜態(tài)資產(chǎn)public。此公用文件夾是靜態(tài)資產(chǎn)準備好進行集成的接觸點。

很容易上手：

 

npx create-react-app my-killer-app 

而且以后升級更容易：

 

npm i react-scripts@latest 

優(yōu)點：

• 容易上手
• 容易升級
• 單一元依賴性

缺點：

• 沒有服務器端渲染，但允許集成

代理服務器(Proxy Server)

 

 

• 網(wǎng)站：create-react-app.dev/docs/proxying-api-requests-in-development
• 倉庫：github.com/facebook/create-react-app
• GitHub星級：76,000+
• 開發(fā)人員：Facebook
• 版本：0.2.3
• 貢獻者：700+

從版本react-scripts@0.2.3或更高版本開始，可以代理API請求。這允許后端API和本地Create React App項目共存。從客戶端發(fā)出請求，以/my-killer-api/get-data通過代理服務器路由請求。這種無縫集成在本地開發(fā)人員和后期構建中均有效。如果本地開發(fā)人員在port上運行l(wèi)ocalhost:3000，則API請求將通過代理服務器。部署靜態(tài)資產(chǎn)后，它將經(jīng)過托管這些資產(chǎn)的任何后端。

要在中設置代理服務器package.json：

 

"proxy": "http://localhost/my-killer-api-base-url" 

如果后端API是通過相對路徑托管的，請設置主頁：

 

"homepage": "/relative-path" 

優(yōu)點：

• 與后端API無縫集成
• 消除了CORS問題
• 易于設置

道具類型(PropTypes)

 

 

• 網(wǎng)站：npmjs.com/package/prop-types
• 倉庫：github.com/facebook/prop-types
• GitHub星：3,000+
• 開發(fā)人員：Facebook
• 當前版本：15.7.2
• 投稿人：35+

聲明用于React組件的類型并記錄其意圖。如果類型不匹配，則會在本地開發(fā)人員中顯示警告。它支持所有的JavaScript原語，如bool，number和string。它可以通過記錄所需的道具isRequired。

例如：

 

import PropTypes; 
 
MyComponent.propTypes = { 
  boolProperty: PropTypes.bool, 
  numberProperty: PropTypes.number, 
  requiredProperty: PropTypes.string.isRequired 
}; 

優(yōu)點：

• 記錄組件的意圖
• 在本地開發(fā)人員中顯示警告
• 支持所有JavaScript原語

缺點：

• 沒有編譯類型檢查

TypeScript

 

 

• 網(wǎng)站：typescriptlang.org
• 倉庫：github.com/facebook/prop-types
• GitHub星級：58,000+
• 開發(fā)人員：Microsoft
• 當前版本：3.7.5
• 貢獻者：400+

可通過編譯類型檢查為React項目擴展的JavaScript。這支持所有帶有類型聲明的React庫和工具。它是JavaScript的超集，因此可以選擇退出類型檢查器。這既記錄了意圖，又在不匹配時使構建失敗。在Create React App項目中，通過傳入啟用它--template typescript。從版本開始提供TypeScript支持react-script@2.1.0。

聲明道具類型：

 

interface MyComponentProps { 
  boolProp?: boolean; // optional 
  numberProp?: number; // optional 
  requiredProp: string; 
} 

優(yōu)點：

• 編譯類型檢查
• 支持所有React工具和庫，包括Create React App
• 提高JavaScript技能的好方法

缺點：

• 有學習曲線，但可以選擇退出

Redux

 

 

• 網(wǎng)站：redux.js.org
• 倉庫：github.com/reduxjs/redux
• GitHub星：52,000+
• 開發(fā)商：月亮
• 當前版本：4.0.5
• 貢獻者：700+

JavaScript應用程序的可預測狀態(tài)管理容器。該工具帶有管理狀態(tài)數(shù)據(jù)的商店。狀態(tài)突變只能通過調度消息來實現(xiàn)。消息對象包含一種類型，該類型向減速器發(fā)送信號以觸發(fā)哪個突變。建議將所有內容保存在單個商店中。Redux在單個商店中支持多個reducer。減速器在輸入?yún)?shù)和輸出狀態(tài)之間具有一對一的關系。這使減速器具有純功能。

一個典型的改變狀態(tài)的reduce可能看起來像這樣：

 

const simpleReducer = (state = {}, action) => { 
  switch (action.type) { 
    case 'SIMPLE_UPDATE_DATA': 
      return {...state, data: action.payload}; 
 
    default: 
      return state; 
  } 
}; 

優(yōu)點：

• 可預測的狀態(tài)管理
• 單個商店中有多個異徑管
• 減速器是純函數(shù)

缺點：

• 從頭開始設置可能會有些痛苦

React-Redux

 

 

• 網(wǎng)站：react-redux.js.org
• 倉庫：github.com/reduxjs/redux
• GitHub星級：18,500+
• 開發(fā)商：月亮
• 當前版本：7.1.3
• 貢獻者：190+

Redux的官方React綁定，有兩個主要模塊：Provider和connect。Provider是帶有storeprop 的React組件。這個道具是單個商店如何連接JSX標記的方式。connect函數(shù)接受兩個參數(shù)：mapStateToProps和mapDispatchToProps。這是Redux的狀態(tài)管理與組件屬性聯(lián)系在一起的地方。當狀態(tài)發(fā)生變化或調度時，綁定負責在React中設置狀態(tài)。

這是連接的外觀：

 

import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 
 
const mapStateToProps = (state) => state.simple; 
const mapDispatchToProps = (dispatch) => 
  bindActionCreators({() => ({type: 'SIMPLE_UPDATE_DATA'})}, dispatch); 
 
connect(mapStateToProps, mapDispatchToProps)(SimpleComponent); 

優(yōu)點：

• Redux的官方React綁定
• 與JSX標記綁定
• 將組件連接到單個商店

缺點：

• 學習曲線有些陡峭

Redux-Thunk

 

 

• 網(wǎng)站：npmjs.com/package/redux-thunk
• 倉庫：github.com/reduxjs/redux-thunk
• GitHub星：14,000+
• 開發(fā)商：月亮
• 當前版本：2.3.0
• 貢獻者：40+

Thunk中間件，用于Redux進行異步API調用。它在重擊之后延遲執(zhí)行以解鎖異步。重擊是阻止評估的功能。例如，，() => 1 + 1因為它沒有立即執(zhí)行。這帶有一些細微之處，例如訪問存儲狀態(tài)和調度。thunk中還支持可選參數(shù)。

例如：

 

const loadData = () => async (dispatch, getState, optionalAsyncTool) => { 
  const state = getState(); 
 
  const response = await optionalAsyncTool.get('/url/' + state.data); 
  dispatch({type: 'SIMPLE_LOAD_DATA', payload: response.data}); 
}; 

優(yōu)點：

• 異步的典型工具
• 進入國家并派遣
• 可通過可選參數(shù)配置

缺點：

• 起初，用途不是很清楚

Redux記錄器(Redux-Logger)

 

 

• 網(wǎng)站：npmjs.com/package/redux-logger
• 倉庫：github.com/LogRocket/redux-logger
• GitHub星：5,000+
• 開發(fā)人員：Log Rocket
• 當前版本：2.0.4
• 貢獻者：40+

用于Redux的Logger，捕獲通過商店的所有調度。每次調度均在日志消息中顯示在開發(fā)控制臺中。它允許鉆入上一個和下一個狀態(tài)。分派中的操作也可用于有效負載檢查。該記錄器在本地開發(fā)人員中非常有用，可以在構建后刪除。

以下是Redux中間件中的潛在設置：

 

import { createStore } from 'redux'; 
 
let middleware = []; 
 
if (process.env.NODE_ENV === 'development') { // rip out post-build 
  const {logger} = require('redux-logger'); 
  middleware.push(logger); 
} 
 
export default () => createStore({}, applyMiddleware(...middleware)); 

優(yōu)點：

• 優(yōu)秀的Redux洞察力
• 捕獲商店中的所有調度
• 只能在本地開發(fā)人員中運行

缺點：

• 難以過濾掉不需要的消息

Lodash

 

 

• 網(wǎng)站：lodash.com
• 倉庫：github.com/lodash/lodash
• GitHub星級：43,500+
• 開發(fā)人員：Lodash Utilities
• 當前版本：4.17.5
• 投稿人：250+

一個現(xiàn)代的JavaScript實用程序庫，可用于React組件。onChange每個擊鍵一次響應表單輸入，如火災。如果組件從后端API獲取數(shù)據(jù)，則每次擊鍵都會觸發(fā)一次請求。這會阻塞后端API，并在許多人使用UI時引起問題。Lodash帶有防反彈事件，該事件會觸發(fā)許多按鍵的API請求。

設置onChange去抖動事件：

 

onChange={(e) => debounce(updateDataValue(e.target.value), 250)} 

優(yōu)點：

• 模塊化依賴
• 很好地與代碼拆分
• 易于使用

缺點：

• 知道何時對事件進行反跳不是很明顯

Axios

 

 

• 網(wǎng)站：npmjs.com/package/axios
• 倉庫：github.com/axios/axios
• GitHub星級：69,500+
• 開發(fā)人員：axios
• 當前版本：0.19.2
• 貢獻者：200+

基于Promise的HTTP客戶端，在thunk中效果很好。該工具支持async / await語法，以從瀏覽器發(fā)出Ajax請求。如果出現(xiàn)錯誤，它支持錯誤處理catch。該工具的API支持HTTP請求，例如GET，DELETE，POST，PUT和PATCH。這與Promise API調用(例如Promise.all()并行發(fā)送HTTP請求)也能很好地配合。

在內部，axios可以像這樣工作：

 

const loadData = () => async (dispatch, getState, axios) => { 
  try { 
    const response = await Promise.all([ 
      axios.get('/url'), 
      axios.post('/url', getState()) 
    ]); 
 
    dispatch(updateData(response[0].data)); 
    return dispatch(updateData(response[1].data)); 
  } catch (reason) { 
    return dispatch(error(reason.message)); 
  } 
}; 

優(yōu)點：

• 基于承諾
• 支持異步/等待
• 支持錯誤處理

缺點：

• 它再也無法實現(xiàn)了

Jest

 

 

• 網(wǎng)站：jestjs.io
• 倉庫：github.com/facebook/jest
• GitHub星級：29,500+
• 開發(fā)人員：Facebook
• 當前版本：25.1.0
• 貢獻者：1,000+

Jest是一個測試框架，專注于JavaScript項目的簡單性。好消息是它內置在Create React App中。它適用于使用Babel，TypeScript和Node的項目。大多數(shù)React項目上沒有任何配置。測試可以在監(jiān)視模式下運行，該模式可以跟蹤代碼更改并重新運行測試。該API包含it，并且expect可以快速上手。

確保測試執(zhí)行的健全性檢查是：

 

it('says true is true', () => { 
  expect(true).toBe(true); 
}); 

優(yōu)點：

• 使用Create React App輕松設置
• 流利的API
• 在監(jiān)視模式下運行

缺點：

• 骨骼太裸而無法渲染React組件

Enzyme

 

 

• 網(wǎng)站：airbnb.io/enzyme
• 倉庫：github.com/airbnb/enzyme
• GitHub星級：18,500+
• 開發(fā)商：Airbnb
• 當前版本：2.9.1
• 投稿人：300+

一個用于React的JavaScript測試實用程序，可以更輕松地測試組件。該API的含義與jQuery一樣直觀。要獲取酶，它需要兩個軟件包：enzyme和一個單獨的適配器。適配器必須與React版本兼容。例如，enzyme-adapter-react-16對于React ^16.4.0，

enzyme-adapter-react-16.3for ~16.3.0等等。適配器需要一個配置文件setupTest.js才能與Jest集成。

使用React 16時，請使用以下方法安裝酶：

 

npm i --save-dev enzyme enzyme-adapter-react-16 

優(yōu)點：

• 支持React組件
• 支持Jest測試框架
• 直觀的API

缺點：

• 在Jest中設置適配器有點痛苦

淺渲染器(Shallow Renderer)

 

 

• 網(wǎng)站：airbnb.io/enzyme/docs/api/shallow.html
• 倉庫：github.com/airbnb/enzyme
• GitHub星級：18,500+
• 開發(fā)商：Airbnb
• 當前版本：2.9.1
• 投稿人：300+

這是淺淺的呈現(xiàn)，有助于將測試限制在一個深度。它在不影響其子級的樹狀層次結構中呈現(xiàn)父級組件。這樣可以隔離測試并使斷言更加可靠。淺層渲染支持用于遍歷組件的很大一部分Enzyme API。該shallowAPI確實會在渲染期間componentDidMount和調用生命周期方法componentDidUpdate。使用Hooks時，淺渲染器不會調用useEffect。一個技巧是console.log(component.debug())檢查淺渲染器看到的內容。

要使用淺層渲染器測試React組件：

 

const component = shallow(<ParentComponent data={"Dave"} />); 
expect(component.find('p').at(0).text()).toBe('Dave'); 

優(yōu)點：

• 隔離測試
• 全功能API
• 允許快速調試

缺點：

• 必須瀏覽酵素API中的選項之海，才能在毛坯鉆石中找到鉆石

Storybook

 

 

• 網(wǎng)站：storybook.js.org
• 倉庫：github.com/storybookjs/storybook
• GitHub星級：45,500+
• 開發(fā)人員：故事書
• 當前版本：5.3.13
• 投稿人：900+

開源工具，用于隔離地手動測試React組件。故事書提供了一個沙箱，用于構建難以進入邊緣案例的組件。它允許進行模擬，因此可以呈現(xiàn)難以復制的關鍵狀態(tài)的組件。使用時，使用Create React App會自動進行設置react-scripts。故事書中的每個故事都可以針對具有多個狀態(tài)的單個組件。故事文件具有類似的約定，component.stories.js因此可以快速找到它們。

要開始使用Storybook，請執(zhí)行以下操作：

 

npx -p @storybook/cli sb init 

優(yōu)點：

• 涵蓋難以觸及的案例
• 在沙箱中渲染組件
• 與Create React App集成

缺點：

• 難以自動化測試

React Bootstrap

 

 

• 網(wǎng)站：react-bootstrap.github.io
• 倉庫：github.com/react-bootstrap/react-bootstrap
• GitHub星：17,000+
• 開發(fā)人員：react-bootstrap
• 當前版本：1.0.0-beta.16
• 投稿人：900+

這是為React重建的最流行的前端框架。每個Bootstrap組件都是作為React組件從頭開始構建的。這將替換Bootstrap JavaScript和nukes等jQuery依賴項。最新的Beta版本支持Bootstrap 4.3。React Bootstrap可與版本4中已經(jīng)發(fā)現(xiàn)的數(shù)千個Bootstrap主題一起使用。每個組件都具有可訪問性，默認情況下可訪問。它支持開箱即用的Create React App，還支持自定義主題。

在React項目中啟動React Bootstrap：

 

npm install react-bootstrap bootstrap 

結果可能是這樣的：

 

 

優(yōu)點：

• 使用React組件從頭開始重建
• 易用性
• 支持創(chuàng)建React App

缺點：

• 自定義主題在Create React App中可能很棘手

Material-UI

 

 

• 網(wǎng)站：material-ui.com
• 倉庫：github.com/mui-org/material-ui
• GitHub星級：54,500+
• 開發(fā)人員：Material-UI
• 當前版本：4.9.3
• 貢獻者：1,500+

流行的React組件，可以更快，更輕松地進行Web開發(fā)。這允許您構建自己的設計系統(tǒng)或從Material Design開始。提供高級和免費的模板和主題。高級主題的價格取決于功能。Material-UI通過NPM軟件包來進行快速安裝。

要開始使用Material-UI，請執(zhí)行以下操作：

 

npm install @material-ui/core 

結果可能是這樣的：

 

 

資源

優(yōu)點：

• 輕松構建強大的UI
• 提供許多組件
• 提供許多模板

缺點：

• 一些高級模板確實需要成本，但可能值得

Elemental UI

 

 

• 網(wǎng)站：elemental-ui.com
• 倉庫：github.com/elementalui/elemental
• GitHub星級：4,000+
• 開發(fā)人員：Elemental-UI
• 當前版本：0.6.1
• 貢獻者：25+

最初用于KeystoneJS的React應用程序工具包。這是一個實驗性的UI工具包，它源于實際需求。目標是一組獨立的或捆綁在一起的無組件的React組件。它具有毫不夸張的默認樣式和靈活的主題功能。

要開始使用元素界面：

 

npm i elemental --save 

結果可能如下所示：

 

 

優(yōu)點：

• 可重復使用的獨立組件
• 靈活的默認樣式
• 受現(xiàn)實世界場景啟發(fā)

缺點：

• 仍在開發(fā)中

Semantic UI

 

 

• 網(wǎng)站：react.semantic-ui.com
• 倉庫：github.com/Semantic-Org/Semantic-UI-React
• GitHub星：11,000+
• 開發(fā)商：語義組織
• 當前版本：0.88.2
• 投稿人：250+

官方的語義UI React集成UI工具包。免費提供jQuery，因為所有jQuery功能都在React中重建。聲明性API提供了強大的功能和道具驗證。增強通過as可以控制輸出，對MenuLinks和有用react-router。速記道具會生成標記，這使用例更易于使用。子組件可以完全訪問標記;這種靈活性解鎖了自定義組件。狀態(tài)組件無需額外布線即可直接管理狀態(tài)。例如，Dropdown點擊即可打開，而不onClick需要open道具。設置道具會將控制委托給該道具值，而其余的保持自動控制。

這就是React Semantic UI中的擴充可能看起來像：

 

import { Link } from 'react-router-dom'; 
 
<Menu> 
  <Menu.Item as={Link} to="/menu-item"> 
    Menu Item 
  </Menu.Item> 
</Menu> 

 

 

 

 

 

而且，這是外觀：

 

 

資源

優(yōu)點：

• jQuery免費
• 通過道具聲明
• 增強允許大量定制

缺點：

• 很難拿出任何

結論

如圖所示，React的生態(tài)系統(tǒng)在過去幾年中呈爆炸式增長。對于希望在一致的套件中重用React組件的企業(yè)來說，它是首選的工具。每個工具都是獨立的，幾乎沒有相互依賴性。對于2020年，我的建議是至少嘗試使用這些工具。