文档章节

Angular vs React 最全面深入对比

葡萄城控件技术团队
 葡萄城控件技术团队
发布于 2017/05/02 12:19
字数 4356
阅读 4721
收藏 175
点赞 7
评论 27

如今,Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无法告诉你哪个框架更优秀,但尽量从更多的角度去比较两者,尽可能的为你在选择时提供更多的参考意见。

选择的方法

在选择之前,我们尝试带着一些问题去审视你将要选择的框架(或者是任何工具),尝试用这些问题的答案来帮助我们更加了解框架,也更加让选择变得更容易

框架本身的问题:

  • 是否成熟?谁在背后支持呢?
  • 具备的功能?
  • 采用什么架构和模式?
  • 生态系统是否丰富?

需要自我反思的问题:

  • 我和我的团队能否轻松学习并掌握?
  • 是否适合我的项目?
  • 开发体验是否足够好?

严格说来,Angular和React的比较是不公平的,因为Angular是一个功能丰富的框架,而React是一个UI的组件库,所以我们在接下来的分析中会将一些经常和React在一起使用的类库放在一起讨论。

OK,开始… …

 

成熟度

作为一名成熟的开发人员或者是能够决定架构及技术走向的人员,一项必备的技能就是能够在工作和项目中平衡成熟技术与最前沿框架之间的关系,既能保持人员及技术的前进,又能保证项目或产品的交付质量,所以,必须小心以下可能的风险:

  • 该框架可能是不稳定的。
  • 主要的开发方(赞助方)可能会突然的放弃。
  • 如果你需要帮助,可能没有大型知识库或社区可用。

幸好,无论是Angular还是React,似乎都不需要担心以上的风险

React

React由Facebook开发和维护,用于自己的产品,包括Instagram和WhatsApp。现在已经有大约三年半的时间。 它也是GitHub 最受欢迎的项目之一。

Angular

Angular由Google进行维护,并用于Google 的Adwords 和Fiber项目。既然AdWords是Goolge重要的吸金利器,自然Angular不太可能突然夭折。

 

功能

如前文提到的,Angular本身会比React自带很多的功能,当然,更丰富的功能对于一个框架来说,是优点也有可能是缺点。两个框架都具备一些相同的核心功能:组件化、数据绑定以及平台无关的Render机制

Angular

Angular除了提供一些需要最新浏览器支持的功能外,同时提供以下标准功能:

  • 依赖注入
  • 模板
  • 路由(@angular/router)
  • AJAX(@angular/http)
  • 表单(@angular/forms)
  • 组件化CSS封装
  • XSS保护
  • 单元测试工具

功能丰富的好处就是你不需要额外费精力去挑选第三方的类库,然而,这也同样让你没得选择,即使你并不需要这些功能(最新发布的Angular4貌似已经意识到了这个问题)

React

相对Angular,React本身提供的功能就相对“简约“:

  • 无依赖注入
  • 使用JSX代替传统的HTML Templates
  • XSS保护
  • 单元测试工具

相对Angular,React让你有很大的自由度去挑选第三方的类库,比如:

可以根据自己的需求很自由(或者定制)需要的类库,同时这些第三方的类库都是很容易学习的。

 

语言与模式

随着两个框架的流行,一些概念和技术也随着浮出,如果想真正的用好或者说掌握这两个框架,了解随之而出的这些概念或者技术是非常必要的:

React

JSX

JSX是一个很有争议的话题:有些人喜欢它,而其他人认为这是一个很大的退步。React决定使用一种类似XML的语言在组件中把标记和代码结合起来,直接在JavaScript代码中编写HTML标记。

尽管混合标记与JavaScript的话题可能是有争议的,但它具有无可争议的优点:静态分析。如果在JSX标记中发生错误,编译器会立即报错而不是留待运行时出现莫名其妙的问题。这有助于开发人员快速排查错误以及避免其它愚蠢的错误,比如拼写错误。

Flow

Flow是由Facebook开发的JavaScript类型检查工具。它可以解析代码并检查常见的类型错误,如隐式转换或取消引用。

与类似目的的TypeScript不同,它不需要开发人员迁移到新语言,并为你的代码注释类型检查工作。在流程中,类型注释是可选的,可用于向分析器提供其他提示。如果你想使用静态代码分析,同时避免重写现有的代码,Flow是一个很好的选择。

Redux

Redux是一个可以以清晰的方式管理状态变化的库。它的灵感来自Flux,但是有一些简化。Redux的关键思想在于,应用程序的整个状态由单个对象表示,该对象由名为reducers的函数进行突变。Reducers本身是纯功能,与组件分开实现。这样可以更好地分离问题和测试。

如果你正在开展一个简单的项目,那么引入Redux可能有点得不偿失,但对于中等和大型项目来说,这是一个很好的选择。

Angular

TypeScript

TypeScript是一种基于JavaScript开发并由Microsoft开发的新语言。它是JavaScript ES2015的超集,并包含较新版本的语言的功能。你可以使用它而不是Babel来编写最先进的JavaScript。它还可以通过使用注释和类型推断的组合来静态分析你的代码。

还有一个更微妙的好处。TypeScript受到Java和.NET的严重影响,所以如果你的开发人员有这些语言之一的背景知识,他们可能会比简单的JavaScript更容易找到TypeScript(请注意我们如何从工具切换到你的个人环境)。 虽然Angular是第一个积极采用TypeScript的主要框架,但它也可以与React一起使用。

RxJS

RxJS是一个响应式编程库,可以灵活地处理异步操作和事件。它是将Observer和Iterator模式与功能编程相结合的组合。RxJS允许您将任何东西视为连续的流,并对其进行各种操作,例如映射,过滤,拆分或合并。

该类库已被Angular采用其HTTP模块以及一些内部使用。当您执行HTTP请求时,它返回一个Observable,而不是通常的Promise。 虽然这个类库非常强大,但也很复杂。要掌握它,您将需要了解不同类型的“可观察”,“主题”以及大约一百种方法和操作符 。

当您使用连续数据流(如Web套接字)工作很多的情况下,RxJS非常有用,但是对于其他任何东西来说似乎过于复杂。 无论如何,当你使用Angular时,您至少应该了解RxJS的基本知识。

 

TypeScript可以说是Angular中非常重要的特点,首先他给原本C#/Java开发人员提供了很容易进入前端的机会,另外TypeScript也想比JavaScript更容易理解,尤其是代码量或者业务复杂的项目中。

 

生态系统

开源框架这么流行的原因之一,就是围绕着他们,会有无数的工具、类库、扩展来支撑整个框架,有时,这些工具可能比框架本身更有帮助,接下来我们就来看看相关这两个框架最流行的工具和类库。

Angular

Angular CLI

现代框架的流行趋势是使用CLI工具,可以帮助您引导项目,而无需自行配置构建。Angular有Angular CLI。它允许您仅使用几个命令来生成和运行项目。负责构建应用程序的所有脚本,启动开发服务器和运行测试都会在node_modules中隐藏。您也可以在开发过程中使用它来生成新的代码。这使得新项目的设置变得轻而易举。

Ionic 2

Ionic 2 是开发混合移动应用程序的流行框架的新版本。它提供了一个与Angular 2完美集成的Cordova容器,以及一个漂亮的材料组件库。 使用它,您可以轻松地设置和构建移动应用程序。 如果您喜欢使用混合应用程序,那么这是一个不错的选择。

Material design components

如果您热衷于设计Material,您会很高兴听到Angular有一个Material组件库

Angular universal

Angular universal是一个种子项目,可用于创建支持服务器端渲染的项目。

@ngrx/store

@ngrx/store是由Redux启发的Angular的状态管理库,基于由pure reducer进行突变的状态。它与RxJS的集成允许您利用推送更改检测策略获得更好的性能。

关于更多的有关Angular相关类库和工具可以参考:the Awesome Angular list

React

Create React App

Create-react-app 是一个CLI工具,用于快速创建新的React应用。可以生成一个新的工程,启动开发服务器并创建绑定。Jest(来自Facebook的一个单元测试工具)也同时集成在Create-react-app内部,更方便的让我们进行单元测试。

React Native

React Native 是Facebook开发的基于React在移动端的开发平台,借助此平台,React可以创建真正的Native的UI。提供了一系列标准的React组件用于绑定。同时允许创建自己的组件并与Objective-C、Java或者Swift的代码进行绑定。

Material UI

还有一个可用于React的Material Design Component。与Angular的版本相比,这个版本比较成熟,可以使用更广泛的组件。

Next.js

Next.js 是React应用程序的服务器端呈现的框架。它提供了一种在服务器上完全或部分呈现应用程序的灵活方式,将结果返回给客户端并在浏览器中继续。它试图使创建通用应用程序的复杂任务尽可能简单,所以设置被设计为尽可能简单,最少量的新原语和对项目结构的要求。

MobX

MobX 是用于管理应用程序状态的替代库。不像Redux那样将状态保存在一个不可变的存储中,它鼓励您仅存储最低限度的必需状态,并从其中获取剩余的数据。它提供了一组装饰器来定义可观察和观察者,并将反应逻辑引入到你的状态管理代码中。

Storybook

Storybook是React的组件开发环境。它允许您快速设置单独的应用程序来显示您的组件。除此之外,它提供了许多附加组件来记录,开发,测试和设计您的组件。

同样的,可以从Awesome React list了解更多的工具和类库。

 

学习曲线与开发体验

选择新技术的一个重要标准是学习它是否容易。当然,答案取决于广泛的因素,例如您以前的经验和对相关概念和模式的普遍了解。如果我们假设你已经知道ES6 +,构建工具和所有这些,我们来看看你还需要了解什么。

React

有了React,你会遇到的第一件事就是JSX。对于一些开发人员来说似乎刚开始会觉得很别扭,但它并没有增加复杂性; 只是表达式,实际上还是JavaScript,还有一个特殊的类似HTML的语法。您还需要学习如何编写组件,使用props进行配置和管理内部状态。不需要学习任何新的逻辑结构或循环,因为所有这些都是纯JavaScript。

官方教程是开始学习React的好地方。一旦完成了官方教程,接下来应该熟悉并掌握React的路由机制 。React Router v4版本可能稍微复杂和非常规,但也不许太过担心。

使用Redux将需要一个范式的转变,免费入门Redux视频课程可以快速介绍核心概念。根据项目的大小和复杂性,找到并学习一些额外的库,这可能是棘手的一部分,但之后,一切都应该变得顺利。

其实,React的上手非常容易,最难的部分可能是如何挑选合适你项目或产品的类库。

Angular

Angular将向您介绍比React更多的新概念。首先,您需要使用TypeScript。对于具有静态类型语言(如Java或.NET)经验的开发人员,这可能比JavaScript更容易理解,但对于纯JavaScript开发人员,这可能需要一些额外的学习。

框架本身丰富的技术主题可以从诸如模块,依赖注入、装饰器、组件、服务、管道、模板和指令等基础开始,到更高级的主题,如更改检测,区域,AoT编译和RxJS。这些都在文档中。RxJS是一个很重的话题,在官方网站上有详细描述。虽然在基本功能层面上使用起来相对容易,但在转到高级应用时会变得更加复杂。

总而言之,我们注意到Angular的进入壁垒高于React。新概念的数量绝对令新来者感到困惑。又是碰到一些问题还不得不Google后才能找到答案,但是,就像之前说的,是否合适,还是取决于更多的因素。

 

前景

Angular

就在2017年的3月,Angular已经发布了4.0的版本(兼容2.x版本),关于为什么是4.0,官方的解释是因为Router这个主要核心组件的版本已经是4.0.0,如果Angular还用3.0会引起混淆,如下图:

 

4.0版本中主要是大幅度的减小了代码体积(60%),同时提高了加载的速度(肉眼可查的程度),同时报错的信息更清晰了。根据官方的文档,Angular的版本升级会以比较快的速度进行迭代

 

无论是大版本的6个月迭代,还是每周的hotfix,能看出Angular团队想用快速升级的策略迅速占领市场。

React

反观React的升级倒是非常谨慎的,这从最新的v15.5.0的发布新闻博客中就能看出

不过,从博客中能看到React即将迎来v16,不知道整个重写的React会给我们带来什么惊喜。不过,需要提一下的是Facebook已经与去年底的时候发布了React VR,有兴趣的同学可以围观以下。

 

契合度

无论是哪个框架,适合自己的才是“好“的,所以需要你从项目(产品)本身的角度去衡量,以下的问题列表可能并不全面,但至少可以作为一个开始

  • 该项目(产品)有多大规模?
  • 要维护多久?
  • 所有的功能是提前清楚地定义还是灵活的改变?
  • 域模型和业务逻辑是否复杂?
  • 你定位什么平台? Web,手机,桌面?
  • 你需要服务器端渲染吗? SEO重要吗?
  • 你会处理很多实时事件流?
  • 你的团队有多大?
  • 你的开发人员有多丰富,他们的背景是什么?
  • 是否有任何您想要使用的现成的组件库?

如果您正在开展一个大型项目,并希望尽可能减少错误选择的风险,请考虑先创建一个demo用于验证产品概念。选择项目的一些主要功能,并尝试使用其中一个框架以简单的方式实现它们。 Demo通常不会(也不应该)花费很多时间,但会提供一些宝贵的经验,可以帮助您验证关键的技术要求。如果对结果感到满意,可以继续全面构建。如果没有,会给你充分的时间重新选择。在项目发开过程中,你还可以借助一些支持Angular和React的开发工具来提高开发效率,如Wijmo,这是一款为企业应用程序开发而推出的一系列包含 HTML5 和 JavaScript 的开发控件集。无论你的应用程序是移动端、PC端、还是必须要支持IE6,Wijmo Enterprise 均能满足需求。

 

总结

通过以上的6个方面对比了React和Angular这两个目前最热的前端框架,希望能对你在选择时提供一些参考。但是否真的是合适自己的,或许真的需要用过才知道 😊 Good luck~~~

原文链接:https://www.sitepoint.com/react-vs-angular/

转载请注明出自:葡萄城控件

© 著作权归作者所有

共有 人打赏支持
葡萄城控件技术团队

葡萄城控件技术团队

粉丝 321
博文 487
码字总数 694630
作品 13
西安
高级程序员
加载中

评论(27)

hwhao
hwhao
最开始学的是ng1,后来用vue时间最长,最后还是拥抱了react
黯然销魂者
黯然销魂者
卧槽,我出地铁了
冰力
冰力
新手用vue,高手用react,angular已死。
冰力
冰力

引用来自“steveyang”的评论

性能方面呢?

@steveyang React性能好
s
steveyang
性能方面呢?
tsysler
tsysler
之前选型的时候也参考了一些资料:

较为完整的 React.js / Vue.js 的性能比较 Part 1
http://gold.xitu.io/entry/577bacc92e958a00549106dc

较为完整的 React.js / Vue.js 的性能比较 Part 2
http://gold.xitu.io/entry/57691d5d6be3ff006a438e09
卖萌的程序猿
卖萌的程序猿
两个都好,我选vue
不愿透露姓名的Mr成
不愿透露姓名的Mr成
ng是一整套的解决方案,其他的感觉少了点什么
黑狗
黑狗

引用来自“Yuanzhhh”的评论

vue虽易于上手,但 似乎很难看到前景在哪儿
说明你看错了。。。vue足够轻量级了 an和r相对而言太重了
树森
树森
翻译不能称为原创,更应该注明出处
勿以 star 数论高低!React 在前端框架世界仍是领先地位

上周在前端的 JavaScript 框架世界发生了一件称得上是“里程碑”的事:Vue.js 在 GitHub 上的 star 数量终于超过了 React.js 的 star 数量。 通过使用一个叫做 Star History 的工具,我们可以...

局长 ⋅ 06/21 ⋅ 0

Vue、React、Angular最佳UI框架

摘要: 今天我们不聊技术,只"以貌取人"。 前言 之前有很多刚入门的小伙伴问我(上面是我的自拍照),现在前端Vue、React、Angular这三个框架似乎都很好,反而不知道选择什么了,我当时开玩笑...

Fundebug ⋅ 05/03 ⋅ 0

JavaScript 开发框架横向比对(Vue、React 和 Angular)

1 背景比对 MIT license 与 BSD-license 之间的区别是:MIT license 允许衍生软件加上我们自己的名字做推广,而 BSD license 不可以。 MVVM(Model-View-ViewModel):将其中的View 的状态和...

deniro ⋅ 05/30 ⋅ 0

[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

JavaScript主流框架3月趋势总结

译者按: React依旧独领风骚! 原文: What’s New in JavaScript Frameworks-March 2018 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习...

Fundebug ⋅ 04/20 ⋅ 0

所谓的 Virtual DOM 到底是什么?

首发地址在知乎,由于个人精力有限,可能无法在此进行快速回应。 背景 最近写了一个 ng-vdom 的 POC,用于将 Virtual DOM 对象渲染为原生 Angular 内容。 当然,重要的事情要说三遍: 这是一...

TrotylYu ⋅ 06/07 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部