Angular vs React：5个主要差异

Z时代
2024-01-10
分类：综合

react

战斗正在进行中。勇士们进入竞技场，周围的前端开发人员大声欢呼。右上角是Facebook在2013年5月推出的React 。左侧是Angular ，这是一个开放源代码项目，于2016年9月诞生，由Google维护。钟声响起。开了

但这真的是一场公平的战斗吗？是什么将两者区分开？您应该在2020年及以后赌谁？

2020年Angular vs React

在潜入之前，值得花点时间检查一下我们强大的战士在过去12个月中的表现。他们懈怠了吗？还是不停地训练自己成为JavaScript前端领域的佼佼者？

Angular 9及更高版本

Angular开发人员于2020年2月发布了Angular 9.0.0。 Angular 9.0.0引入了对Angular的大量添加和修复。除其他改进外，Angular 9还用Angular的下一代编译和渲染管道Ivy替换了ViewEngine（VE）编译器。

首先， Ivy提供了显着改善的性能。其次，Ivy包括简化的工具集，用于调试，测试和构建大型复杂的Web应用程序。它还有助于减小束的尺寸，特别是对于较大的应用。

随着Angular 10即将来临，性能仍然是框架开发人员的首要任务之一。

反应16+

因此，在环的一侧，Angular致力于提高性能和减小包装尺寸。另一方面，最新的React更新集中在错误修复和插入潜在的安全漏洞上。另外，React 16+试图提高异步编程能力。

React 16.13.0 于2020年2月发布，自然包含许多不安全方法和组件的过时警告以及错误修复。在新功能方面，最新功能已在2019年8月发布的React 16.9.0中引入。新功能专注于改进对异步代码的测试和测量性能。

现在我们全都掌握了最新动态，我们可以深吸一口气，潜入水中。

库与框架

Angular和React之间的第一个主要区别在于独立功能和范围。 Angular是功能齐全的MVC（Model-View-Controller）框架，而React是轻量级JavaScript UI组件库。

从这个意义上讲，在竞技场上让Angular与React产生冲突，就像面对Sumo摔跤手的Judoka。彼此之间都有优势。但是，每一种带来不同的方法和技术，赢家都是每个人的猜测。

作为Web应用程序开发人员，这对您来说意味着需要考虑现成的组件和功能。 Angular打包了一般Web应用程序在安装时所需的大部分功能，并包含React不需要的功能，例如内置路由和依赖项注入。另一方面， React对结构和方法的要求不高。尽管它使您可以将不太重要的功能卸载到其他库，但这也意味着增加项目代码的依赖性和复杂性。

语言

Angular是第一个完全采用TypeScript的主要框架-TypeScript是JavaScript和静态类型语言的超集。您可以使用JavaScript和TypeScript编写Angular应用程序，但是TypeScript通常是希望使他们的代码比纯JavaScript更紧凑，更易于调试的程序员的选择。

React基于JavaScript ES6 +和JavaScript XML （JSX）–一种在JavaScript之上运行的模板语言。 JSX（在Vue.js中也受支持）的独特之处在于，它在一个文件中存储了标记和逻辑。尽管有些人可能会发现使用此方法的问题，但是JSX具有强大的键入系统来静态分析代码。这使得它对新开发人员以及我们中那些容易出现错字的人特别友好（阅读：所有人）。

值得注意的是，尽管您可以在React中使用TypeScript，但本机不支持它。

实际与虚拟DOM（与迭代DOM）

React和Angular之间最重要的技术区别之一是它们各自如何管理文档内容，布局和结构的更改。 Angular使用Real（HTML）DOM （文档对象模型）时， React使用Virtual DOM 。

这种方法上的差异也许是许多前端开发人员偏爱React而不是Angular的原因之一。 DOM的虚拟化大大提高了运行时性能。

（来源： https : //illustrated.dev/react-vdom ）

对于真正的DOM（例如在Angular中），只要有任何更改，就需要更新HTML标签的整个树结构。每当检测到更改时，React都会创建一个新的虚拟DOM，并将其与“真实” DOM进行比较。如果两者不同，则只有在进行更改的地方才修改真实的DOM。

管理Angular开源项目的开发人员别无选择，只能注意这个问题。越来越多的开发人员开始使用React来提高应用程序性能。因此采取了行动。在最近制作的官方Angular编译和渲染管道Ivy中，您可以实现迭代DOM 。这种方法虽然与React的DOM虚拟化完全不同，但可以节省多达30％的运行时内存，尤其是对于大型Angular应用程序。

单向（向下）与双向数据绑定

数据绑定是一种用于同步UI和逻辑的技术。 React使用单向数据绑定（有时称为Downward Binding），而Angular使用双向数据绑定。

UI和业务逻辑同步以及数据绑定中React和Angular之间的比较使我们可以完美地表示出这些方法之间的差异。

在Angular中，更改UI中的输入可以更改模型/组件状态，反之亦然。在React中，当您更新模型/组件状态时，更改将在UI元素中呈现。但是，修改UI元素不会影响模型/组件状态。您可以通过使用回调或状态管理库（例如Redux）在React中更改此功能。

双向数据绑定可能意味着更少的代码和更少的数据流复杂性。另一方面， Angular可以迫使开发人员格外小心，并在组件内保持双向数据绑定。如果没有这样的照顾，您可能会发现自己处于处于不良状态和多种事实来源的组件中。这些趋向于变成漫长的bug搜寻之夜。

（来源：https://www.cleveroad.com/blog/angular-vs-react）

这只是Angular倾向于推动开发人员以某种方式设计和编码其应用程序的众多方式之一。相反， React提供了灵活性，但也依赖于其他库来启用附加功能。反过来，随着技术，库和组件不断增长的需要不断维护的堆栈，这种依赖性会变得很麻烦。

社区与文件

这不是人气竞赛。当然，当您比较前端库，框架甚至牙刷时，很可能会选择最受欢迎和评级最高的牙刷。除了牙刷和畜群心理学外，还有充分的理由考虑社区支持和官方文件的可用性（和相关性）。如果文档很好，或者至少由精心编写的教程和主题论坛上的活跃社区所称赞，它会有所帮助。

在这种意义上，无论您使用什么度量标准，普及度都非常重要，并且React远比Angular更受欢迎。它在GitHub上有更多的明星和追随者，更多的下载，并且在stackoverflow的2019年开发人员调查中被列为比Angular / Angularjs更受人喜爱的地方。受调查的开发人员中有74.5％的人喜欢React，而只有57.6％的人表示他们对Angular / Angularjs的喜爱。

为什么这很重要？众所周知，几乎所有水平的开发人员都向Google和社区论坛提问。实际上，对于当今的大多数职业而言，这都是正确的：当您不确定如何做某事时，请在网上对其进行搜索和/或询问。

随着越来越多的用户在Internet上提问和回答问题，您就有更大的机会搜索解决问题的方法。从这个意义上讲， React在Angular上有优势。拥有更大的用户群并不是React唯一的优势。作为一个Facebook项目，它经常被更新并且可以快速获得文档。

Angular由Google管理，这为其信誉增加了信誉。但是，由于开发人员不太喜欢它，因此您可能会发现自己依赖于大多数文档不足的文档。

对于考虑应该从哪两个中学到什么的开发人员，这里有无穷无尽的比较和讨论清单。如果这些还不够，您可以随时添加它们，并向社区询问适合您特定需求的正确解决方案。我们不需要在一天结束时告诉您，重要的是您作为开发人员的喜好以及每个项目的要求。