JavaScript

React开发的9个有用工具

卡米洛·雷耶斯
分享

本文是与Sencha．感谢您对合作伙伴的支持，是他们让SitePoint成为可能。必威西盟体育网页登录

React是一个相互独立的工具和库的集合，这对于有工作要做的React开发人员来说是令人生畏的。众多的工具提供了大量的自由，因为您可以货比三家，为手头的工作选择最好的工具。在React中，有很多方法来解决问题，所以了解更多的工具是一个好主意。有些工具在某些问题上比其他工具更好，这完全取决于上下文。下面是我在一个大型React项目中发现的有用工具列表，有些工具比其他工具更新，有些工具在使用React时解决了特定的问题——但我发现所有这些工具都很有帮助。

对于每个React工具，我将提供一个简短的基本信息总结，然后再深入讨论它可以做的很酷的事情和我的想法。请记住，所有这些工具都可能发生变化。

create-react-app

创建React App是开始React项目的一个很好的方法。这个工具将很多React工具抽象成一个独立的依赖。像Webpack、Babel和ESList这样的工具在底层是安全的。你可以用一个命令启动整个React项目。该工具生成了一个最小的文件集，这样你就可以专注于应用程序。你需要Node 6+来使用它。

例如，启动一个应用程序npx：

create-react-app my-killer-app

运行上面的命令将创建一个目录并生成脚手架文件。该命令无需干预即可安装可传递依赖项。没有复杂的配置文件，只有最基本的构建应用程序。

升级被封装在一个NPM包中。没有必要与webpack和朋友一起使用最新的功能。当新版本发布时，您可以用一个命令升级Create React应用程序。若要升级，请安装react-scripts@latestNPM包。

在项目文件夹中，您可以找到内置命令。运行npm开始例如，启动应用程序。在运行时，应用程序会热加载你对代码所做的任何更改。当您保存项目文件时，它将在浏览器中重新加载这些更改。发生的任何编译错误都将显示在运行应用程序的控制台中。

Create React应用程序支持测试自动化。运行npm测试将启动Jest并运行项目中的所有测试。该命令以交互模式运行一个监视程序，因此它将跟踪文件更改。在进行更改时，监视程序只运行受影响的测试。一定要给测试文件命名* .test.js这样杰斯特就能捡起来了

Create React App抽象了项目配置。JavaScript开发人员经常抱怨配置现代工具很困难。所以，这里有一个工具，为您自动化，没有大惊小怪。

优点:

  • 从一个命令开始
  • 只有一个依赖项
  • 无需配置

反对:

  • 没有服务器端渲染

Next.js

js通过一个同构的React应用程序进行服务器端渲染。无需设置，启动时间也很短。您可以获得代码拆分、基于文件夹的路由、热代码重新加载和通用呈现。代码拆分只加载页面上必要的组件。路由查找页面文件夹，并查找与链接路由匹配的文件。热代码重新加载监视文件更改和重新加载应用程序的某些部分。这对于喜欢代码更改之间快速反馈循环的开发人员来说很好。渲染同时发生在客户端和服务器端，因为应用程序是同构的。这允许代码重用，因为在服务器上运行的代码也可以在客户端上运行。

要开始使用Next.js，请执行以下操作:

npm安装——保存下一次react react-dom

确保创建项目文件夹时使用package.json．在这个包文件中，将Next.js与下一个构建,下一个开始脚本。这些脚本映射到通过NPM执行的运行脚本。

使用Next.js，你可以创建一个静态文件静态文件夹中。你放在这个文件夹中的所有东西都将成为应用程序中的静态资产。这允许你为图像或CSS等资产提供服务。

您可以将Next.js导出为静态HTML页面，以消除服务器端呈现。在项目文件夹中下一个出口生成可以在任何地方托管的静态HTML页面。导出支持几乎所有特性，动态url、预取、预加载和动态导入。缺省情况下，不需要配置。生成静态HTML文件页面目录中。导出命令位于package.json，所以运行它NPM运行导出．导出文件将出现在出目录中。

优点:

  • 零配置，具有高级功能
  • 应用程序已准备好刺激没有麻烦
  • 静态HTML选项消除了服务器端渲染

反对:

  • 定制路线可能会很麻烦

回来的

在React中，传递许多道具和状态参数是很麻烦的。一个组件的层次结构可以有很多React组件。链中某个地方的单个参数故障都是危险的。当有很多组件时，这使得调试参数变得令人沮丧。

更好的解决方案是通过状态机对其进行抽象。Redux是JavaScript程序的状态容器。应用程序的整个状态都放在一个商店里。要改变状态，启动一个动作，然后让减速器处理其余的操作。可以将Redux看作一个通过发出动作而引起状态变化的状态机。通过存储调度操作是改变状态的唯一方法。约简器不会改变状态，只在状态改变时返回一个新对象。这使得减速器是一个纯粹的功能，保持应用程序的可预测性。bug经常在有不可预测行为的地方爬行，所以减速器可以解决这个问题。

Redux是一个可以在普通JavaScript中使用的独立库。React绑定可以更轻松地连接React应用程序。一个<供应商/ >使Redux存储对根组件可用。一个连接函数将状态映射到存储区中所有组件的道具。connect函数提供每个组件工作所需的参数。

在一个典型的React应用程序中，只有一个根组件和一个商店。可以有一个Redux存储的层次结构来分割状态树。这就像React，一个根组件可以有很多小组件。

在React项目中设置Redux绑定:

npm安装——save redux

请确保将Redux和React-Redux视为独立的依赖项。

优点:

  • 拥抱像纯函数一样的声音编程
  • 绑定可用于React
  • 自动化状态管理

反对:

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

酶

酶类似于jQuery，用于测试React组件。你可以在没有无头浏览器的情况下浅渲染组件。您可以遍历、搜索组件并进行断言。这缩短了反馈循环，因为它消除了浏览器。浅渲染很有用，因为它不会超过一层的深度。这将测试隔离到React组件层次结构中的单个级别。

酶的API支持事件模拟。的模拟()函数在单个节点中调用事件处理程序。例如,.simulate(点击)调用onClick支持功能。浅渲染隔离了被测节点，这增加了焦点。

每个React版本都配有一个适配器。所以,enzyme-adapter-react-16适用于React 16.4或以上版本。对于React 16.3.0，使用酶-适配器-反应- 16.3适配器。对于Jest 15+，酶不再需要任何特殊的配置。编写测试，在顶部导入React，酶函数和待测系统。

例如:

进口反应从“反应”；进口｛浅}从“酶”；进口喷火从“. . / Foo”；//正在测试的系统描述（“杀手级测试套件”,（）= >｛它（“应该在没有浏览器的情况下进行浅渲染”,（）= >｛/ /安排常量组件＝浅（<喷火/>）；/ /行为常量结果＝组件．包含（<div类名称＝＂喷火＂>酒吧div>）；/ /维护预计（结果）．托比（真正的）；}）；}）；

浅撕裂有广泛的范围选择器和函数找到节点。每次提取一个节点可以让您以孤立的方式断言功能。

优点:

  • 浅渲染分离React组件
  • 用于查找感兴趣的节点的丰富API
  • 不需要无头浏览器

反对:

  • 每次React升级时，适配器都可能是危险的

ExtReact

React提供了一种基于组件的方法来构建web应用程序，但React本身不包括任何组件。ExtReact提供了预构建的组件，如菜单、网格、图表和表单来交付功能。开源社区很大，有很多可用的组件;然而，许多组件库和React之间的兼容性问题是令人生畏的。一个更好的想法是通过从更少的库中获取尽可能多的组件来降低风险，或者最多从一个库中获取。ExtReact在一个专业软件包中提供最完整的组件集，并包括商业支持。

首先你需要Node 8.11+， NPM 6+和Java 8 & 11。通过免费试用，您可以登录到NPM存储库npm.sencha.com．安装应用程序生成器NPM install -g @sencha/ext-react-gen．然后，创建一个应用Ext-react-gen应用杀手应用．这将生成一个名为杀手级应用．进入项目文件夹并执行npm开始启动一个简单的React应用程序。

中导入ExtReact组件ext-react包中。组件可能自带自己的存储以获取数据。许多道具都具有预先构建的功能。例如,onSelect讲述了列表组件单击列表项时该做什么。可以使用排序器对组件中的列表项进行排序。

假设你想导入一个基本的列表组件:

进口反应,｛组件}从“反应”；进口｛列表}从“@sencha / ext-modern”；出口默认的类BasicList扩展组件｛商店＝Ext．创建（“Ext.data.Store”,｛自动装载：真正的,代理：｛类型：“其他”,url：“数据/ people.json”},分类器：［“first_name”］}）；tpl＝数据= >（<div><div>｛数据．first_name}div>div>）；onSelect＝（列表,记录）= >｛控制台．日志（｀$ {记录．得到（“first_name”）}｀）；}；渲染（）｛返回（<列表影子itemTpl＝｛这．tpl}商店＝｛这．商店}onSelect＝｛这．onSelect}/>）；}}

ExtReact提供超过115个预构建的UI组件，并提供完全的商业支持。ExtReact组件是为了在应用程序的生命周期内无缝集成而设计的。

优点:

  • 广泛的预构建React组件
  • 与许多开源选项相比，依赖性更小
  • 具有商业支持的专业组件

反对:

  • 对Java的依赖

React开发工具

React开发者工具可以让你在浏览器中检查React组件。它可以检查带有道具和状态的组件层次结构。作为Chrome和Firefox的浏览器扩展，以及一个独立的应用程序发布。使用Opera的用户可以在启用Chrome扩展的情况下安装Chrome扩展。在使用React的网站上，扩展图标会亮起，并提示打开开发人员工具。

在React应用中，注意开发者工具中的React选项卡。单击该选项卡将在树视图中显示组件的层次结构。带有状态的组件显示一个具有不同颜色的树折叠按钮。你可以用方向键或hjkl比如使用Vim。右击可以提供在元素窗格中显示、滚动到视图或显示源代码等选项。

侧窗格让您对每个组件有更多的了解。它允许您在浏览器中进行更改并突出显示这些更改。您可以将道具和状态加上存储对象作为全局变量来操作。

使用搜索栏按名称查找组件。当树中有许多组件时，这可以节省时间。搜索栏支持正则表达式进行精确搜索。一个技巧是使用常规DOM检查器或元素选项卡查找组件。从页面中选择元素并切换到React选项卡。组件在React树中被选中。右键单击可以选择“查找DOM节点”，这将带您回到常规选项卡。

优点:

  • 帮助在树中可视化React组件
  • 随意操作和调试组件
  • 帮助查找组件的搜索工具

反对:

  • 额外的附加组件，但提供了一个独立的版本

Redux开发工具

Redux开发工具支持热重新加载和动作重放。作为浏览器扩展，独立应用程序和React组件发布。React组件位于主机应用程序中。该工具让你检查每个状态和动作负载。或者，通过取消操作回到过去。使代码更改重新评估标记为阶段性的操作。

通过Chrome Web Store或Mozilla Add-ons安装扩展。React组件可用于不支持扩展的浏览器。更改您的项目是必要的使用扩展。必须在Redux存储中设置扩展以及扩展选项。

例如，设置Redux开发人员工具选项:

常量商店＝createStore（窗口．__REDUX_DEVTOOLS_EXTENSION__& &窗口．__REDUX_DEVTOOLS_EXTENSION__（｛actionCreators,跟踪：真正的,traceLimit：5}））；

Dispatcher中可用的操作来自actionCreators．这是一个动作函数列表。将项目中所有感兴趣的操作导入此变量。跟踪程序将包括每个已分派操作的堆栈跟踪。检查跟踪选项卡允许单击以跳转到代码。该选项的默认值为false。跟踪限制设置显示的最大堆栈帧，默认为10。

在商店中应用任何中间件都需要composeWithDevTools．得到这个函数redux-devtools-extensionNPM包。的applyMiddleware函数作为参数进入这个函数。这允许开发工具与中间件一起工作。

优点:

  • 应用程序状态时间旅行工具
  • 通过热重载跟踪代码更改
  • 调试堆栈跟踪每个操作

反对:

  • 设置需要更改项目中的代码

redux-immutable-state-invariant

在调度程序内部或调度程序之间发生状态突变时抛出错误的中间件。约简者假定参数不会改变状态。每次reducers返回state时，它必须是一个新对象。一个很好的做法是避免减速器外的状态突变。这需要程序员严格遵守纪律。因此，一个好主意是通过工具自动化这种检查。

该工具仅用于在开发期间捕获错误。它做了大量的对象复制来加强不变性。这意味着高内存消耗会降低应用程序的性能。因此，不要在生产环境中启用该工具。一个想法是设置一个环境变量NODE_ENV，例如，to生产．

使用这个库作为中间件:

进口｛applyMiddleware,createStore}从“回来的”；让中间件＝［］；//请确保在开发中只添加此中间件!如果（过程．env．NODE_ENV= = !“生产”）｛中间件．推（需要（“redux-immutable-state-invariant”）．默认的（））；}常量商店＝createStore（applyMiddleware（.．.中间件））；

如果你不改变状态，那么这个工具就会消失。在调度器中或调度器与工具之间改变状态，并发出错误消息。它使您保持最佳的编程行为，就像任何好的工具应该做的那样。

优点:

  • 无缝的，适用于任何工作流程
  • 自动化编程规程
  • 用描述性消息抛出错误

反对:

  • 大量的对象复制会影响性能，但只能在开发中启用

redux-logger

Redux的动作记录器。捕获浏览器日志控制台中的调度程序操作。有许多选项，并允许洞察每个派遣的行动。当动作在应用程序中蔓延时，它会捕捉并让你深入每个动作。每个日志条目都捕获以前和当前状态，以及调度程序的操作。把每个操作看作一个日志消息。记录器可以让你看到这些消息在应用程序中改变状态时的样子。

要使用记录器，请在Redux存储中设置它:

进口｛applyMiddleware,createStore}从“回来的”；//带有默认选项的日志记录器进口日志记录器从“redux-logger”；常量商店＝createStore（applyMiddleware（日志记录器））；

确保logger是最后一个参数applyMiddleware它捕获动作。可以使用一些选项来更改记录器的行为。您需要导入createLogger从redux-logger．然后，调用createLogger函数的一个选项对象。例如,谓词指定在每个操作之前调用的函数。做(getState, action) => action。== UP_COUNT . type过滤掉增加计数的操作。一个倒塌选项是一个函数，如果日志组应该崩溃，则返回true。做(getState, action) => action。type === DOWN_COUNT折叠减少计数的动作类型。

优点:

  • 捕获调度程序操作(如日志消息)
  • 让你钻到每个动作和检查应用程序的状态
  • 选项允许您调整捕获的内容

反对:

  • 客户端日志记录器，但是您可以通过一些努力发送消息

结论

React的有用性源于它是一个工作良好的工具和库的集合。这些工具通常是轻量级的，因此您可以随意进行即插即用。编程不是重新发明轮子，而是重用现有的工作良好的解决方案。React的流行源于这样一个事实:你可以选择解决眼前问题的方法。这可以让你专注于那些还没有好的解决方案的问题。

10+有用的工具和工具包为Android开发者＂></a> <div class= 10+有用的工具和工具包为Android开发者 山姆-迪尔岭
10有用的Lorem Ipsum“虚拟文本”生成器＂></a> <div class= 10有用的Lorem Ipsum“虚拟文本”生成器 山姆-迪尔岭
10个有用的jQuery插件的设计和开发＂></a> <div class= 10个有用的jQuery插件的设计和开发 山姆-迪尔岭
Baidu