Angular vs. React：2023年你应该选择哪一个？

本文讨论了react和angular这两个流行的web应用开发工具之间的重要特点和区别。

angular和react都用于web应用开发。它们在google趋势上同样受欢迎。虽然angular已经成为一流的web框架，但自2018年以来，react的增长一直非常快。angular是一个完整的框架，遵循mvc架构。react具有一些令人兴奋的功能，使其易于用于轻量级应用。

在深入讨论主要区别之前，让我们先了解一下它们的一些基本信息。

什么是angular？

angular是一个提供给开发者工作结构的web框架。它用于构建动态web应用。angular是开源的，使用typescript编写。最新版本是angular 12.1.4，于2021年7月发布。angular消除了开发者在使用javascript作为主要的客户端脚本语言时面临的困难。

将angular视为扩展了html的新颖易用属性。让我们编写一个简单的代码来更好地理解：

form.ng-dirty {

color:orange;

}

form.ng-pristine {

color:blue;

}

在上面的代码中，用户在文本框中输入名称。一旦开始输入，文本颜色就会改变。名称将显示为问候语。

• 我们在这里使用了一个angular表单，不需要任何其他css元素。
• 像ng-dirty和ng-pristine这样的表单元素负责颜色的变化。
• ng-app是angular应用的名称。
• ng-model属性类似于html的name属性。
• 我们使用双括号来显示文本值。

要使用angular的全部功能，如控制器、组件、模块等，我们应该安装npm包（使用node.js），这超出了本文的范围。

查看这门课程来学习angular。

什么是react？

react是由facebook维护的一个免费开源库。它比ui框架更快，还提供了与其他框架集成的灵活性。

我们可以使用react的声明性编码方法创建可重用的ui组件。这种方法显著减少了ui开发的工作量。一个简单的react应用可以分为多个可重用的组件，如下所示：

要使用react的所有功能，如组件和模块，用于实际应用程序，您需要安装node.js。为了理解react的功能，让我们重新编写上面的示例：

我们在这里使用babel编译器，以便代码可以在任何浏览器上轻松编译。否则，我们可能无法使用一些react代码。

上面的代码可能对于仅显示这一个字段来说太长了。一个真实的应用程序将有许多这样的组件可以重复使用，从而使得这些努力变得值得。

你有没有注意到我们在脚本组件中使用了html代码？怎么做到的？在 react的特性 部分找到答案。

angular的特点

让我们了解一下angular的特点：

• 开发人员可以快速构建渐进式应用，无需繁重的安装过程。
• 适用于创建桌面和移动应用程序。
• 跨平台支持。
• 提供应用程序结构（mvc架构）。
• 加快开发速度，因为只需要很少的编码。
• 良好的性能。
• 强大的模板语法，可以轻松创建ui视图。
• 可以在简单的文本编辑器或ide中开发代码。

react的特点

react的一些典型特点包括：

• reactjs使用类似html的语法，称为jsx（javascript xml），以便在一个文件中编写javascript和html代码。
• reactjs应用程序具有各自的可重用组件及其自己的控制和逻辑。
• 组件是不可变的，从而提供了单向绑定和合理的应用程序控制。
• 单向绑定使应用程序更灵活、更高效。
• 支持虚拟dom表示。只有在dom表示中有变化时，实际的dom才会发生变化。这样可以节省内存。
• 高性能和跨平台支持。

angular的应用

我们可以将angular用于大型企业应用程序、单页应用程序和渐进式web应用程序（pwa）。

许多著名企业使用angular。gmail和youtube tv都是基于angular构建的。这些应用程序在android、apple等各个平台上都可以使用。

youtube tv可以在firetv、chromecast和许多其他平台上访问。

angular的其他应用包括在线学习平台 udacity、像桑坦德和paypal这样的银行应用程序、web应用程序门户wix和microsoft office web。

react的应用

react广泛用于构建单页应用程序（spa）的用户界面。它可以无缝地适用于移动和桌面应用程序。facebook、bloomberg、airbnb、instagram和skype都是使用基于react js的框架 react native 的web应用程序的示例。

react是由社区驱动的，这使得它成为快速构建ui应用程序的流行选择。

angular的优势

让我们再次强调一些angular的重要优势：

• 使用typescript功能（如依赖注入、路由）实现有效的跨平台ui解决方案
• 快速加载应用程序和改善应用程序性能
• 由于angular cli、出色的社区支持、双向绑定和差异加载等功能，开发速度更快
• 模块和组件使代码易于阅读、调试和测试
• 强大的设计模式，如依赖注入和angular服务

react的优势

react具有一些引人注目的特点，使其与angular区别开来：

• 遵循声明性方法 – 这意味着在应用程序状态发生任何变化时，react会更新所需的组件并在数据变化时进行渲染
• react可在客户端使用作为库，也可使用react native和node在服务器上使用。
• 易于学习，文档齐全，社区支持良好，并且有学习资源。任何具备javascript知识的人都可以编写react代码。
• 使用jsx轻松渲染特定组件。
• react不需要开发人员编写dom代码，而是将虚拟组件转换为dom，从而提供更快的性能。

angular的缺点

angular提供了许多高级功能，如组件、依赖注入等。然而，这使得对于初学者来说学习起来并不容易。需要时间来学习和在项目中实施这些概念。

react的缺点

jsx帮助开发人员在js中渲染html。但是，如果组件过大，例如表单验证，代码可能会变得复杂且难以调试，特别是对于初学者来说。此外，react只涵盖ui，并不提供端到端的工作流程。

你应该选择angular还是react？

在回答这个问题之前，让我们回顾一下angular和react之间的主要区别：

angular	react
为设计大型企业、渐进式和单页面应用程序提供完整框架	作为javascript库用于渲染单独的ui组件
提供诸如依赖注入、差异加载、延迟加载等高级功能	仅支持延迟加载
基于typescript	基于javascript
遵循mvc架构	基于虚拟dom
可以看作是html属性的扩展	开发人员可以在脚本中编写html代码，react将其渲染为组件
提供调试和测试功能作为工具	react不提供任何内置工具，因此我们必须使用各种工具进行不同类型的测试
学习曲线较大，但相对容易设置	学习曲线较为简单，但设置需要时间
双向绑定，模型状态随数据变化而变化	单向数据绑定，只有当模型状态发生变化时，ui元素才能更改
无法向源代码中添加javascript库	允许向源代码中添加javascript库
angular cli提供了许多用于开发和无缝更新的工具	由于react仅用于ui，因此没有cli

考虑到上述差异，我们同意angular和react都是单页应用程序的好选择。然而，如果您的应用程序庞大且需要大量验证、路由和依赖项，angular是很好的选择，因为您还可以轻松测试代码。

如果您的应用程序要求简单且基于小组件，angular 可能会显得过度复杂，此外，react 具有更简单的学习曲线。

根据项目需求、成本和可用性来做出选择。

结论 👨‍🏫

本文展示了一些小的代码片段来比较 angular 和 react 的工作方式，并理解了两者之间的主要区别。

虽然 angular 是一个用于开发和测试的完整框架，react 只允许开发人员为其应用程序构建 ui 组件。另一方面，react 具有速度快、高效和轻量级的特点，因此在移动原生应用和单页面应用方面越来越受欢迎。angular 已经是一个适用于单页面应用和大型应用程序的成熟框架。