苹果与橙子

Angular vs. React:比较苹果和橘子

有人说比较 React 和 Angular 就像比较_苹果和橘子_。 一个是处理视图的库,另一个是_完整的框架_。

反应

React 由 Facebook 开发和维护,并用于他们的产品,包括 Instagram 和 WhatsApp。它自 2013 年以来已经存在了大约,所以它并不是全新的。它也是 GitHub 上最受欢迎的项目之一,在撰写本文时拥有超过 150,000 颗星。其他一些使用 React 的著名公司是 Airbnb、Uber、Netflix、Dropbox 和 Atlassian。听起来不错。

角度

Angular 自 2016 年以来一直存在,比 React 略年轻,但它也不是一个新手。它由 Google 维护,正如 Igor Minar 所提到的,即使在 2018 年,它也被用于 Google 的 60000 多个应用程序中,例如 Firebase Console、Google Analytics、Google Express、Google Cloud Platform 等等。在 Google 之外,福布斯、Upwork、VMWare 等都在使用 Angular。

特征

角

依赖注入,模板,基于 HTML 的扩展版本_,基于类的组件,带有生命周期钩子,路由,由@angular/router 提供。 Ajax 请求使用@angular/common/http , @angular/forms 用于构建表单 , component CSS encapsulation , XSS protection , code spliting and lazy loading , _test runner, framework and utility for unit-testing ,

反应

XSS 保护、代码拆分和延迟加载、错误处理边界、用于单元测试组件的实用程序、开箱即用,React 不提供任何依赖注入、路由、、HTTPcalls 或高级表单处理。、React-router用于路由 用于 HTTP 请求的 Fetch(或 axios) 用于 CSS 封装的各种技术 用于其他单元测试实用程序的酶或 React 测试库

采用、学习曲线和发展经验

选择新技术的一个重要标准是学习的难易程度。当然,答案取决于多种因素,例如您以前的经验以及对相关概念和模式的普遍熟悉程度。但是,我们仍然可以尝试评估您需要学习多少新东西才能开始使用给定的框架。现在,如果我们假设您已经了解 ES6+、构建工具以及所有这些,那么让我们看看您还需要了解什么。

React 使用 React,你首先会遇到的是 JSX。对于一些开发人员来说,写起来确实很尴尬。但是,它并没有增加那么多复杂性:只是表达式,即 JavaScript,以及特殊的类似 HTML 的语法。您还需要学习如何编写组件、使用 props 进行配置以及管理内部状态。您不需要学习新的模板语法,因为所有这些都是纯 JavaScript。虽然 React 支持基于类的组件,但随着 hooks 的引入,函数式开发变得越来越流行。这将要求您了解一些基本的功能开发模式。

官方教程是开始学习 React 的好地方。完成后,熟悉路由器。 React Router 可能有点复杂和非传统,但没什么好担心的。根据项目的大小、复杂性和要求,您需要找到并学习一些额外的库,这可能是棘手的部分。但在那之后,一切都应该一帆风顺。

我们真的很惊讶开始使用 React 是多么容易。即使是有后端开发背景、前端开发经验有限的人也能很快赶上。您在此过程中可能遇到的错误消息通常很清楚,并提供有关如何解决潜在问题的说明。

缺点是您需要花费时间来选择库来支持您的开发活动。鉴于其中有多少,这可能会带来挑战。但这可以在您熟悉框架本身之后与您的开发活动一起完成。

尽管 React 不需要 TypeScript,但我们强烈建议您在项目中评估并采用它。

角

学习 Angular 将向您介绍比 React 更多的新概念。首先,您需要熟悉 TypeScript。对于具有静态类型语言(如 Java 或 .NET)经验的开发人员来说,这可能比 JavaScript 更容易理解,但对于纯 JavaScript 开发人员来说,这可能需要一些努力。要开始您的旅程,我们可以推荐英雄之旅教程。

框架本身有丰富的主题可供学习,从模块、依赖注入、装饰器、组件、服务、管道、模板和指令等基本主题,到变更检测、区域、AoT 编译和 Rx 等更高级的主题.js。这些都包含在文档中。 Rx.js 本身就是一个沉重的话题,在官方网站上有非常详细的描述。虽然在基本级别上相对容易使用,但在进入高级主题时会变得更加复杂。

总而言之,我们注意到 Angular 的进入门槛高于 React。新概念的数量之多对新手来说可能是压倒性的。即使在你开始之后,体验也可能有点粗糙,因为你需要记住诸如 Rx.js 订阅管理、变更检测性能和盒子里的香蕉之类的事情(是的,这是一条实际的建议来自文档)。我们经常遇到难以理解的错误消息,所以我们不得不用谷歌搜索它们并祈祷完全匹配。

看起来我们在这里更喜欢 React,而且我们肯定喜欢。我们有让新开发人员参与规模和复杂度相当的 Angular 和 React 项目的经验,并且不知何故,使用 React 总是更顺利。但是,正如我之前所说,这取决于广泛的因素,并且可能对您有不同的作用。

人气和社区反馈

这两个框架都非常受欢迎,并拥有追随者和拥护者社区。还有许多文章建议您使用其中一种技术,主要强调它们的积极方面。让我们看看能否找到更客观的方式来代表每个项目的受欢迎程度和开发人员的满意度。

npm 下载统计显示,React 的下载量几乎是 Angular 的五倍。谷歌趋势还报告了全球范围内对 React 的更多搜索。

2019 年 JavaScript 状态报告将 React 列为最流行的前端框架,Angular 排名倒数第二,仅次于 Ember。 71% 的参与者表示他们已经使用过 React 并将再次使用它。只有 21% 的参与者对 Angular 持相同看法,35% 的人表示他们已经使用过 Angular 并且不会再使用它(只有 8% 的人对 React 持相同看法)。

决定 ???? !!!

您可能已经注意到,每个框架都有自己的一组功能,既有优点也有缺点。但是这种分析是在任何特定环境之外完成的,因此没有提供关于您应该选择哪个框架的答案。要决定这一点,您需要从项目的角度对其进行审查。

项目有多大?会维持多久?是否所有功能都提前明确定义,或者您是否希望灵活?如果所有功能都已定义,您需要哪些功能?领域模型和业务逻辑复杂吗?你的目标是什么平台?网页版、手机版、桌面版?你需要服务器端渲染吗? SEO重要吗?您会处理大量实时事件流吗?你的团队有多大?您的开发人员的经验如何?他们的背景如何?有没有你想用的现成的组件库?

如果您正在开始一个大项目,并且希望将做出错误选择的风险降到最低,请考虑首先创建一个概念验证产品。

选择项目的一些关键特性,并尝试使用其中一个框架以简单的方式实现它们。

PoC 通常不需要花费太多时间来构建,但它们会给你一些宝贵的个人使用框架的经验,并允许你验证关键技术要求。如果您对结果感到满意,您可以继续进行全面开发。如果没有,从长远来看,快速失败将为您省去很多麻烦。

---

一个框架来统治他们?

一旦你为一个项目选择了一个框架,你就会很想为即将到来的项目使用完全相同的技术堆栈。不。尽管保持技术堆栈一致是个好主意,但不要每次都盲目地使用相同的方法。在开始每个项目之前,花点时间再次回答相同的问题。也许对于下一个项目,答案会有所不同,或者情况会发生变化。此外,如果你有幸使用不熟悉的技术栈做一个小项目,那就去做吧。

这样的实验将为您提供宝贵的经验。保持开放的心态,从错误中吸取教训。在某些时候,某种技术会让人感觉自然而正确。

谢谢你!!让我知道你是否喜欢它!