幹貨列表目錄30個前端開發人員的救生工具「幹貨」推薦36種免費React模板和主題「幹貨」收集22種開源Vue模板和主題框架「幹貨」8個頂級React.js免費模板20多種最佳遠程工作工具「幹貨」25個不可錯過的實用前端工具「幹貨滿滿」細品269個JavaScript小函數，讓你少加班熬夜（一）「值得收藏」更多React幹貨資料請見本篇文章列表前言React生態系統已經發展成為越來越多的開發工具和庫。過多的工具是對其流行性的真實證明。對於開發人員而言，導航這種以斷頸速度變化的迷宮可能是令人頭暈的練習。為瞭幫助您順利前進，以下是2020年必備的React工具列表。Hooks網站：reactjs.org/docs/hooks-intro.html倉庫：github.com/facebook/reactGitHub星級：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/reactGitHub星級：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-appGitHub星級：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-appGitHub星級：76,000+開發人員：Facebook版本：0.2.3貢獻者：700+從版本[email protected]或更高版本開始，可以代理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-typesGitHub星：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-typesGitHub星級：58,000+開發人員：Microsoft當前版本：3.7.5貢獻者：400+可通過編譯類型檢查為React項目擴展的JavaScript。這支持所有帶有類型聲明的React庫和工具。它是JavaScript的超集，因此可以選擇退出類型檢查器。這既記錄瞭意圖，又在不匹配時使構建失敗。在Create React App項目中，通過傳入啟用它–template typescript。從版本開始提供TypeScript支持[email protected]。聲明道具類型：interface MyComponentProps {
boolProp?: boolean; // optional
numberProp?: number; // optional
requiredProp: string;
}
優點：編譯類型檢查支持所有React工具和庫，包括Create React App提高JavaScript技能的好方法缺點：有學習曲線，但可以選擇退出Redux網站：redux.js.org倉庫：github.com/reduxjs/reduxGitHub星：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/reduxGitHub星級：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-thunkGitHub星：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-loggerGitHub星：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/lodashGitHub星級：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/axiosGitHub星級：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/jestGitHub星級：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/enzymeGitHub星級：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/enzymeGitHub星級：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/storybookGitHub星級：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-bootstrapGitHub星：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-uiGitHub星級：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/elementalGitHub星級：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-ReactGitHub星：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年，我的建議是至少嘗試使用這些工具。推薦React 學習相關文章《8個頂級React.js免費模板》《推薦36種免費React模板和主題「幹貨」》《「筆記」React Hooks 深入細品系列》《這就是你日思夜想的 React 原生動態加載「值得收藏」》《「幹貨滿滿」React Hooks 最佳實踐》《手把手教你如何實現一個React水印組件「實踐」》《「實踐」React 中必會的 10 個概念》《「幹貨」深入淺出React組件邏輯復用的那些事兒》《手把手教你從Mixin深入到HOC再到Hook【React】》《深入Facebook 官方React 狀態管理器Recoil講解》《手把手教你實踐搭建React組件庫「超詳細」》《在 React 中自動復制文本到剪貼板「實踐」》《「幹貨滿滿」從零實現 react-redux》《深入詳解大佬用33行代碼實現瞭React》《讓你的 React 組件性能跑得再快一點「實踐」》《React源碼分析與實現(三)：實踐 DOM Diff》《React源碼分析與實現(一)：組件的初始化與渲染「實踐篇」》《React源碼分析與實現(二)：狀態、屬性更新->setState「實踐篇」》《細說React 核心設計中的閃光點》《手把手教你10個案例理解React hooks的渲染邏輯「實踐」》《React-Redux 100行代碼簡易版探究原理》《手把手深入教你5個技巧編寫更好的React代碼【實踐】》《React 函數式組件性能優化知識點指南匯總》《13個精選的React JS框架》《深入淺出畫圖講解React Diff原理【實踐】》《【React深入】React事件機制》《Vue 3.0 Beta 和React 開發者分別杠上瞭》《手把手深入Redux react-redux中間件設計及原理（上）【實踐】》《手把手深入Redux react-redux中間件設計及原理（下）【實踐】》《前端框架用vue還是react？清晰對比兩者差異》《為瞭學好 React Hooks, 我解析瞭 Vue Composition API》《【React 高級進階】探索 store 設計、從零實現 react-redux》《寫React Hooks前必讀》《深入淺出掌握React 與 React Native這兩個框架》《可靠React組件設計的7個準則之SRP》《React Router v6 新特性及遷移指南》《用React Hooks做一個搜索欄》《你需要的 React + TypeScript 50 條規范和經驗》《手把手教你繞開React useEffect的陷阱》《淺析 React / Vue 跨端渲染原理與實現》《React 開發必須知道的 34 個技巧【近1W字】》《三張圖詳細解說React組件的生命周期》《手把手教你深入淺出實現Vue3 & React Hooks新UI Modal彈窗》《手把手教你搭建一個React TS 項目模板》《全平臺（Vue/React/微信小程序）任意角度旋圖片裁剪組件》《40行代碼把Vue3的響應式集成進React做狀態管理》《手把手教你深入淺出React 迷惑的問題點【完整版】》