AngularJS 与 React

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前,正在 星球 内带小伙伴们做第一个项目:全栈前后端分离博客项目,采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 204 小节,累计 32w+ 字,讲解图:1416 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 870+ 小伙伴加入,欢迎点击围观

最近,Web 开发变化非常快。似乎每个月都会引入一个新的 JavaScript 框架,理解每个框架提供的功能可能会很麻烦。在这个简短的系列中,我们将研究一些前端 JavaScript 框架,并了解它们与 AngularJS 的比较。我们将简要介绍每一个的历史,并触及一些功能区域以进行比较。在本文中,我们将了解 React,并了解它在 Web 开发方面如何与 Angular 相媲美。

快速反应入门

React 是 Facebook 创建的一个 JavaScript Web 框架,其目标只有一个:构建高性能的用户界面。 React 是围绕其他 JavaScript 框架的一个常见问题而构建的——高效地渲染大型数据集。它使用虚拟 DOM 和补丁机制,允许 React 仅更新应用程序的相关部分,而不必在每次更改时重新渲染整个站点。

缺乏意见

Angular 可以称为“自以为是”的框架。这意味着 AngularJS 的开发人员知道应用程序前端的“好”架构应该是什么样子,并且他们将该架构构建到 AngularJS 的核心。当您的应用程序可以适应这些限制时,使用 Angular 会很愉快。但是,如果您发现自己偏离了 Angular 期望的架构,您可能会遇到很多痛苦。相比之下,React 不会试图将架构理想强加于您的代码库。它允许您延迟加载组件,减少加载时间并允许您更密切地管理数据的表示方式。

模板化

Angular 使用指令进行数据驱动显示的好处之一是显示模板编写起来非常简单。在 Angular 中为你的数据开发一个 UI 非常简单,虽然你可能会放弃对数据表示的特定部分的一些控制,但最终结果是一种更直观的用户界面方法,它需要更少的代码并且看起来更“明显”。另一方面,React 倾向于需要自定义函数来驱动数据显示。这通常意味着您需要在将数据编码到 DOM 之前定义数据的表示方式,这可能会在尝试准确确定特定元素的呈现方式时导致断开连接。

表现

虽然 Angular 的数据表示可以非常紧凑,但呈现数据可能被证明是大型数据集的痛点。由于双向数据绑定需要对每个可变元素进行侦听,因此大量数据会造成严重的性能问题。另一方面,React 使用虚拟 DOM 来跟踪元素的变化。当检测到更改时,React 会构建一个补丁来表示 DOM 的实际更改并应用该补丁。通过不必在每次元素更改时为大型表格重新渲染整个 DOM,React 显示出比其他 JavaScript 框架显着的性能提升。

应用架构

AngularJS 和 React 之间的另一个区别是每个框架代表的架构。 AngularJS 以 MVC(模型-视图-控制器)模式的近似表示开始,但后来演变成 MVVM(模型视图视图模型)-MVC 混合架构。另一方面,React 专注于 MVC 中的“V”——它旨在处理数据表示,并将应用程序架构的其他元素留给程序员选择的其他组件。一个有趣的注意事项是,由于这些架构选择,完全有可能使用 React 来增强 AngularJS 应用程序,以增强有问题的组件的性能。

结论

为您的应用程序选择 JavaScript 框架需要深入了解所考虑的每个框架的优缺点。正如我们在上面看到的,React 是经常处理大型动态数据集、相对轻松和高性能地处理大型数据表的显示和修改的应用程序的绝佳选择。然而,它并没有真正涵盖 AngularJS 所包含的全部功能——例如,没有控制器层来驱动你的数据表示。最终,在 AngularJS 和 React 之间进行选择归结为一个简单的问题:您的应用程序的潜在性能问题是否值得学习和使用 React?或者是否有可能使用 React 中的组件来增强 AngularJS 实现,以形成一个大于其部分之和的整体?不幸的是,没有简单的答案——您需要做出对您的特定应用最有意义的选择。

立即使用 Backand 构建您的 Angular 应用程序并将其连接到任何数据库。 – 现在开始。