前言

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年，我的倡议是至多尝试应用这些工具。