Angular 2与React比较

Angular2 专栏收录该内容
1 篇文章 0 订阅

Angular 2与React的选择其实只是一种风格偏好。React专注于渲染速度且能够在客户端或原生应用内处理复杂的UI设计,而Angular 2则更具开发普适性。它既能够引导我们逐步构建自己的应用,同时也提供一定的表现力及可复用UI设计机制。
这里写图片描述

ReactJS快速回顾

ReactJS是一套JavaScript Web库,由Facebook打造而成且主要用于构建高性能及响应式用户界面。React负责解决其它JavaScript框架所面对的一大常见难题,即对大规模数据集的处理。能够使用虚拟DOM并在发生变更时利用补丁安装机制只对DOM中的dirty部分进行重新渲染,React得以实现远超其它框架的速度表现。

优势:

1.React伟大之处就在于,提出了Virtual Dom这种新颖的思路,并且这种思路衍生出了React Native,有可能会统一Web/Native开发。在性能方面,由于运用了Virtual Dom技术,Reactjs只在调用setState的时候会更新dom,而且还是先更新Virtual Dom,然后和实际Dom比较,最后再更新实际Dom。这个过程比起Angularjs的bind方式来说,一是更新dom的次数少,二是更新dom的内容少,速度肯定快。

2.ReactJS更关注UI的组件化,和数据的单向更新,提出了FLUX架构的新概念,现在React可以直接用Js ES6语法了,然后通过webpack编译成浏览器兼容的ES5,开发效率上有些优势.
React Native生成的App不是运行在WebView上,而是系统原生的UI,React通过jsx生成系统原生的UI,iOS和Android的React UI组件还是比较相似的,大量代码可以复用

3.维护UI的状态,Angular 里面使用的是 $scope,在 React 里面使用的是 this.setState。 而 React 的好处在于,它更简单直观。所有的状态改变都只有唯一一个入口 this.setState(),Angular 就比较复杂,不知道背后使用了哪些黑魔法。

劣势:

React是目标是UI组件,通常可以和其它框架组合使用,目前并不适合单独做一个完整的框架。React 即使配上 Flux 的组合,也不能称之一个完整的框架,比如你想用Promise化的AJAX?对不起没有,自己找现成的库去。而且第三方组件远远不如Angular多。目前在大的稳定的项目上采用React的,我也就只知道有Yahoo的Email。React本身只是一个V而已,所以如果是大型项目想要一套完整的框架的话,也许还需要引入Flux和route相关的东西。而Angular在这方面提供的东西比React多多了.

Angular 2满载强化机制

Angular 2相较于Angular 1迎来一系列强化。首先,Angular 2高度关注创建可复用的前端组件。尽管Angular 1在一定程度上也能实现同样的效果,但该框架的新版本解决了大量影响利用性的难题,例如对$scope与控制器的依赖性。其指令亦得到显著简化,使得Angular 2代码较前代更易于输入及阅读。Angular 2还考虑到与TypeScript的协作需求,消除了大量用于保证类型安全的代码。再加上众多性能与框架改进,Angular 2确实给人焕然一新之感。

优势:

AngularJS是一套完整的框架,angular有自带的数据绑定、render渲染、angularUI库,过滤器, filter, directive(模板), service(), q(defer), route, http, cookie, inject(依赖注入),factory,provider……,等等一系列工具,基本上只要你在做web开发用过的东西,它都有一个。但是这些东西react自身都没有。

Angularjs的架构清晰,分工明确,扩展性良好,model,view,controller谁在什么时候做什么事情说的很清楚,angular能够让程序员真正专注于业务逻辑,对js能力要求也不高(基本上只需要写业务逻辑,实在用不上那些高级的js技巧和知识呀),而且因为对html侵入不大,非常易于和designer协作。整个框架充满了DI的思路,耦合性非常低,对象都是被inject的,也就是说每个对象都可以轻易被替换而不影响其他对象。

Angular生产效率高,单向数据流什么的想法非常好,但是写起来太麻烦!我只想变更个很简单的数据还要经过action、dispatcher、store、view四步,angular里一行代码就搞定的事情在react里却如此麻烦

Angular的背后是Google,所以社区基础是不用担心的,整个生态也已经是非常的完整了,从最基本的Tutorial到StackOverflow的问题数到框架本身的剖析都非常多,Angular上手比较容易。

劣势:

  1. 性能
    同样是TODO MVC的Sample,Angular完全载入用了1.1s(WebPagetest - Visual Comparison)。React只用了0.3s,不得不说,确实挺慢的。。
  2. Angular 2.0推翻重做使得目前不宜采用此框架

Angular 1.x版本其实是个比较旧的东西了,现在看来有些理念过时了,比如依赖注入、自己独特的模块化,这些东西其实在ES6下已经很好地被解决了。

Angular的2.0几乎是一个推翻重做的框架,估计不会有1.X的upgrade方案。所以如果现在新开始的项目采用Angular的话,会是一个很尴尬的时机。同样,如此大的改动似乎也反面印证了1.X并不是那么好。

注意事项

值得强调的是,React与Angular(任意版本)之间的比较其实并不对等。Angular是一套前端框架,负责为应用客户端提供完整架构,并允许我们将客户端代码作为强大的功能套件。而React则是一套库,其提供的功能并不丰富——其主要作用是充当完整项目的组成部分,而非主导整体代码结构。当然,二者之间也存在着相当程度的相似性,而这也正是此次比较存在的理由所在。

架构

如上所述,React是一套用于创建响应式模板的JavaScript库。因此,React并不真正关注架构——它更像是一款作用于应用内大型客户端代码中的工具。

另一方面,Angular 2则以框架的角色指明了前端代码的“正确设计方式”。其专注于组件与类型安全,允许大家将注意力集中在代码本身,并在强调复用性与封装的同时建立面向对象前端。

从这个角度来看,React与Angular 2实在没什么可比性——React适合那些希望以更为灵活的方式构建代码架构的朋友,而Angular 2则属于应用前端的整体架构选项。因此,谁能更好地适应应用设计模式的需求,谁就将在这一环节中胜出。

模板

两套方案皆提供模板工具,但采用的模板管理方式则区别很大。React以JSX为基础构建模板对象,大家可以构建内联模板并将所有模板代码进行集中保存。Angular 2则以物理方式将用于驱动应用的JavaScript与作为渲染对象的HTML加以分离。

不过由于更关注组件化且能够与TypeScript顺畅协作,因此大家往往能够凭借Angular 1.x实现更出色的复用性与灵活性。总而言之,在选定了理想的模式之后,具体选择将由美学与基本功能决定——React模板更紧凑且渲染速度更快,而Angular 2组件则更具复用性,并通过无处不在的双向数据绑定简化应用对象管理流程。

原生支持

Angular 2与React有着不同的底层目标,这也意味着二者在支持原生设备代码时有着截然不同的表现。Angular 2团队决定专注于框架本身,并将设备可运行代码方面的工作交给其它供应商。而React生态系统则推出了React Native——这套框架能够将React代码翻译为原生应用体验,从而带来远超传统混合型Web应用的性能表现。

再次强调,选择“正确的”方案才是理想的思维方式。如果大家希望自己的移动应用体验快如闪电,那么React将直接胜出。但如果大家希望采用组件化程度更高的应用架构,同时愿意牺牲部分性能以提升代码结构一致性,那么Angular 2与Ionic等框架的结合则将成为正确答案。

总结

Angular是真正的大而全的Framework,它有一套生态体系和思路,基本你按照它的思路往里面填代码就OK。
React是一个简短有力的library,它只负责解决你某个单一的“痛点”。
开发大项目或者比较正规的项目,建议使用Angular,angular 是最适合CRUD的SPA 单页面的应用程序。 和 angularUI 一起使用就可以搭建还不错的web app.
yeoman+bower+gulp可以很快的把架子搭起来,终归比较简单实用。
对于移动端,React比Angular更有潜力, reactjs的模块化 + vdom + 搜索友好, 轻巧高效。
Angular 2与React的选择其实只是一种风格偏好。React专注于渲染速度且能够在客户端或原生应用内处理复杂的UI设计,而Angular 2则更具开发普适性。它既能够引导我们逐步构建自己的应用,同时也提供一定的表现力及可复用UI设计机制。

最终决定取决于应用设计目标及开发团队的普遍意见。大型复杂用户界面外加出色性能是React的王牌,开发流程与代码架构则是Angular 2的主场。总之,只要能够充分考量实际需求与定位,大家一定能做出正确的选择。

一些AngularJS相关文章链接:

  • 0
    点赞
  • 2
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值