Angular - React之争

Angular和React无疑是目前最受追捧的两个前端框架,谷歌也发现Angular1.x不足的地方,开始开发2.0版本,脸书发现React的组件化和虚拟DOM非常好,也同时投资React Native。

00.先比较Angular1.x与React

这两个没什么可比性,Angular着重数据绑定和前端MVC,以及不同模块的依赖注入。React着重于组件化和性能。之前做项目用的Angular,数据绑定很爽,但是作为新手学习曲线确实很陡峭,写个指令不知道scope飞哪里去了,用Angular-UI又要去翻墙查各种声明方式,总之踩了很多坑。某一天看到React,确实有种眼前一亮的感觉,因为时间不多,当时也就没深入了解了。React给人一种小清新的感觉,Virtual DOM的思路比Angular的$digest循环明显好一点,然而Angular火的早,参考的东西很多,这两者各有优劣吧。长期来看React会比Angular更好,毕竟谷歌已经把重点放在Angular2.x上面了,有些放弃1.x的感觉。

01.再比较Angular2.0与React Native

笔者走马观花的看了这两个框架,发现两者有很多共同点。比如都选择了ES6的语法,用一个class来声明组件,比如都着眼于组件化,再比如都抽象出渲染模块,能在不同平台复用。而两者不同的地方是:

Angular2比React Native的语法更优雅,更像是声明式的语法。命令式走向声明式无疑是一门语言进步的标志,好比盖一栋房子,命令式像是找土,找砖窑,一块一块烧,声明式好比打电话给砖厂,“明天XX点送1000块砖过来”,React Native的一些语法相比于Angular2显得更带有命令式的意味,比如getInitialState,这是一个View设置初始状态和初始化数据的API,这相比与Angular2使用class的构造器语法显得有些不优雅了。

具体的例子比较一下:

import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser"; @Component({
selector:"ez-card",
properties:["name","country"],
template : `<div class='ez-card'>
My name is <b>{{name}}</b>,
I am from <b>{{country}}</b>.</div>`
})
class EzCard{
constructor(){
this.name = "Mike";
this.country = "Sweden";
}
}
var React = require('react-native');
var {
AppRegistry,
Image,
ListView,
StyleSheet,
Text,
View,
} = React; React.createClass({
getInitialState: function() {
return {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
};
},
render : function(){
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView}
/>
}
}
});

上面两段代码是从一些教程上摘下来的部分片段,纯ES6语法的Angular2看起来明显更清爽一点,而且Angular2看样子是要实现Write Once,Run Anywhere:

而React的重点是Web应用,React Native注重原生平台的底层调用,Learn Once,Write Anywhere是否会造成冗余的开发也有待考量,但原生接口调用以及组件化的开发方式一定会比目前hybrid app的模式更加靠谱,性能更好,可维护性更高。

10.总结

组件化和声明式的开发一定会成为主流,ES6也会慢慢普及,React以及React Native已经获得了不错的声誉,Angular1.x已经功成名就,Angular2蓄势待发,如果Angular2能在短时间范围内实现IOS和安卓的渲染应该会与React Native、现存的很多hybrid app竞争并且得到一席之地的。

Angular与React的一些看法的更多相关文章

  1. 深入比较选择 Angular 还是 React

    我应该选择 Angular 还是 React?现在JS框架两强的格局让许多开发者选择起来很纠结.无论你是一个正在思考如何入门的新手,还是一个为下个项目挑选框架的设计者,或是一个架构师为公司做长远的规划 ...

  2. 一个资深iOS开发者对于React Native的看法

    一个资深iOS开发者对于React Native的看法 当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道.   我认为一个js开发者可以使用javasc ...

  3. 2015前端各大框架比较(angular,vue,react,ant)

    前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...

  4. 前端开发框架简介:angular和react

    作者:vienwu react是facebook推出一个用来构建用户界面的js库.官方介绍的三大特性如下: just the ui 把react只当作一个ui组件就好,等同于传统mvc中的view. ...

  5. Angular vs React 最全面深入对比

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

  6. 都 9012了,该选择 Angular、React,还是Vue?

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 尽管 Web开发的典型应用场景除了将服务器用作平台.浏览器用作客户端之外,几乎很少活跃于其他业务领域,但不可 ...

  7. EmberJS 为什么我偏爱 Ember.js 胜过 Angular 和 React.js

    文章写的很老到,非常值得一看!评论也很精彩,值得一看 为什么我偏爱 Ember.js 胜过 Angular 和 React.js 前几天看到了这篇文章:Why I prefer Ember.js ov ...

  8. Angular、React.js 和Node.js到底选谁?

    为了工作,程序员选择正确的框架和库来构建应用程序是至关重要的,这也就是为什么Angular和React之间有着太多的争议.Node.js的出现,让这场战争变得更加复杂,虽然有选择权通常是一件很棒的事情 ...

  9. Vue.js Is Good, but Is It Better Than Angular or React?

    Vue.js is a JavaScript library for building web interfaces. Combining  with some other tools It also ...

随机推荐

  1. mysql数据库千万级别数据的查询优化和分页测试

    原文地址:原创 mysql数据库千万级别数据的查询优化和分页测试作者:于堡舰 本文为本人最近利用几个小时才分析总结出的原创文章,希望大家转载,但是要注明出处 http://blog.sina.com. ...

  2. unity3d遍历出Cube里面所有子对象

     cube目录下有n个cube,可不可以一下子遍历出所有的对象,而不用一个一个的find?find(“Cube1”)   1.foreach(Transform ts in cube)   2.cub ...

  3. Html.ActionLink 几种重载方式说明及例子

    本文整理了该方法的几种重载形式:一 Html.ActionLink("linkText","actionName")该重载的第一个参数是该链接要显示的文字,第二 ...

  4. (转)Redis复制与可扩展集群搭建

    讨论了Redis的常用数据类型与存储机制,本文会讨论一下Redis的复制功能以及Redis复制机制本身的优缺点以及集群搭建问题. Redis复制流程概述 Redis的复制功能是完全建立在之前我们讨论过 ...

  5. JAVA:避免重复的创建对象

    在实际开发中,重复使用同一个对象要比每次需要的时候就创建一个对象要好的多: 作为一个比较极端的反面例子,看下面这个语句: String s = new String("haha") ...

  6. 何谓IOC的核心思想

    IOC(Inversion of Control)即控制反转,是在面试或平常交流中经常遇到了词汇:我也曾经仿照Spring,利用JDK的反射和动态代理实现了一个简单的IOC框架,感觉算是知其然也知其所 ...

  7. javascript之数据推送

    我们使用ajax与后台服务进行交互,常常是通过触发事件来单次交互,但对于有些web应用来说,需要前台与后台保持长连接,前端不定时地接收后台推送的数据信息, 例如:股票行情分析.聊天室和网页在线游戏等. ...

  8. Spring多数据源的动态切换

    Spring多数据源的动态切换 目前很多项目中只能配置单个数据源,那么如果有多个数据源肿么办?Spring提供了一个抽象类AbstractRoutingDataSource,为我们很方便的解决了这个问 ...

  9. STM32F10XXX 启动设置

    在STMF103XXX 里,可以通过Boot[1:0]引脚选择3种不同的启动模式:       启动模式选择引脚      启动模式                 说明   BOOT1   BOOT ...

  10. angularJs--<ui-select>

    显示: ng-model里面的变量 如果为1,会去 ui-select-choices 里找这个idea数组,然后把数组对应name字段的值,交给 ui-select-match里面显示,$selec ...