• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

React vs Angular,到底谁更牛?

技术杂谈 巷子的童年 3周前 (02-28) 22次浏览 未收录 0个评论 扫描二维码

 

 

 

您是否对当前两款前端开发框架无从选择?本文将深入比较并分析 ReactAngular 哪个项目更适合您。

 

在编程领域,AngularReact 对于前端开发人员来说是目前最流行的两款 JavaScript 框架。
2018 年版的 Stack Overflow Developer Survey 认为:AngularReact 和 Node.js 是所有软件工程师所公认的三大顶级编程框架。
请见:
https://insights.stackoverflow.com/survey/2018/#technology
无论是从流行程度、架构相似度,还是从基于 JavaScript 的角度考虑,这两种前端框架都有着诸多相似之处。
在本文中,我们将对 ReactAngular 进行深入比较。我们会从两者的框架基本特征入手。
当然,如果您对此类话题特别感兴趣的话,请参见:
https://www.altexsoft.com/blog/engineering/angularjs-vs-knockout-js-vs-vue-js-vs-backbone-js-which-framework-suits-your-project-best/?utm_source=DZone&utm_medium=referral

 

AngularReact.js 简要介绍

 

 

 

 

Angular 是由 Google 提供支持的一种前端框架,它能够与大多数常用的代码编辑器相兼容,它属于 MEAN stack 的一部分。
请见:
https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-angular-development/#angular%202%20and%20angular%202+
https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-javascript-full-stack-development/?utm_source=DZone&utm_medium=referral
而 MEAN stack 是一组免费开源的、以 JavaScript 为中心工具集,可被用于构建动态网站和 Web 应用。
其组件包括:MongoDB(NoSQL 数据库)、Express.js(Web 应用框架)、Angular 或 AngularJS(前端框架)、以及 Node.js(服务器平台)。
Angular 框架允许开发人员创建动态的单页面 Web 应用(Single-Page Web Applications,SPA)。
最初版本的 Angular,解决的是将基于 HTML 文档转换为动态内容的问题。
在此,我们将重点关注其较新的版本 Angular 2+,以及它与 AngularJS 的区别。
在业界案例上,Angular 主要被 Forbes、WhatsApp、Instagram、healthcare.gov、HBO、Nike 等组织所使用。

 

 

 

React.js 是由 Facebook 于 2011 年创建的一种用于构建动态用户界面的开源 JavaScript 库。
具体请请见:
https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-reactjs-and-react-native/
React 基于 JavaScript 和 JSX,而 JSX 是由 Facebook 所开发的 PHP 扩展,它能够为前端开发创建可重用的 HTML 元素。React 拥有一个可以被用于移动开发的独立跨平台框架 React Native。
在业界案例上,React 主要被 Netflix、PayPal、Uber、Twitter、Udemy、Reddit、Airbnb、Walmart 等组织所使用。

 

工具集:框架 vs 库

 

有过开发经验的读者都知道,框架生态系统定义了工程体验的无缝性。下面,我们来看看 Angular 和 React 的主要特点。
首先,React 并非一个真正的框架,它实际上是一个库。所以,它需要与其他的工具和库进行多次集成。
相比而言,在使用 Angular 时,您已经拥有了用于构建应用的一切条件。
Angular 提供了如下各种开箱即用(out of the box)的功能:
  • RxJS:是一个异步程序库,它通过设置多个数据交换的通道,来减少资源的消耗。
    RxJS 的主要优点是:它能够独立地同步处理事件。不过,伴随的问题是:虽然 RxJS 可以与许多框架协同运行,但是您必须通过对库的学习,以充分利用到 Angular。
  • Angular CLI:具有功能强大的命令行界面,可协助创建应用、添加文件、测试、调试和部署。
  • Dependency injection:该框架将各种组件与依赖关系相分离,使之同步运行;同时也能够在不重新配置组件的情况下更改依赖关系。
  • Ivy renderer:作为新一代的 Angular 渲染引擎,Ivy 的性能有了明显的提升。
  • Angular Universal:是一种用于服务器端渲染的技术,它能够快速地渲染出首个应用页面,或是在可能缺乏渲染资源的浏览器端设备(如移动设备)上显示应用。
  • Aptana、WebStorm、Sublime Text、Visual Studio Code:都是 Angular 的常用代码编辑器。
  • Jasmine、Karma 和 Protractor:都是在浏览器中进行端到端测试与调试的工具。
React 需要通过多种集成和各种支持工具才能运行:
  • Redux:是一种状态容器,它可以加速 React 在大型应用中的运行,能够管理具有多种动态元素的应用组件,还可以被用于渲染。
    此外,React 用到了更为广泛的 Redux 工具集,其中包括:Reselect、Redux 的选择器库和 Redux DevTools Profiler Monitor。
  • Babel:是一种转换编译器,它可以将JSX转换为能够被浏览器理解的 JavaScript 应用。
  • Webpack:由于所有的组件都是用不同的文件编写而成,因此我们需要将它们捆绑在一起,以便实现更好的管理。而 Webpack 就是一种公认的标准代码捆绑器。
  • React Router:该路由器是一种常被 React 所使用的标准 URL 路由库。
  • 与 Angular 类似:在代码的选择方面,您并不受限。其常见的编辑器包括 Visual Studio Code、Atom 和 Sublime Text。
  • 与 Angular 不同的是:在 React 中,您无法使用单个工具去测试整个应用,而必须使用不同的工具进行不同类型的测试。
如下是 React 与各种工具的配合列表:
  • Enzyme 和 Unexpected-react,用于组件测试。
  • Jest 用于 JavaScript 代码。
  • react-testing-library 用于 React DOM 测试。
  • React-unit 用于单元测试。
  • Skin-deep 用于渲染测试。
由 ReselectDevTools(https://github.com/skortchmark9/reselect-tools)所提供的此类工具集,可以被用于调试和可视化。
而 React Developer Tools 的 Chrome Extension 与 Firefox Extension,以及 React Sight 也都能可视化显示状态和属性树(prop tree)。
这两种工具都形成了强大的生态系统。通常情况下,用户倾向于选择 React,不过 React 需要 Redux 之类的多种集成来扩展其服务能力。

 

基于组件的体系结构:两种工具的可重用与可维护组件

 

两个框架都具有基于组件的体系结构。这就意味着单个应用可以通过模块化、内聚且可重用的组件,来构建出各种用户界面。
在 Web 开发中,基于组件的体系结构通常被认为比使用其他结构更易于维护。
它通过创建单独的组件来加速开发的进程,并使得开发人员能够缩短产品上线的时间,也能调整和扩展应用。
①代码:TypeScript vs JavaScript(JSX)
Angular 使用 TypeScript 语言(当然如果需要的话,您也可以使用 JavaScript)。
TypeScript 是一种适合于大型项目的 JavaScript 超集。它既紧凑,又能够识别输入中的错误。
TypeScript 的其他优点还包括:更好的导航与自动完成功能,更快的代码重构。
另外,TypeScript 的可扩展性和简洁性,也非常适合于企业规模的大型项目。
React 使用的是 JavaScript ES6 和 JSX 脚本。JSX 是 JavaScript 的语法扩展,被用于简化 UI 编码,并使得 JavaScript 代码看起来更像 HTML。JSX 不但能够检测各种错误,还可以保护代码免受注入的攻击。
另外,Babel(https://babeljs.io/)使用 JSX 进行浏览器编译。而 Babel 则是一种将代码转换为可被 Web 浏览器读取的格式编译器。
虽然 JSX 在语法上几乎能够实现与 TypeScript 类似的功能,但是一些开发人员仍认为它比较复杂难学。
②DOM:真实 vs 虚拟
文档对象模型(Document Object Model,DOM)是 HTML、XHTML 或 XML 文档的编程接口。
它具有一种树形组织结构,使得脚本能够动态地与 Web 文档的内容及结构进行交互,并对它们实现更新。
DOM 有两种类型:虚拟和真实。在实现原理上,即使有一个元素发生了变化,传统的或称真实的 DOM 也会更新整个树型结构。
而虚拟的 DOM 则是真实 DOM 的一种映射,因此它只跟踪变更的部分,仅更新特定元素,而不会影响整个树中的其他部分。
React 使用虚拟的 DOM,而 Angular 则在真实的 DOM 上运行,并使用变更检测来查找那些需要更新的组件。
虽然虚拟的 DOM 被认为比真正的 DOM 操作起来更为快捷,但是在 Angular 中,由于需要进行变更检测,因此这两种方法在性能方面实际上是相当的。
③数据绑定:双向 vs 向下(单向)
数据绑定是在模型(业务逻辑)和视图(UI)之间同步数据的过程。数据绑定有单向和双向两种基本的实现方式。而单向与双向数据绑定之间的区别,就在于模型视图的更新过程上。
Angular 中的双向数据绑定类似于“模型 – 视图 – 控制器(Model-View-Controller,MVC)”的体系结构,
具体请参见:
https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
由于其中的模型和视图是同步的,因此数据的变更会影响到视图上,而视图的更改也会反过来触发数据相应的变更。
React 则使用单向或向下的数据绑定。单向数据流不允许子元素在更新时影响到父元素,因此保证了只有已获准的组件才会发生更改。
可见,此类数据绑定使得代码更为稳定,当然也需要通过额外的作业来同步对应的模型与视图。毕竟,由于子组件变更所触发的父组件配置的更新,需要更多的时间。
总的说来,React 的单向数据绑定更具备可预测性,代码更为稳定,调试也更加容易。而 Angular 中的传统双向数据绑定,则易于被使用。
④应用体积和性能:Angular 略胜一筹
在处理复杂且动态的应用时,AngularJS 的性能较低。而由于用到了虚拟的 DOM,React 各类应用的效率比同等大小的 AngularJS 应用要快一些。
然而,根据来自 freeCodeCamp.org 的 Jacek Schae 研究,新版本的 Angular 比 React + Redux 要略快一些。
具体请参见:
https://medium.freecodecamp.org/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-2018update-e5760fb4a962
此外,该研究还表明:Angular 的应用体积略小,受测时的转换体积(Transfer Size)只有 129 KB,而 React + Redux 则有 193 KB。
⑤预构建的 UI 设计元素:Angular Material vs 社区支持的组件
Angular:随着材料设计(Material Design)语言在 Web 应用中流行,更多的工程师受益于其开箱即用的材料工具集。
Angular 拥有预构建的材料设计组件。其 Angular Material 能够对表单控件、导航、布局、按钮、指示器、弹窗、模块、以及数据表,实现一系列常见的交互模型。由于各种预构建元素的存在,配置 UI 的速度变得更快。
React:它的大多数 UI 工具都来自于它的社区。目前,React 门户网站上的 UI 组件板块(https://reactjs.org/community/ui-components.html)提供了大量免费的和部分收费的组件。
您需要安装 Material-UI 库和各种依赖项,才能使用 React 的材料设计进行构建。
此外,您还可能用到由 React 构建的 Bootstrap 组件(https://react-bootstrap.github.io/),以及包含 UI 组件与工具集(https://hackernoon.com/23-best-react-ui-component-libraries-and-frameworks-250a81b2ac42)的其他软件包。
⑥移动可移植性:NativeScript vs React Native
这两个框架都附有能让工程师将现有的 Web 应用移植到移动应用之中的工具。
我们对NativeScript(Angular)和React Native也进行了深入分析和比较。
具体请参见:
https://www.altexsoft.com/blog/engineering/xamarin-vs-react-native-vs-ionic-vs-nativescript-cross-platform-mobile-frameworks-comparison/?utm_source=DZone&utm_medium=referral
下面是要点简述:NativeScript(https://www.nativescript.org/)是一款使用 TypeScript 作为核心语言的跨平台移动框架。其用户界面是用 XML 和 CSS 来构建的。
开发人员在从 Web 应用处移植业务逻辑,并在其 UI 上使用相同的操作技巧时,该工具允许 iOS 和 Android 平台共享大约 90% 的代码。
NativeScript 背后的理念是:为移动设备编写单个 UI,并根据具体的需求为每个平台进行微调。
与使用 WebView 来渲染的混合式跨平台解决方案不同,该框架是在 JavaScript 虚拟机中运行各种应用,并直接连接到原生的移动 API 上,从而保证了具有能够和原生应用相媲美的高性能。
React Native(https://facebook.github.io/react-native/):该 JavaScript 框架是针对移动应用的跨平台实现所准备的,同时能够支持从Web处的移植。
与 NativeScript 相比,React Native 采用了略有不同的方法:它鼓励其社区为不同的平台编写单独的 UI,并坚持“learn once, write everywhere”的方法。
因此,其代码的共享程度也有 70%。另外,React Native 还拥有类似 NativeScript 的原生 API 渲染功能。
不过它需要构建额外的桥式 API 层,并运用原生控制器来连接 JavaScript 的 runtime。
总的说来,如果您需要使用同一种业务逻辑同时运行 Web 和移动应用的话,那么这两种框架都是不错的选择。
当然,NativeScript 更专注于代码的共享,和产品上线时间的缩短;而 React Native 则会用更长的开发周期换取最终更贴近的原生观感。
⑦文档和厂商支持:文档不足,需依靠大型社区
自 2018 年 1 月以来,由于 Google 持续对 Angular 生态系统进行开发,他们不但能为该框架提供长期支持(Long-Term Support,LTS),还能专注于修复错误和积极改进。
不过相比其框架的发展速度,对应的文档更新则没有那么的及时。一些开发人员对其 CLI 文档更新的速度表示了担忧。
下图是旨在方便 Angular 开发人员使用的一款交互式服务界面(https://update.angular.io/),您可以自定义框架的当前版本和更新目标,以获取更新内容的清单。
由于 AngularJS 的文档(https://docs.angularjs.org/api)和教程所提供的范围比 Angular 2+ 更为广泛,因此受到了开发人员的称赞。
而 React 社区则遇到了与 Angular 类似的文档问题。由于 React 环境及其运行方式经常出现更新,因此在使用 React 时,您必须为各种变化和不断的学习做好准备。
虽然 React 已有一些最新版本的文档(请参见:https://reactjs.org/versions/),但是要跟上所有的变更与集成,却并非一项简单的任务。
好在其社区的支持在某种程度上抵消了此类问题。React 拥有大量的开发人员,他们能够在专题论坛上时常分享自己的知识。
⑧学习曲线:Angular 更为陡峭
Angular 的学习曲线被认为比 React 陡峭一些。Angular 是一款复杂且冗长的框架,它能够通过各种方法去解决某些单个问题。不过它需要通过许多重复性的操作,来实现复杂的组件管理。
正如我们上面所提到的,该框架一直在不断地发展之中,因此开发人员不得不适应其各种变更。
另外,由于 Angular 2+ 使用了 TypeScript 和 RxJS,尽管 TypeScript 接近于 JavaScript,但是用户仍然需要花上一些时间去学习 RxJS。
由于更新频繁,React 也需要用户不断地学习。当然,如果您已经擅长于使用 JavaScript 的话,则不需要花费太多的时间重新开始。
目前,由于约有 60% 的 React 应用构建会用到 Redux,因此 Redux 成了一种必备工具,而 React 学习曲线则主要是由 Redux 库所决定。
不过,React 也为初学者提供了各种实用的教程,具体请参见:
https://reactjs.org/tutorial/tutorial.html
⑨社区和接受度:两者不相上下
React 在 GitHub 上的受欢迎程度略高于 Angular。它拥有 113,719 颗星和 6,467 人关注;而 Angular 只有 41,978 颗星和 3,267 人关注。
根据 2018 年版的 Stack Overflow Developer Survey(如下图所示),Angular 的开发人员占比为 37.6%,而 React 的用户占比为 28.3%。
值得一提的是,该调查涵盖了 AngularJS 和 Angular 2+ 用户。
有趣的是:Angular 在负面评论上也较为领先。根据同一份调查显示,有 45.6% 的开发人员认为 Angular 是最糟糕的框架之一。
当然,此类负面反馈可能受到了许多开发人员仍在使用 AngularJS,这一客观事实的影响,毕竟 AngularJS 比 Angular 2+ 存在更多的问题。而且 Angular 的社区规模更为庞大。
相对而言,React 的数字就好看一些,只有 30.6% 的专业开发人员不愿意使用它。

 

您会选择哪种框架?

 

综上所述,Angular 背后的基本理念是:为前端开发的总体体验提供强大的支持和工具集。
由于拥有 Google 团队的不断更新和积极支持,该框架不会出现“野蛮生长”。
其背后的工程师们会努力保护现有的社区,并协助各类开发人员与公司,从 AngularJS 切换到具有更高性能和更小应用体积的 Angular 2+ 上。
同时,随着您的应用逐渐到达企业级规模,TypeScript 能够增加应用代码的可维护性,因此也就变得愈加重要了。当然,这些也会让开发人员面临陡峭的学习曲线。
React 提供了一种更为轻量级的方案,适合于没有太多学习时间就需要快速上手的开发人员。
虽然其代码库并未规定各种工具集和方法,但是诸如 Redux 之类的常用工具,还是需要您去额外花时间学习的。
而且,由于 React 的性能与 Angular 旗鼓相当,因此它对于开发人员来说还是颇具吸引力的。
 

丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:React vs Angular,到底谁更牛?
喜欢 (0)
[247507792@qq.com]
分享 (0)

您必须 登录 才能发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00