框架简化了工程师的开发,这是我尝试简化 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 |
以下是您使用时会遇到的问题:
维护大型应用程序的困难:
纯 HTML 和 JS 缺乏组织代码的结构化方法。
复杂的应用程序可能会导致事件侦听器和脚本文件中逻辑和 UI 操作错综复杂。
随着应用程序的增长,理解、修改和调试代码变得困难。
低效的 DOM 操作:
直接在 JS 中操作 DOM 效率很低。
每次状态更改都可能触发 HTML 结构的完全重新渲染,即使是较小的 UI 更新也是如此。
随着应用程序复杂性的增加,这可能会导致性能瓶颈。
可重复使用性有限:
使用纯 HTML 和 JS 构建可重用的 UI 组件可能很麻烦。
您最终可能会在应用程序的不同部分复制和粘贴代码片段。
这使得保持一致性和高效实施变更变得困难。
复杂的状态管理:
使用纯 HTML 和 JS 来管理应用程序的状态(控制 UI 行为的数据)变得很困难。
跟踪数据更改及其相应的 UI 更新可能会变得混乱且容易出错,尤其是对于复杂的数据流。
ReactJS 通过提供基于组件的架构、用于高效更新的虚拟 DOM 以及用于管理复杂 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 开发。
我们了解到,高级思想保持不变,但 React 构建过程的几个阶段如下:
像 Webpack 这样的打包器会获取所有这些单独的文件,并将它们组合成数量较少的优化包。
翻译:
缩小:
优化:
生产模式:
相比之下,生产模式侧重于通过启用缩小、tree-shaking 和其他性能增强来进行优化。
react-scripts 是 Create React App (CRA) 使用的内部包,用于处理 React 项目中的幕后功能。
大多数时候开发者不会直接与之交互,但它对于开发效率至关重要。
这是react-scripts 的职责:
react-scripts 执行的 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中文网其他相关文章!