JavaScript

20个重要的React工具

卡米洛·雷耶斯
分享

React生态系统已经发展成为一个不断增长的开发工具和库列表。大量的工具是React受欢迎程度的真实证明。对于开发者来说，在这个以惊人速度变化的迷宫中导航是一种令人眼花缭乱的练习。为了帮助你掌握课程，下面是2020年React的基本工具、技术和技能列表。

钩子

虽然严格来说不是一个工具，但任何在2020年使用React的开发人员都可以需要熟悉挂钩。这是React 16.8版本的新功能，可以解锁函数组件中的有用功能。例如，useStateHook允许函数组件拥有自己的状态，而useEffect允许您在初始渲染后执行副作用-例如，操作DOM或数据获取。钩子可用于在功能组件中复制生命周期方法，并允许您在组件之间共享代码。

以下基本的钩子是可用的:

  • useState:用于在没有生命周期方法的情况下改变函数组件中的状态
  • useEffect:用于在渲染后执行函数，对触发Ajax请求很有用
  • useContext:用于访问组件上下文数据，甚至在组件道具之外

优点:

  • 降低状态管理的复杂性
  • 支持功能组件
  • 鼓励关注点分离

缺点:

  • 上下文数据切换会增加认知负荷

如果你想了解更多关于钩子的知识，请查看我们的教程。”React Hooks:如何开始并建立自己的”。

功能组件

随着钩子的出现，函数组件(一种不使用类创建JSX标记的声明性方法)比以往任何时候都更加流行。它们采用函数式范式，因为它们不在生命周期方法中管理状态。这强调了在没有太多逻辑的情况下关注UI标记。因为组件依赖于道具，所以更容易测试。道具有一个一对一的与呈现的输出的关系。

这是React中函数组件的样子:

函数欢迎（道具）｛返回<h1>你好,｛道具．的名字｝h1>；｝

优点:

  • 专注于UI
  • 可测试的组件
  • 在考虑组件时减少认知负荷

缺点:

  • 没有生命周期方法

创建React应用

Create React App是启动一个新React项目的必备工具。它通过一个npm包管理所有React依赖项。不用再处理巴别塔，webpack之类的东西了。只需要一个命令就可以建立一个支持React、JSX和ES6的本地开发环境。但这还不是全部。Create React App还提供热模块重新加载(开发时你的更改会立即反映在浏览器中)，自动代码检测，测试运行器和构建脚本来捆绑JS, CSS和用于生产的图像。

这很容易开始:

create-react-app my-killer-app

而且以后更容易升级。整个依赖工具链升级react-scripts在package.json：

npm我react-scripts@latest

优点:

  • 容易上手
  • 易于升级
  • 单一meta-dependency

缺点:

  • 没有服务器端呈现，但是允许集成

如果您想了解更多关于使用Create React App的信息，请参阅我们的教程。”创建React应用程序-快速准备React项目”。

代理服务器

从版本开始react-scripts@0.2.3或者更高，它可以代理API请求。这允许后端API和本地Create React App项目共存。从客户端，向/ my-killer-api /获取数据通过代理服务器路由请求。这种无缝集成既适用于本地开发，也适用于后期构建。如果本地dev运行在端口上localhost: 3000，然后API请求通过代理服务器。一旦部署了静态资产，它就会经过承载这些资产的任何后端。

设置代理服务器package.json：

“代理”：“http://localhost/my-killer-api-base-url”

如果后端API使用相对路径，则设置主页:

“主页”：“/相对路径”

优点:

  • 与后端API无缝集成
  • 消除CORS问题
  • 易于设置

反对

  • 可能需要一个带有多个api的服务器端代理层

proptype

PropTypes声明了React组件的类型，并记录了它的意图。如果类型不匹配，这将在本地开发中显示一个警告。它支持所有的JavaScript原语，比如布尔，数量,字符串．它可以记录哪些道具是必需的isRequired．

例如:

进口proptype；MyComponent．proptype＝｛boolProperty：proptype．保龄球，numberProperty：proptype．数量，requiredProperty：proptype．字符串．isRequired｝；

优点:

  • 文档组件的意图
  • 在本地开发中显示警告
  • 支持所有JavaScript原语

缺点:

  • 没有编译类型检查

打印稿

JavaScript，用于React项目的编译类型检查。它支持所有带有类型声明的React库和工具。它是JavaScript的超集，所以可以选择不使用类型检查器。这既记录了意图，也在不匹配时导致构建失败。在创建React应用程序项目中，通过传入将其打开——模板打印稿TypeScript支持从版本开始react-script@2.1.0．

要声明一个道具类型:

接口MyComponentProps｛boolProp?：布尔；/ /可选numberProp?：数量；/ /可选requiredProp：字符串；｝

优点:

  • 编译类型检查
  • 支持所有React工具和库，包括创建React应用程序
  • 提高JavaScript技能的好方法

缺点:

  • 有一个学习曲线，但选择退出是可能的

如果你想了解更多关于在React中使用TypeScript的知识，请查看“使用TypeScript:最佳实践”。

回来的

JavaScript应用程序的可预测状态管理容器。该工具带有一个管理状态数据的存储。状态突变只能通过分派消息实现。消息对象包含一个类型，该类型向减速器发出触发哪个突变的信号。建议是将应用中的所有内容都放在一个商店中。Redux在一个存储中支持多个减速器。约简器的输入参数和输出状态是一对一的关系。这使得约简成为纯函数。

一个典型的改变状态的减速器可能是这样的:

常量simpleReducer＝（状态＝｛｝，行动）= >｛开关（行动．类型）｛情况下“SIMPLE_UPDATE_DATA”：返回｛.．.状态，数据：行动．有效载荷｝；默认的：返回状态；｝｝；

优点:

  • 可预测状态管理
  • 单个存储中有多个减速器
  • 约简是纯函数

缺点:

  • 从头开始设置可能会有点痛苦

React-Redux

如果你想在你的React应用中使用Redux，你很快就会发现Redux的官方React绑定。它分为两个主要模块:提供者而且连接．的提供者是一个React组件商店道具。这个道具是单个存储如何连接到JSX标记的。的连接函数接受两个参数:mapStateToProps,mapDispatchToProps．这就是Redux的状态管理与组件道具绑定的地方。当状态发生变化或发生火灾时，绑定负责在React中设置状态。

这是连接的样子:

进口｛bindActionCreators｝从“回来的”；进口｛连接｝从“react-redux”；常量mapStateToProps＝（状态）= >状态．简单的；常量mapDispatchToProps＝（调度）= >bindActionCreators（｛（）= >（｛类型：“SIMPLE_UPDATE_DATA”｝）｝，调度）；连接（mapStateToProps，mapDispatchToProps）（SimpleComponent）；

优点:

  • Redux的官方React绑定
  • 绑定JSX标记
  • 将组件连接到单个存储区

缺点:

  • 学习曲线有点陡峭

还应该注意的是，随着钩子和React的Context API的引入，在一些React应用程序中可以取代Redux。你可以在"如何用React钩子和上下文API替换Redux”。

反应的路由器

React Router是React事实上的标准路由库。当你需要在一个有多个视图的React应用程序中导航时，你需要一个路由器来管理url。React Router负责这个，让你的应用UI和URL保持同步。

该库包含三个包:react-router，react-router-dom,react-router-native．路由器的核心包是react-router，而其他两个则是特定于环境的。你应该使用react-router-dom如果你要建一个网站react-router-native如果你正在构建React Native应用程序。

React路由器的最新版本介绍了钩子，它允许您访问路由器的状态并从组件内部执行导航，以及更新的路由呈现模式:

<路线路径＝＂/＂><首页/>路线>

如果你想了解更多React路由器可以做什么，请参阅“React Router v5:完整指南”。

优点:

  • 组件之间的路由非常快
  • 动画和过渡可以很容易地实现
  • 将组件连接到单个存储区

缺点:

  • 不需要额外的配置，就可以下载用户可能不会访问的视图的数据
  • 客户端路由(将JavaScript转换为HTML)具有SEO含义

ESLint

ESLint是一个检测工具，可以用来保持你的代码风格一致，加强代码质量，并提前发现潜在的错误和坏模式。它提供了一个带有react特定检测规则的插件And常与Airbnb的React风格指南．

虽然ESLint可以通过命令行运行，但花点时间将它集成到您选择的编辑器中是有好处的。它发现的许多问题都可以自动修复，并与类似的工具相结合更漂亮ESLint可以帮助提高你的代码质量，以及你的整体开发体验。

任何使用Create React App的人都会注意到它已经启用了ESLint，并提供了一组用于查找常见错误的最小规则。

优点:

  • 灵活:任何规则都可以切换，许多规则都有可以调整的额外设置
  • 可扩展:许多插件可用
  • 支持JSX和TypeScript

缺点:

  • 编辑器集成可能会很麻烦
  • 可以潜在地向项目引入几个新的依赖项吗

如果你想了解更多关于ESLint的知识，请参考我们的教程。”启动并运行ESLint -可插入的JavaScript Linter”。

Lodash

Lodash是一个用于React组件的现代JavaScript实用程序库。例如，React表单输入事件onChange每击一次键发射一次。如果组件从后端API获取数据，它将在每次击键时触发请求。这将浪费后端API，并在许多人使用UI时导致问题。Lodash带有debaded事件，它通过多次击键触发一个API请求。

设置onChange防反跳事件:

onChange＝｛（e）= >防反跳（updateDataValue（e．目标．价值），250）｝

优点:

  • 模块化的依赖
  • 很好地使用代码拆分
  • 使用方便

缺点:

  • 要知道什么时候让事件反弹并不明显

Axios

发出HTTP请求以获取或保存数据是客户端JavaScript应用程序需要执行的最常见任务之一。可以说没有比axios更适合这项任务的库了，axios是一个基于promise的HTTP客户机，具有易于使用的API。工具支持异步…等待语法从浏览器发出Ajax请求。它支持错误处理，如果有错误通过抓．该工具的API支持HTTP请求，如GET、DELETE、POST、PUT和PATCH。这也适用于Promise API调用，如Promise.all ()并行发送HTTP请求。

类似于jQuery的. ajax美元函数，你可以通过向axios传递一个options对象来发出任何类型的HTTP请求:

axios（｛方法：“职位”，url：/登录的，数据：｛用户：“卡米洛·”，姓：“雷耶斯”｝｝）；

优点:

  • 基于承诺的
  • 支持异步/等待
  • 支持错误处理

缺点:

  • 没有比这更棒的了

如果您想了解有关在项目中使用axios的更多信息，请参见“介绍Axios，一个流行的、基于承诺的HTTP客户端”。

开玩笑

Jest是一个专注于JavaScript项目简单性的测试框架。好消息是它内置在Create React App中。它可以与使用Babel, TypeScript和Node的项目一起工作。大多数React项目都不需要配置。测试可以在监视模式下运行，该模式跟踪代码更改并重新运行测试。API包含它,预计快速开始。

确保测试执行的完整性检查是:

它（“说真话就是真话”，（）= >｛预计（真正的）．托比（真正的）；｝）；

优点:

  • 使用Create React App轻松设置
  • 流利的API
  • 在监视模式下运行

缺点:

  • 渲染React组件太简单了

如果你想知道如何在React项目中使用Jest，请参阅“如何测试React组件使用笑话”。

酶

Enzyme是React的JavaScript测试工具，可以更容易地测试组件。该API旨在像jQuery一样直观地遍历组件。要获得酵素，需要两个软件包:酶，以及一个单独的适配器。适配器必须与React版本兼容。例如,enzyme-adapter-react-16对的反应^ 16.4.0，酶-适配器-反应- 16.3为~ 16.3.0等等等等。适配器需要一个配置文件setupTest.js与Jest整合。

使用React 16时，安装酵素:

npm我是拯救开发酶酶适应反应16

优点:

  • 支持React组件
  • 支持Jest测试框架
  • 直观的API

缺点:

  • 在Jest中设置适配器有点痛苦

浅渲染器

这是一种浅层渲染，用于将测试限制在一层深度。它在树层次结构中呈现父组件而不影响其子组件。这隔离了测试并使断言更加健壮。浅渲染支持很多酶API来遍历组件。的浅API调用生命周期方法componentDidMount而且componentDidUpdate在渲染。对于钩子，浅渲染器不调用useEffect．一个建议是console.log (component.debug ())检查浅渲染器所看到的内容。

使用浅渲染器测试React组件:

常量组件＝浅（<ParentComponent数据＝｛“大卫”｝/>）；预计（组件．找到（“p”）．在（0）．文本（））．托比（“大卫”）；

优点:

  • 隔离测试
  • 全功能API
  • 允许快速调试

缺点:

  • 必须在酶的API中导航选择的海洋来找到这颗未经加工的钻石

故事书

这是一个开源工具，用于隔离手动测试React组件。Storybook提供了一个沙盒来构建组件，以进入难以到达的边缘情况。它允许模拟，因此可以呈现难以重现的关键状态的组件。安装是自动创建React应用程序时使用react-scripts．Storybook中的每个故事都可以针对具有多个状态的单个组件。故事文件有这样的约定component.stories.js所以人们可以很快找到他们。

开始使用Storybook:

NPX -p @storybook/cli sb初始化

优点:

  • 覆盖难以触及的边缘情况
  • 在沙盒中呈现组件
  • 集成创建React应用程序

缺点:

  • 难以自动化测试

你可以在我们的指南中找到更多关于Storybook的信息。”React故事书:轻松开发漂亮的用户界面”。

引导的反应

这是为React重建的最流行的前端框架。每个Bootstrap组件都是作为React组件从头构建的。这取代了Bootstrap JavaScript和核依赖像jQuery。最新版本支持Bootstrap 4.5。React Bootstrap与版本4中已经找到的数千个Bootstrap主题一起工作。每个组件都有可访问性，默认情况下是可访问的。它支持开箱即用的创建React应用程序，也支持自定义主题。

在React项目中启动React Bootstrap:

npm安装react-bootstrap引导

结果可能是这样的:

引导的反应＂loading=

优点:

  • 用React组件重新构建
  • 可访问性
  • 支持创建React应用程序

缺点:

  • 在创建React应用程序中，自定义主题可能很棘手

Material-UI

Material-UI提供了流行的React组件，用于更快、更简单的web开发。它允许你建立自己的设计系统或从材料设计开始。有付费和免费的模板和主题可供选择。高级主题的价格取决于功能。Material-UI通过npm包快速安装。

开始使用Material-UI:

npm安装@material-ui /核心

结果可能是这样的:

Material-UI＂width=
源

优点:

  • 轻松构建强大的UI
  • 提供许多组件
  • 提供许多模板

缺点:

  • 一些高级模板确实要花钱，但可能值这个钱

反应DevTools

React开发人员工具中最重要的工具之一应该是React开发人员工具——这是一个浏览器扩展铬而且火狐．这可以让你轻松地检查React树，包括组件层次结构、道具、状态等。

一旦安装，开发工具将给你两个新的选项卡在您的浏览器控制台-组件而且分析器．点击前者将显示当前树中的所有组件，并允许您按名称过滤它们，而后者允许您记录React应用程序的性能信息。

当涉及到调试React应用程序时，这是一个必须拥有的工具，因为它包含多个组件。

优点

  • 帮助你理解React应用程序中发生了什么
  • 大大减少了调试的痛苦
  • 看看哪些站点在生产中使用React

缺点

  • 轻微的学习曲线

可怕的反应

让我们用另一个清单把这个清单圆满结束!这一次awesome-react-一个GitHub回购包含了一个关于React生态系统的很棒的东西的集合。

回购有一个工具部分其中包含了本文中列出的许多工具(以及更多的工具)，以及关于教程，演示，视频，会议谈判，ReactNative，GraphQL和更多。无论你在React世界中寻找什么，这都是一个很好的开始。

优点

  • 适合每个人的东西
  • 涵盖各种各样的资源
  • 积极跟上时代

缺点

  • 太多选择

结论

如图所示，React的生态系统在过去几年里出现了爆炸式增长。对于想要在一致的套件中重用React组件的企业来说，它是首选工具。每个工具都是独立的，很少相互依赖。对于2020年，我的建议是至少尝试一下这些工具。

基本内容营销工具，第2部分＂></a> <div class= 基本内容营销工具，第2部分 约翰Tabita
基本内容营销工具，第一部分＂></a> <div class= 基本内容营销工具，第一部分 约翰Tabita
作为Web开发人员，我使用的10个基本程序/应用程序/工具＂></a> <div class= 作为Web开发人员，我使用的10个基本程序/应用程序/工具 山姆-迪尔岭
网页设计工作流程:基本工具＂></a> <div class= 网页设计工作流程:基本工具 约翰Tabita
Baidu