React 中的构建过程（或任何与此相关的框架中的构建过程是什么？）

[技术]：ReactJS – 文章#1

---

框架简化了工程师的开发，这是我尝试简化 ReactJS 的幕后功能。

---

故事时间

我开始使用 ReactJS。是的，我确实有。这就像一个梦想，推迟了两年，当时我对 UI / UX 设计和前端开发充满热情，然后才开始进入数据科学。 （我仍然像两年前一样热情。）

我现在是一家公司的实习生（这家公司称自己为初创公司，因为它的文化更像是初创公司的文化，而不是公司的文化），今天，在我上班的第一天，我实际上无所事事，因为，我的 TL（团队负责人）没有来办公室，因为他正忙着开会。

我是否让时间从我手中溜走了？绝对不是。
我获得任务/项目来测试我的数据分析技能的可能性相当低。因此我开始亲自动手开发。我感觉到这可能是开始使用 ReactJS 的最佳时机。

---

什么是反应？

React 是一个动词（双关语）。但在开发技术方面，“Web 和本机用户界面库”，声称是 ReactJS 官方网站。

现在，如果您熟悉开发生态系统，您一定听说过其他两个竞争对手，或者更确切地说是 ReactJS 的兄弟姐妹，它们是 Angular 和 VueJS。

以下是 3 种最流行的前端技术的简短比较。

Core Concept	Library focused on UI	Full-fledged framework	Progressive framework
Data Binding	One-way data flow	Two-way data binding	Two-way data binding (optional)
Component Structure	Custom components	Directives and components	Components
Learning Curve	Moderate	Steep	Gentle
Performance	High (Virtual DOM)	Can be slower due to two-way data binding	High (Optimized rendering)
Scalability	Excellent, suitable for large-scale apps	Strong support for large-scale enterprise apps	Good scalability, but might require additional libraries for complex projects
Community and Ecosystem	Largest community, rich ecosystem	Large community, strong ecosystem	Growing community, good ecosystem
Flexibility	High, can be used with other libraries/frameworks	Less flexible due to rigid structure	Flexible, can be used incrementally

核心理念 专注于 UI 的库 成熟的框架 渐进式框架 标题> 数据绑定 单向数据流 双向数据绑定 双向数据绑定（可选） 组件结构 自定义组件 指令和组件 组件 学习曲线 中等 陡峭 温柔 性能 高（虚拟 DOM） 由于双向数据绑定，速度可能会较慢 高（优化渲染） 可扩展性 优秀，适合大型应用 对大型企业应用的强大支持 良好的可扩展性，但对于复杂的项目可能需要额外的库 社区和生态系统 最大的社区，丰富的生态 庞大的社区，强大的生态系统 不断发展的社区，良好的生态系统 灵活性 高，可以与其他库/框架一起使用 由于刚性结构而缺乏灵活性 灵活，可以增量使用 表>

---

当我们有纯 HTML 和 JS 时，为什么还要使用 ReactJS？

纯 HTML 和 JS 的缺点。

以下是您使用时会遇到的问题：

维护大型应用程序的困难：

• 纯 HTML 和 JS 缺乏组织代码的结构化方法。

• 复杂的应用程序可能会导致事件侦听器和脚本文件中逻辑和 UI 操作错综复杂。

• 随着应用程序的增长，理解、修改和调试代码变得困难。

低效的 DOM 操作：

• 直接在 JS 中操作 DOM 效率很低。

• 每次状态更改都可能触发 HTML 结构的完全重新渲染，即使是较小的 UI 更新也是如此。

• 随着应用程序复杂性的增加，这可能会导致性能瓶颈。

可重复使用性有限：

• 使用纯 HTML 和 JS 构建可重用的 UI 组件可能很麻烦。

• 您最终可能会在应用程序的不同部分复制和粘贴代码片段。

• 这使得保持一致性和高效实施变更变得困难。

复杂的状态管理：

• 使用纯 HTML 和 JS 来管理应用程序的状态（控制 UI 行为的数据）变得很困难。

• 跟踪数据更改及其相应的 UI 更新可能会变得混乱且容易出错，尤其是对于复杂的数据流。

---

ReactJS 如何来救援。

ReactJS 通过提供基于组件的架构、用于高效更新的虚拟 DOM 以及用于管理复杂 UI 和应用程序状态的丰富生态系统来解决这些限制。

改进的可维护性：

• React 基于组件的架构和声明式方法可以带来更干净、更易于维护的代码库，特别是对于大型应用程序。

增强性能：

• React 中的虚拟 DOM 和高效渲染机制有助于实现更流畅、更快的用户体验，即使对于复杂的 Web 应用程序也是如此。

代码可重用性：

• React 的组件模型提高了代码的可重用性，允许您构建可以在应用程序中轻松共享和组合的模块化 UI 组件。

---

差异带来差异。

当我创建第一个组件时，我问自己，“这到底是什么”？是 HTML 还是 JS？

我通过 <script> 将 JS 嵌入到 HTML 中</脚本>元素或 <script src="index.js"> </脚本>元素。但是在 JS 文件中编写 HTML 感觉很奇怪或者相当不同。</script>

我尝试在非 React 项目的 JS 文件中编写 HTML，猜猜结果不太顺利。

然后我了解到这种特殊语法（类似于 JS 文件内部的 HTML）被称为 JSX JavaScript XML，并且是 JavaScript 的扩展。

如果浏览器理解的代码最终是纯HTML和JS，则意味着在我们编写的JSX（轻松构建复杂应用程序的语法糖）上执行了一些操作。

这种幕后操作本身称为构建过程。

构建过程的高级思想是将您的开发代码转换为可在生产环境中部署的优化版本。

虽然具体的工具和配置可能会因技术堆栈而异，但构建过程的一般概念和目标普遍适用于前端 Web 开发。

---

ReactJS 中的构建过程是什么？

我们了解到，高级思想保持不变，但 React 构建过程的几个阶段如下：

1. 捆绑：
   • 想象一下您的 React 应用程序由大量 JavaScript 文件、CSS 样式表和潜在的图像资源组成。

像 Webpack 这样的打包器会获取所有这些单独的文件，并将它们组合成数量较少的优化包。

1. 翻译：

   • 转译涉及将这种现代代码 (JSX) 转换为可以在更广泛的浏览器上运行的纯 JavaScript（ES5 或兼容版本）。

2. 缩小：

   • 缩小通过删除空格、注释和长变量/函数名称等不必要的字符来缩小捆绑代码的文件大小。

3. 优化：

   • 构建过程可能涉及额外的优化，例如 tree-shaking，它会从最终包中删除未使用的代码。

4. 生产模式：

   • 开发模式提供源映射（以便于调试）和详细错误消息等功能。

相比之下，生产模式侧重于通过启用缩小、tree-shaking 和其他性能增强来进行优化。

---

React-scripts：React 项目之狼

react-scripts 是 Create React App (CRA) 使用的内部包，用于处理 React 项目中的幕后功能。

大多数时候开发者不会直接与之交互，但它对于开发效率至关重要。

这是react-scripts 的职责：

• 捆绑和转译
• 开发服务器和热重载
• 测试
• 生产建筑

react-scripts 执行的 3 个最重要的任务如下，我们将详细了解：

1. 捆绑：

   • 想象一下您的 React 应用程序由大量 JavaScript 文件、CSS 样式表和潜在的图像资源组成。
   • 像 Webpack 这样的打包器会获取所有这些单独的文件，并将它们组合成数量较少的优化包。
   • 这减少了浏览器需要发出的 HTTP 请求数量，提高了网站加载速度。

2. 翻译：

   • 现代 JavaScript 功能（例如 React 中使用的 JSX 语法）可能无法被旧版浏览器理解。
   • 转译涉及将这些现代代码转换为可以在更广泛的浏览器上运行的纯 JavaScript（ES5 或兼容版本）。
   • 像 Babel 这样的工具通常用于 React 中的转译。

3. 缩小：

   • 缩小，也称为最小化，是一种应用于代码以减少其文件大小而不影响其功能的技术。
   • 这对于部署到生产环境的 React 应用程序特别有利，因为较小的文件大小可以转化为更快的网页加载时间。

缩小的工作原理如下：

1. 删除不需要的字符：

   • 缩小器消除了代码中的空白字符，例如空格、换行符和制表符。这对于小文件来说似乎微不足道，但在大型 React 项目中，它可以导致大小显着减小。

2. 缩短变量和函数名称：

   • 缩小器通常用更短的单字母名称替换描述性变量和函数名称。虽然这使得代码对人类来说可读性较差，但它显着减小了文件大小。

3. 删除评论：

   • 注释对于开发过程中记录和理解代码至关重要。但是，在生产中，代码运行并不需要它们。压缩器通常会删除注释以进一步最小化文件大小。

---

结论

这是仅1天的学习总结。

如果我使用 GenAI 工具，我就能构建出更多的东西。我以任何方式使用 GenAI 工具，但都是为了学习目的。

我相信提出这组正确的问题，然后真正深入地理解这些概念将使您与自动化开发人员区分开来。

在面试中，我们寻求的是对概念的理解和清晰度，而不是你的编码速度，因为无论哪种方式，它都会在一定程度上实现自动化。

因此，成为优秀软件工程师的唯一 X 因素在于您的知识，至少能够验证和验证 GenAI 模型的结果是否满足您的技术需求。

如果您认为我的内容有价值或者有任何反馈，
请联系我的以下社交媒体账号，您可以在我的个人资料中找到这些账号以及以下内容：

领英：https://www.linkedin.com/in/shrinivasv73/

推特 (X)：https://twitter.com/shrinivasv73

Instagram：https://www.instagram.com/shrinivasv73/

电子邮件：shrinivasv73@gmail.com

？我是 Shrinivas，结束了！

---

以上是React 中的构建过程（或任何与此相关的框架中的构建过程是什么？）的详细内容。更多信息请关注PHP中文网其他相关文章！