标签：TypeScript 创建 加速 React 使用 组件 工具 Bit
5 个加速 React 开发的工具
React 工具、技巧和最佳实践将帮助您更快地构建应用程序
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。