HTML5技术

Angular vs React 最全面深入对比 - 葡萄城控件技术团队

字号+ 作者:H5之家 来源:H5之家 2017-05-04 16:05 我要评论( )

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

如今,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除了提供一些需要最新浏览器支持的功能外,同时提供以下标准功能:

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

React

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

相对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更容易理解,尤其是代码量或者业务复杂的项目中。

 

生态系统

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 随应潮流-基于ABP+Angularjs现代化应用软件开发框架(1)-总体介绍 - 在路在的张

    随应潮流-基于ABP+Angularjs现代化应用软件开发框架(1)-总体介绍 -

    2017-04-22 08:04

  • 【react学习】关于react框架使用的一些细节要点的思考 - 外婆的彭湖湾

    【react学习】关于react框架使用的一些细节要点的思考 - 外婆的彭湖

    2017-04-16 18:00

  • 【react框架】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的

    【react框架】利用shouldComponentUpdate钩子函数优化react性能以及

    2017-04-16 09:02

  • NodeJS+MongoDB+AngularJS+Bootstrap书店示例 - Market/Relay

    NodeJS+MongoDB+AngularJS+Bootstrap书店示例 - Market/Relay

    2017-04-14 15:00

网友点评
e