Angular - React之争
Angular和React无疑是目前最受追捧的两个前端框架，谷歌也发现Angular1.x不足的地方，开始开发2.0版本，脸书发现React的组件化和虚拟DOM非常好，也同时投资React Native。
00.先比较Angular1.x与React
这两个没什么可比性，Angular着重数据绑定和前端MVC，以及不同模块的依赖注入。React着重于组件化和性能。之前做项目用的Angular，数据绑定很爽，但是作为新手学习曲线确实很陡峭，写个指令不知道scope飞哪里去了，用Angular-UI又要去FQ查各种声明方式，总之踩了很多坑。某一天看到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');
AppRegistry,
StyleSheet,
React.createClass({
getInitialState: function() {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) =& row1 !== row2,
loaded: false,
render : function(){
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的模式更加靠谱，性能更好，可维护性更高。
组件化和声明式的开发一定会成为主流，ES6也会慢慢普及，React以及React Native已经获得了不错的声誉，Angular1.x已经功成名就，Angular2蓄势待发，如果Angular2能在短时间范围内实现IOS和安卓的渲染应该会与React Native、现存的很多hybrid app竞争并且得到一席之地的。
阅读(...) 评论()Angular 2对 React：究竟孰优孰劣？_Linux新闻_Linux公社-Linux系统门户网站
你好，游客
Angular 2对 React：究竟孰优孰劣？
来源：51CTO&
作者：核子可乐
Angular 2与React的选择其实只是一种风格偏好。React专注于渲染速度且能够在客户端或原生应用内处理复杂的UI设计，而Angular 2则更具开发普适性。它既能够引导我们逐步构建自己的应用，同时也提供一定的表现力及可复用UI设计机制。
ReactJS快速回顾
ReactJS是一套JavaScript Web库，由Facebook打造而成且主要用于构建高性能及响应式用户界面。React负责解决其它JavaScript框架所面对的一大常见难题，即对大规模数据集的处理。能够使用虚拟DOM并在发生变更时利用补丁安装机制只对DOM中的dirty部分进行重新渲染，React得以实现远超其它框架的速度表现。
Angular 2满载强化机制
Angular 2相较于Angular 1迎来一系列强化。首先，Angular 2高度关注创建可复用的前端组件。尽管Angular 1在一定程度上也能实现同样的效果，但该框架的新版本解决了大量影响利用性的难题，例如对$scope与控制器的依赖性。其指令亦得到显著简化，使得Angular 2代码较前代更易于输入及阅读。Angular 2还考虑到与TypeScript的协作需求，消除了大量用于保证类型安全的代码。再加上众多性能与框架改进，Angular 2确实给人焕然一新之感。
值得强调的是，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 2与React的选择其实只是一种风格偏好。React专注于渲染速度且能够在客户端或原生应用内处理复杂的UI设计，而Angular 2则更具开发普适性。它既能够引导我们逐步构建自己的应用，同时也提供一定的表现力及可复用UI设计机制。
最终决定取决于应用设计目标及开发团队的普遍意见。大型复杂用户界面外加出色性能是React的王牌，开发流程与代码架构则是Angular 2的主场。总之，只要能够充分考量实际需求与定位，大家一定能做出正确的选择。
一些AngularJS相关文章链接：
AngularJS权威教程 清晰PDF版&
希望你喜欢，并分享我的工作~带你走近AngularJS系列：
带你走近AngularJS - 基本功能介绍
带你走近AngularJS - 体验指令实例
带你走近AngularJS - 创建自定义指令
如何在 AngularJS 中对控制器进行单元测试
在 AngularJS 应用中通过 JSON 文件来设置状态
AngularJS 之 Factory vs Service vs Provider
AngularJS && 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据
AngularJS 的详细介绍：AngularJS 的下载地址：
本文永久更新链接地址：
相关资讯 & & &
& (04月26日)
& (02月24日)
& (05月26日)
& (04月18日)
& (01月16日)
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款
匿名 发表于 学了个基础的Angular教程，看了你的比较我感觉我是不是改换ReactJS了& &&&Angular 2 有什么特点：
Angular 2 有什么特点：
悬赏2青鸟豆&|&浏览172
才能回答问题
&好事多磨，Angular 2的正式版终于在今年下半年发布，相比于1.x，新的版本几乎是完全重新开发的框架，已经很难从设计中找到1.x的影子。陡峭的学习曲线也随之而来，npm、ES2015 Modules、Decorator、TypeScript、Zone.js、RxJS、JIT/AOT、E2E Test，几乎都是业界这两年中的最新概念，这着实给初学者带来了不小的困难。Angular 2也更面向于开发单页应用（SPA），这是对ES2015 Modules语法描述的模块进行打包（bundle）的必然结果，因此Angular 2也更依赖于Webpack等“bundler”工具。虽然Angular 声称支持TypeScript、ECMAScript和Dart三种语言，不过显然业界对Dart没什么太大兴趣，而对于ECMAScript和TypeScript，两种语言模式下Angular 2在API和构建流程上都有着隐式的（文档标注不明的）差异化，这必然会给开发者以困扰。加上业界第三方工具和组件的支持有限，TypeScript几乎是现在开发者唯一的选择。此外，Angular团队已声明并没有完全放弃对1.x组件的支持，通过特有的兼容API，你可以在2.x中使用针对1.x开发的组件。鉴于不明确的风险，相信很少有团队愿意这样折腾。现在在产品中使用Angular 2，在架构上，你需要考虑生产环境和开发环境下两种完全不同的构建模式，也就是JIT和AOT，这需要你有两套不一样的编译流程和配置文件。在不同环境下模块是否符合期望，可以用E2E、spec等方式来进行自动化测试，好的，那么Angular 2的测试API又可能成了技术壁垒，它的复杂度可能更甚Angular本身。可以确信，在业务压力的迫使下，绝大部分团队都会放弃编写测试。总之，Angular 2是一个非常具有竞争力的框架，其设计非常具有前瞻性，但也由于太过复杂，很多特性都会成为鸡肋，被开发者所无视。由于React和Vue.js的竞争，Angular 2对社区的影响肯定不如其前辈1.x版本，且其更高级的特性如Server Render还没有被工程化实践，因此相信业界还会持续观望，甚至要等到下一个4.x版本的发布。
本周答题榜
本周回答34题
本周回答16题
本周回答13题
本周回答5题
本周回答4题
本周回答4题
本周回答3题
本周回答3题
Beijing Aptech Beida Jade Bird Information Technology Co.,Ltd北大青鸟IT教育 北京阿博泰克北大青鸟信息技术有限公司 版权所有
京ICP备号-3React 和 Angular 相比，哪一个的学习曲线更陡峭？ - 知乎879被浏览122417分享邀请回答2添加评论分享收藏感谢收起