前端必備的20種基本React工具
前言
React生態(tài)系統(tǒng)已經(jīng)發(fā)展成為越來越多的開發(fā)工具和庫。過多的工具是對其流行性的真實(shí)證明。對于開發(fā)人員而言，導(dǎo)航這種以斷頸速度變化的迷宮可能是令人頭暈的練習(xí)。為了幫助您順利前進(jìn)，以下是2020年必備的React工具列表。
Hooks
- 網(wǎng)站：reactjs.org/docs/hooks-intro.html
- 倉庫：github.com/facebook/react
- GitHub星級：140,000+
- 開發(fā)人員：Facebook
- 版本：16.8
- 貢獻(xiàn)者：1,300+
從16.8版本開始，鉤子是React的新增功能。它們解鎖了無類組件中的有用功能。使用Hooks，React不再需要生命周期方法(例如componentDidMount管理狀態(tài))。這鼓勵了關(guān)注點(diǎn)的分離，因?yàn)榻M件無法管理自己的狀態(tài)。在類組件中放置大量狀態(tài)管理會增加復(fù)雜性。這使得有狀態(tài)組件更難以維護(hù)。Hooks試圖通過提供關(guān)鍵功能來緩解此問題。
以下是基本的掛鉤：
- useState：用于在無生命周期方法的情況下更改無類組件中的狀態(tài)
- useEffect：用于執(zhí)行渲染后的功能，對于觸發(fā)Ajax請求非常有用
- useContext：用于切換組件上下文數(shù)據(jù)，甚至在組件外部
優(yōu)點(diǎn)：
- 減輕狀態(tài)管理的復(fù)雜性
- 支持功能組件
- 鼓勵分離關(guān)注點(diǎn)
缺點(diǎn)：
- 上下文數(shù)據(jù)切換可以指數(shù)化認(rèn)知負(fù)荷
功能組件(Functional Components)
- 網(wǎng)站：reactjs.org
- 倉庫：github.com/facebook/react
- GitHub星級：140,000+
- 開發(fā)人員：Facebook
- 當(dāng)前版本：16.12
- 貢獻(xiàn)者：1,300+
功能組件是一種無需類組件即可創(chuàng)建JSX標(biāo)記的聲明方式。它們包含功能范式，因?yàn)樗鼈儾还芾砩芷诜椒ㄖ械臓顟B(tài)。這強(qiáng)調(diào)了沒有太多邏輯的UI標(biāo)記。由于組件依賴道具，因此變得更容易測試。道具與渲染輸出具有一對一的關(guān)系。
這是React中功能組件的樣子：
- const SimpleComponent = ({isInit, data}) =>
- <>
- {useEffect(() => {!isInt && loadAjaxData()})}
- {data}
- </>
優(yōu)點(diǎn)：
- 僅關(guān)注UI
- 可測試的組件
- 考慮組件時減少認(rèn)知負(fù)荷
缺點(diǎn)：
- 沒有生命周期方法
創(chuàng)建React應(yīng)用(Create React App)
- 網(wǎng)站：create-react-app.dev
- 倉庫：github.com/facebook/create-react-app
- GitHub星級：76,000+
- 開發(fā)人員：Facebook
- 當(dāng)前版本：3.4
- 貢獻(xiàn)者：700+
觸發(fā)新的React項(xiàng)目的典型工具。這通過單個npm軟件包管理所有React依賴項(xiàng)。不再需要處理Babel，webpack等。整個依賴項(xiàng)工具鏈都使用react-scriptsin 進(jìn)行了升級package.json。有一種方法可以將Create React App與任何服務(wù)器端渲染工具集成在一起。工具輸出文件夾中的index.html靜態(tài)資產(chǎn)public。此公用文件夾是靜態(tài)資產(chǎn)準(zhǔn)備好進(jìn)行集成的接觸點(diǎn)。
很容易上手：
- npx create-react-app my-killer-app
而且以后升級更容易：
- npm i react-scripts@latest
優(yōu)點(diǎn)：
- 容易上手
- 容易升級
- 單一元依賴性
缺點(diǎn)：
- 沒有服務(wù)器端渲染，但允許集成
代理服務(wù)器(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
- 貢獻(xiàn)者：700+
從版本react-scripts@0.2.3或更高版本開始，可以代理API請求。這允許后端API和本地Create React App項(xiàng)目共存。從客戶端發(fā)出請求，以/my-killer-api/get-data通過代理服務(wù)器路由請求。這種無縫集成在本地開發(fā)人員和后期構(gòu)建中均有效。如果本地開發(fā)人員在port上運(yùn)行l(wèi)ocalhost:3000，則API請求將通過代理服務(wù)器。部署靜態(tài)資產(chǎn)后，它將經(jīng)過托管這些資產(chǎn)的任何后端。
要在中設(shè)置代理服務(wù)器package.json：
- "proxy": "http://localhost/my-killer-api-base-url"
如果后端API是通過相對路徑托管的，請?jiān)O(shè)置主頁：
- "homepage": "/relative-path"
優(yōu)點(diǎn)：
- 與后端API無縫集成
- 消除了CORS問題
- 易于設(shè)置
道具類型(PropTypes)
- 網(wǎng)站：npmjs.com/package/prop-types
- 倉庫：github.com/facebook/prop-types
- GitHub星：3,000+
- 開發(fā)人員：Facebook
- 當(dāng)前版本：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)點(diǎn)：
- 記錄組件的意圖
- 在本地開發(fā)人員中顯示警告
- 支持所有JavaScript原語
缺點(diǎn)：
- 沒有編譯類型檢查
TypeScript
- 網(wǎng)站：typescriptlang.org
- 倉庫：github.com/facebook/prop-types
- GitHub星級：58,000+
- 開發(fā)人員：Microsoft
- 當(dāng)前版本：3.7.5
- 貢獻(xiàn)者：400+
可通過編譯類型檢查為React項(xiàng)目擴(kuò)展的JavaScript。這支持所有帶有類型聲明的React庫和工具。它是JavaScript的超集，因此可以選擇退出類型檢查器。這既記錄了意圖，又在不匹配時使構(gòu)建失敗。在Create React App項(xiàng)目中，通過傳入啟用它--template typescript。從版本開始提供TypeScript支持react-script@2.1.0。
聲明道具類型：
- interface MyComponentProps {
- boolProp?: boolean; // optional
- numberProp?: number; // optional
- requiredProp: string;
- }
優(yōu)點(diǎn)：
- 編譯類型檢查
- 支持所有React工具和庫，包括Create React App
- 提高JavaScript技能的好方法
缺點(diǎn)：
- 有學(xué)習(xí)曲線，但可以選擇退出
Redux
- 網(wǎng)站：redux.js.org
- 倉庫：github.com/reduxjs/redux
- GitHub星：52,000+
- 開發(fā)商：月亮
- 當(dāng)前版本：4.0.5
- 貢獻(xiàn)者：700+
JavaScript應(yīng)用程序的可預(yù)測狀態(tài)管理容器。該工具帶有管理狀態(tài)數(shù)據(jù)的商店。狀態(tài)突變只能通過調(diào)度消息來實(shí)現(xiàn)。消息對象包含一種類型，該類型向減速器發(fā)送信號以觸發(fā)哪個突變。建議將所有內(nèi)容保存在單個商店中。Redux在單個商店中支持多個reducer。減速器在輸入?yún)?shù)和輸出狀態(tài)之間具有一對一的關(guān)系。這使減速器具有純功能。
一個典型的改變狀態(tài)的reduce可能看起來像這樣：
- const simpleReducer = (state = {}, action) => {
- switch (action.type) {
- case 'SIMPLE_UPDATE_DATA':
- return {...state, data: action.payload};
- default:
- return state;
- }
- };
優(yōu)點(diǎn)：
- 可預(yù)測的狀態(tài)管理
- 單個商店中有多個異徑管
- 減速器是純函數(shù)
缺點(diǎn)：
- 從頭開始設(shè)置可能會有些痛苦
React-Redux
- 網(wǎng)站：react-redux.js.org
- 倉庫：github.com/reduxjs/redux
- GitHub星級：18,500+
- 開發(fā)商：月亮
- 當(dāng)前版本：7.1.3
- 貢獻(xiàn)者：190+
Redux的官方React綁定，有兩個主要模塊：Provider和connect。Provider是帶有storeprop 的React組件。這個道具是單個商店如何連接JSX標(biāo)記的方式。connect函數(shù)接受兩個參數(shù)：mapStateToProps和mapDispatchToProps。這是Redux的狀態(tài)管理與組件屬性聯(lián)系在一起的地方。當(dāng)狀態(tài)發(fā)生變化或調(diào)度時，綁定負(fù)責(zé)在React中設(shè)置狀態(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)點(diǎn)：
- Redux的官方React綁定
- 與JSX標(biāo)記綁定
- 將組件連接到單個商店
缺點(diǎn)：
- 學(xué)習(xí)曲線有些陡峭
Redux-Thunk
- 網(wǎng)站：npmjs.com/package/redux-thunk
- 倉庫：github.com/reduxjs/redux-thunk
- GitHub星：14,000+
- 開發(fā)商：月亮
- 當(dāng)前版本：2.3.0
- 貢獻(xiàn)者：40+
Thunk中間件，用于Redux進(jìn)行異步API調(diào)用。它在重?fù)糁笱舆t執(zhí)行以解鎖異步。重?fù)羰亲柚乖u估的功能。例如，，() => 1 + 1因?yàn)樗鼪]有立即執(zhí)行。這帶有一些細(xì)微之處，例如訪問存儲狀態(tài)和調(diào)度。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)點(diǎn)：
- 異步的典型工具
- 進(jìn)入國家并派遣
- 可通過可選參數(shù)配置
缺點(diǎn)：
- 起初，用途不是很清楚
Redux記錄器(Redux-Logger)
- 網(wǎng)站：npmjs.com/package/redux-logger
- 倉庫：github.com/LogRocket/redux-logger
- GitHub星：5,000+
- 開發(fā)人員：Log Rocket
- 當(dāng)前版本：2.0.4
- 貢獻(xiàn)者：40+
用于Redux的Logger，捕獲通過商店的所有調(diào)度。每次調(diào)度均在日志消息中顯示在開發(fā)控制臺中。它允許鉆入上一個和下一個狀態(tài)。分派中的操作也可用于有效負(fù)載檢查。該記錄器在本地開發(fā)人員中非常有用，可以在構(gòu)建后刪除。
以下是Redux中間件中的潛在設(shè)置：
- 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)點(diǎn)：
- 優(yōu)秀的Redux洞察力
- 捕獲商店中的所有調(diào)度
- 只能在本地開發(fā)人員中運(yùn)行
缺點(diǎn)：
- 難以過濾掉不需要的消息
Lodash
- 網(wǎng)站：lodash.com
- 倉庫：github.com/lodash/lodash
- GitHub星級：43,500+
- 開發(fā)人員：Lodash Utilities
- 當(dāng)前版本：4.17.5
- 投稿人：250+
一個現(xiàn)代的JavaScript實(shí)用程序庫，可用于React組件。onChange每個擊鍵一次響應(yīng)表單輸入，如火災(zāi)。如果組件從后端API獲取數(shù)據(jù)，則每次擊鍵都會觸發(fā)一次請求。這會阻塞后端API，并在許多人使用UI時引起問題。Lodash帶有防反彈事件，該事件會觸發(fā)許多按鍵的API請求。
設(shè)置onChange去抖動事件：
- onChange={(e) => debounce(updateDataValue(e.target.value), 250)}
優(yōu)點(diǎn)：
- 模塊化依賴
- 很好地與代碼拆分
- 易于使用
缺點(diǎn)：
- 知道何時對事件進(jìn)行反跳不是很明顯
Axios
- 網(wǎng)站：npmjs.com/package/axios
- 倉庫：github.com/axios/axios
- GitHub星級：69,500+
- 開發(fā)人員：axios
- 當(dāng)前版本：0.19.2
- 貢獻(xiàn)者：200+
基于Promise的HTTP客戶端，在thunk中效果很好。該工具支持async / await語法，以從瀏覽器發(fā)出Ajax請求。如果出現(xiàn)錯誤，它支持錯誤處理catch。該工具的API支持HTTP請求，例如GET，DELETE，POST，PUT和PATCH。這與Promise API調(diào)用(例如Promise.all()并行發(fā)送HTTP請求)也能很好地配合。
在內(nèi)部，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)點(diǎn)：
- 基于承諾
- 支持異步/等待
- 支持錯誤處理
缺點(diǎn)：
- 它再也無法實(shí)現(xiàn)了
Jest
- 網(wǎng)站：jestjs.io
- 倉庫：github.com/facebook/jest
- GitHub星級：29,500+
- 開發(fā)人員：Facebook
- 當(dāng)前版本：25.1.0
- 貢獻(xiàn)者：1,000+
Jest是一個測試框架，專注于JavaScript項(xiàng)目的簡單性。好消息是它內(nèi)置在Create React App中。它適用于使用Babel，TypeScript和Node的項(xiàng)目。大多數(shù)React項(xiàng)目上沒有任何配置。測試可以在監(jiān)視模式下運(yùn)行，該模式可以跟蹤代碼更改并重新運(yùn)行測試。該API包含it，并且expect可以快速上手。
確保測試執(zhí)行的健全性檢查是：
- it('says true is true', () => {
- expect(true).toBe(true);
- });
優(yōu)點(diǎn)：
- 使用Create React App輕松設(shè)置
- 流利的API
- 在監(jiān)視模式下運(yùn)行
缺點(diǎn)：
- 骨骼太裸而無法渲染React組件
Enzyme
- 網(wǎng)站：airbnb.io/enzyme
- 倉庫：github.com/airbnb/enzyme
- GitHub星級：18,500+
- 開發(fā)商：Airbnb
- 當(dāng)前版本：2.9.1
- 投稿人：300+
一個用于React的JavaScript測試實(shí)用程序，可以更輕松地測試組件。該API的含義與jQuery一樣直觀。要獲取酶，它需要兩個軟件包：enzyme和一個單獨(dú)的適配器。適配器必須與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)點(diǎn)：
- 支持React組件
- 支持Jest測試框架
- 直觀的API
缺點(diǎn)：
- 在Jest中設(shè)置適配器有點(diǎn)痛苦
淺渲染器(Shallow Renderer)
- 網(wǎng)站：airbnb.io/enzyme/docs/api/shallow.html
- 倉庫：github.com/airbnb/enzyme
- GitHub星級：18,500+
- 開發(fā)商：Airbnb
- 當(dāng)前版本：2.9.1
- 投稿人：300+
這是淺淺的呈現(xiàn)，有助于將測試限制在一個深度。它在不影響其子級的樹狀層次結(jié)構(gòu)中呈現(xiàn)父級組件。這樣可以隔離測試并使斷言更加可靠。淺層渲染支持用于遍歷組件的很大一部分Enzyme API。該shallowAPI確實(shí)會在渲染期間componentDidMount和調(diào)用生命周期方法componentDidUpdate。使用Hooks時，淺渲染器不會調(diào)用useEffect。一個技巧是console.log(component.debug())檢查淺渲染器看到的內(nèi)容。
要使用淺層渲染器測試React組件：
- const component = shallow(<ParentComponent data={"Dave"} />);
- expect(component.find('p').at(0).text()).toBe('Dave');
優(yōu)點(diǎn)：
- 隔離測試
- 全功能API
- 允許快速調(diào)試
缺點(diǎn)：
- 必須瀏覽酵素API中的選項(xiàng)之海，才能在毛坯鉆石中找到鉆石
Storybook
- 網(wǎng)站：storybook.js.org
- 倉庫：github.com/storybookjs/storybook
- GitHub星級：45,500+
- 開發(fā)人員：故事書
- 當(dāng)前版本：5.3.13
- 投稿人：900+
開源工具，用于隔離地手動測試React組件。故事書提供了一個沙箱，用于構(gòu)建難以進(jìn)入邊緣案例的組件。它允許進(jìn)行模擬，因此可以呈現(xiàn)難以復(fù)制的關(guān)鍵狀態(tài)的組件。使用時，使用Create React App會自動進(jìn)行設(shè)置react-scripts。故事書中的每個故事都可以針對具有多個狀態(tài)的單個組件。故事文件具有類似的約定，component.stories.js因此可以快速找到它們。
要開始使用Storybook，請執(zhí)行以下操作：
- npx -p @storybook/cli sb init
優(yōu)點(diǎn)：
- 涵蓋難以觸及的案例
- 在沙箱中渲染組件
- 與Create React App集成
缺點(diǎn)：
- 難以自動化測試
React Bootstrap
- 網(wǎng)站：react-bootstrap.github.io
- 倉庫：github.com/react-bootstrap/react-bootstrap
- GitHub星：17,000+
- 開發(fā)人員：react-bootstrap
- 當(dāng)前版本：1.0.0-beta.16
- 投稿人：900+
這是為React重建的最流行的前端框架。每個Bootstrap組件都是作為React組件從頭開始構(gòu)建的。這將替換Bootstrap JavaScript和nukes等jQuery依賴項(xiàng)。最新的Beta版本支持Bootstrap 4.3。React Bootstrap可與版本4中已經(jīng)發(fā)現(xiàn)的數(shù)千個Bootstrap主題一起使用。每個組件都具有可訪問性，默認(rèn)情況下可訪問。它支持開箱即用的Create React App，還支持自定義主題。
在React項(xiàng)目中啟動React Bootstrap：
- npm install react-bootstrap bootstrap
結(jié)果可能是這樣的：
優(yōu)點(diǎn)：
- 使用React組件從頭開始重建
- 易用性
- 支持創(chuàng)建React App
缺點(diǎn)：
- 自定義主題在Create React App中可能很棘手
Material-UI
- 網(wǎng)站：material-ui.com
- 倉庫：github.com/mui-org/material-ui
- GitHub星級：54,500+
- 開發(fā)人員：Material-UI
- 當(dāng)前版本：4.9.3
- 貢獻(xiàn)者：1,500+
流行的React組件，可以更快，更輕松地進(jìn)行Web開發(fā)。這允許您構(gòu)建自己的設(shè)計(jì)系統(tǒng)或從Material Design開始。提供高級和免費(fèi)的模板和主題。高級主題的價格取決于功能。Material-UI通過NPM軟件包來進(jìn)行快速安裝。
要開始使用Material-UI，請執(zhí)行以下操作：
- npm install @material-ui/core
結(jié)果可能是這樣的：
資源
優(yōu)點(diǎn)：
- 輕松構(gòu)建強(qiáng)大的UI
- 提供許多組件
- 提供許多模板
缺點(diǎn)：
- 一些高級模板確實(shí)需要成本，但可能值得
Elemental UI
- 網(wǎng)站：elemental-ui.com
- 倉庫：github.com/elementalui/elemental
- GitHub星級：4,000+
- 開發(fā)人員：Elemental-UI
- 當(dāng)前版本：0.6.1
- 貢獻(xiàn)者：25+
最初用于KeystoneJS的React應(yīng)用程序工具包。這是一個實(shí)驗(yàn)性的UI工具包，它源于實(shí)際需求。目標(biāo)是一組獨(dú)立的或捆綁在一起的無組件的React組件。它具有毫不夸張的默認(rèn)樣式和靈活的主題功能。
要開始使用元素界面：
- npm i elemental --save
結(jié)果可能如下所示：
優(yōu)點(diǎn)：
- 可重復(fù)使用的獨(dú)立組件
- 靈活的默認(rèn)樣式
- 受現(xiàn)實(shí)世界場景啟發(fā)
缺點(diǎn)：
- 仍在開發(fā)中
Semantic UI
- 網(wǎng)站：react.semantic-ui.com
- 倉庫：github.com/Semantic-Org/Semantic-UI-React
- GitHub星：11,000+
- 開發(fā)商：語義組織
- 當(dāng)前版本：0.88.2
- 投稿人：250+
官方的語義UI React集成UI工具包。免費(fèi)提供jQuery，因?yàn)樗衘Query功能都在React中重建。聲明性API提供了強(qiáng)大的功能和道具驗(yàn)證。增強(qiáng)通過as可以控制輸出，對MenuLinks和有用react-router。速記道具會生成標(biāo)記，這使用例更易于使用。子組件可以完全訪問標(biāo)記;這種靈活性解鎖了自定義組件。狀態(tài)組件無需額外布線即可直接管理狀態(tài)。例如，Dropdown點(diǎn)擊即可打開，而不onClick需要open道具。設(shè)置道具會將控制委托給該道具值，而其余的保持自動控制。
這就是React Semantic UI中的擴(kuò)充可能看起來像：
- import { Link } from 'react-router-dom';
- <Menu>
- <Menu.Item as={Link} to="/menu-item">
- Menu Item
- </Menu.Item>
- </Menu>
而且，這是外觀：
資源
優(yōu)點(diǎn)：
- jQuery免費(fèi)
- 通過道具聲明
- 增強(qiáng)允許大量定制
缺點(diǎn)：
- 很難拿出任何
結(jié)論
如圖所示，React的生態(tài)系統(tǒng)在過去幾年中呈爆炸式增長。對于希望在一致的套件中重用React組件的企業(yè)來說，它是首選的工具。每個工具都是獨(dú)立的，幾乎沒有相互依賴性。對于2020年，我的建議是至少嘗試使用這些工具。
