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