5 个加速 React 开发的工具

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

Original 照片by 凯利@ Pexels

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

换句话说，它提供 简单 .

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

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

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

在我们开始之前

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

• 我不涉及开发工具 多年来一直被认为是必不可少的东西——比如 ESLint/TSLint + Prettier、React Dev Tools、Emmet 等。有成千上万的教程；它们是必备品。使用它们。
• 没有开发环境建议 .我在 Windows 10 系统上使用 VS Code，发现它对我有用。对您来说，这可能是另一种组合，因为您已经拥有公司许可证。使用最有意义的东西；您的开发环境不会阻碍您。
• 没有“使用这个特定的库，因为它是最好的！”建议 对于任何一种行为（AG Grid、React Query、React Hook Form 等） 或者 样式（MaterialUI、Tailwind、Bootstrap 等）。这些库使用独特的不同范例来解决独特的不同问题，以及为哪个问题使用哪种工具的选择应该由您作为工程师决定。

1. 位

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

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

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

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

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

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

Looking for a ?

想要发布和分享你自己的吗？伟大的！使用 少量 你可以：

• 从逻辑上识别您的各个组件（或将它们分解，直到我们获得尽可能小的单元，例如自定义 Button 组件），
• 使它们独立于您现有的库或应用程序的上下文，
• 然后在 Bit 上构建、测试、版本和发布它们作为单个包，它为您管理依赖项。

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