关于前端:前端必备的20种基本React工具干货

46次阅读

共计 9349 个字符，预计需要花费 24 分钟才能阅读完成。

前言

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

正文完
javascript
发表至： javascript
2021-03-24
 0
深入理解Nodejs-进程与线程8000长文彻底搞懂
关于javascript:前端打包优化
关于javascript:JS实现JSON对象与URL参数的相互转换
基于浏览器的JavaScript文件压缩、导出