其他分享
首页 > 其他分享> > 5 个加速 React 开发的工具

5 个加速 React 开发的工具

作者:互联网

5 个加速 React 开发的工具

React 工具、技巧和最佳实践将帮助您更快地构建应用程序

Original 照片by 凯利@ Pexels

React 没有为样式、数据获取、路由或动画规定惯用的解决方案。您管理状态和组件之间的关系以执行您需要执行的操作,使用您需要执行的任何其他工具,并将结果呈现给 DOM。

换句话说,它提供 简单 .

我看到了一个被设计成完全不固执己见的事物的美 事情——并完美地完成一件事。

而且因为 React 的核心是如此之小,所以有些东西 作为开发人员,可以在该空间中存在和试验。下面是您可以做的五件事,以使用 React 构建更快、更好、更具可扩展性的应用程序。

剧透: “在 Twitter 上关注 Dan Abramov”不是其中之一。 ****

在我们开始之前

让我们先制定一些基本规则,这样你就知道这是什么了 不是 .

1. 位

最大的 啊哈 当您了解 React 的可组合性范式并大声思考时,您将在 Web 开发中拥有的时刻是: 如果 React 支持模块化、组件驱动的开发,为什么我不能从某种组件仓库中获取我需要的那些,并用它们构建我的应用程序?

这就是你会发现 少量 有用。

Bit 是一个开源工具链和组件中心,它提供了一种简单、可扩展的方式来创建、使用和共享组件,无论您的用例如何,并且 无论该用例可能多么分散 跨团队和项目。

您可以使用 Bit 从头开始​​构建整个应用程序,将每个组件创建为自己的单独包。

最重要的是,您可以发现其他组件,这些组件要么由您自己或您的团队创建,要么由其他已在线提供其 Bit 组件的开发人员创建。

过程很简单。你去 比特云 ,浏览/搜索以发现最适合您的项目的组件,试用它们,然后独立导入、更新和使用它们来组成任何项目——所有这些都只需一个简单的 npm 安装 .

Looking for a ?

想要发布和分享你自己的吗?伟大的!使用 少量 你可以:

Bit 非常适合以正确的方式进行组件驱动的开发——具有易于发现、无限可重用和可扩展的组件。如果你正在寻找构建诸如 React UI 库之类的东西,甚至是整个设计系统,Bit 是我的首选解决方案。

__ 上面的樱桃? Bit 上的任何东西都是 可摇树 默认。想要纯粹的原子构建块来组成您的应用程序?继续并从您正在关注的表单组件中导入 only 那个花哨的 CustomButton。

2.打字稿

我知道你在想什么。 “ TypeScript 将如何帮助我更快地编写代码?!输入我所有的结构和功能不是很乏味而且很慢吗?

TypeScript is a syntactic superset of JavaScript, created and maintained by Microsoft.

有一个学习曲线,但 TypeScript 并不是一种完全陌生的语言,你需要几个月才能弄清楚。任何 JavaScript 文件在技术上都是有效的 TypeScript 文件,因此迁移不需要是一个巨大的、一夜之间的、生死攸关的过程。你可以逐步做到这一点,考虑到你得到的回报,时间投资根本不会是太大的成本:

1. 您可以更快地编写代码,因为您的 IDE 现在可以为您提供更多帮助。

采用 TypeScript 就像为你的 IDE 增压 .曾经调用过真正具有未定义/空值的东西吗?曾经在 API 调用中包含错误的字段,或者发送错误的数据类型? JavaScript 将非常乐意让您继续前进,而您只会意识到生产中出现了问题。但是,TypeScript 会产生简明的错误,让您确切地知道哪里出了问题—— 编码时 .

Completely valid JS, but somehow, I doubt “56” was the answer you were looking for. With TS, of course, you catch this immediately.

您还可以为您的代码获得无限更好的 IntelliSense 你的 JSX/TSX,你所有的道具, 即使您使用的是带有未知道具的第三方库 !与任何测试套件相比,您将在开发过程中发现更多问题并支持更多不可预测的行为。

2. 重构现在很简单。

因为如果你决定更改类型定义或添加新的类型定义——或者你正在使用的第三方库——TypeScript 将在每个文件中产生简洁的错误——然后你的 IDE 可以通过新的、强大的一键解决重构它现在拥有的选项。

3. 团队合作现在轻而易举。

TS 使您的代码能够自我记录并无限地更易于维护。入职流程也得到了简化,因为新员工可以加入并立即准确了解代码库的功能和方式。

利用 打字稿 .简单地说:没有它,开发会更慢、更复杂、风险更大。

3. 片段

这个很容易。在样板文件上花费更少的时间;将其抽象为几次击键。相反,花更多时间在重要的事情上:构建很酷的东西。

这是我使用的一对:

[

ES7+ React/Redux/React-Native 片段 - Visual Studio Marketplace

Extension for Visual Studio Code - 使用 ES7+ 语法的 JS/TS 中的 React、React-Native 和 Redux 扩展......

market.visualstudio.com

](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

[

简单的 React Snippets - Visual Studio Marketplace

React Snippets 和命令的基本集合。只有你需要的,仅此而已。没有 Redux。没有反应…

market.visualstudio.com

](https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets)

安装扩展程序后,重新启动 VS Code,然后您可以通过键入快捷方式并按 Tab 或 Enter 来使用代码片段。

For example, ‘rafce’ (‘tsrafce’ if you’re using TypeScript) for a functional component that uses the arrow function syntax, and adds a default export.

查看 这里 有关快捷方式的完整列表。

4. 脚手架

脚手架 是一个交互式 CLI 工具/VS Code 扩展,可让您自动生成 任何事物 使用模板,尽管有框架。你所做的就是在你的项目根目录中创建一个存根文件夹/文件结构来描述你想要自动生成的东西——a 模板 — Scaffolder 将立即为您创建它,同时在您想要的位置动态替换变量名称。

以下是设置 Scaffolder 以生成具有动态变量的样板组件的简单方法:

步骤1 : 把你的模板写在一个 脚手架 项目根目录中的目录。

Use double braces to indicate variable names. This example has a ‘component’ template that will create a folder with the provided name, which holds within it a JSX and a CSS file with that same name.

And here are my CSS, component logic, and barrel templates. (Click each to zoom)

第2步 光盘 进入您的组件目录和 npx 脚手架-cli 我 .如果您使用的是 VS Code 扩展,请右键单击您的组件文件夹,然后单击 脚手架:使用模板 .然后,Scaffolder 的交互式界面将接管并指导您完成命名过程。

第 3 步 : 恭喜!您已经成功生成了一个基本的组件结构,而无需手动创建一堆文件和一个文件夹。

最好的部分:这不是组件(或 React,甚至)特定的。您可以使用它来创建实用程序函数、测试、挂钩、JSON/YAML 配置文件,以及任何东西——只要您可以为其编写模板。

5. 最佳实践

使用风格指南并坚持下去。

样式指南是您项目的规则集,包含结构化导入顺序的指令(例如,首先是第三方库,其次是代码库导入,最后是 React 内部)、使用内联样式的选择、文件/文件夹/挂钩/组件的命名约定/variables,良好的目录结构等等。

无论您是独立开发者还是团队成员,风格指南 总是 确保干净、可维护的代码。

您甚至可以考虑使用 Bit 创建一个仅包含设计标记/CSS 变量的组件,并将其注入到您的所有组件中——这绝对是保持一致性的好方法!

将可重用逻辑提取到自定义挂钩中。

根据官方 React 文档: Hooks 允许我们在不改变组件层次结构的情况下重用有状态逻辑 .因此,如果您的代码在多个地方处理状态-组件关系,请将其提取到自定义挂钩中。

例如,这是我的 使用去抖动 钩。一个简单的去抖动器,用于避免用请求扰乱外部服务器,可以在 每一个 我的应用程序中的 API 请求。

哇,我想得越多,您甚至可以创建自定义钩子作为单独的 Bit 组件来增加可重用性!

Feel free to use this. Works great for autocompletes!

如果您有复杂的状态,请使用 useReducer 而不是 useState 配置

如果您的状态由非原始状态组成,如果您的列表 使用状态 越来越长,如果您的下一个状态取决于前一个状态,或者如果您有多个事件处理程序更新状态:您最好实现 使用减速器 钩而不是 增强代码可读性使调试状态更容易 ,一气呵成。

停止使用 useEffect 重新创建 componentDidMount()

无论您是在休息后重新访问 React,还是移植遗留代码,您都需要忘记古老的类组件范式。具体来说,即 使用效果 不是生命周期方法。它是 props 和 state 的快照——一个 JavaScript 闭包 **** 只知道创建闭包时的封闭值是什么

奖金 : 现在你知道为什么了 _使用效果_ 需要一个依赖数组——以避免过时的闭包)。因此,它是 ** 最适合同步 DOM 更新和网络请求,而不是数据流。**

结论

React 是真的 **** 现代 Web 开发的标准,从某种意义上说,每个新框架都必须与它进行比较并回答:“这能帮助我使用模块化技术大规模构建我需要的东西吗?”

所以这里的动机是分享工具和实践的组合,这些工具和实践帮助我在这方面变得更快——使用模块化、组件驱动的思维方式构建和交付东西——希望它们能帮助你做同样的事情!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/7616/22560108

标签:TypeScript,创建,加速,React,使用,组件,工具,Bit
来源: https://www.cnblogs.com/amboke/p/16645203.html