Angular的特点:

优势:

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采用的是MVVM模式,真正将页面和数据逻辑分离,只要在模版中声明视图组件是和什么状态进行绑定的,双向绑定引擎就会在状态更新的时候自动更新视图。

MVVM和MVC唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。

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的特点:

优势:

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

2.ReactJS更关注UI的组件化,和数据的单向更新,2014提出了FLUX架构的新概念,2015年Redux出现,将 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是真正的大而全的Framework,它有一套生态体系和思路,基本你按照它的思路往里面填代码就OK。
React是一个简短有力的library,它只负责解决你某个单一的“痛点”。

开发大项目或者比较正规的项目,建议使用Angular,angular 是最适合CRUD的SPA 单页面的应用程序。 和 angularUI 一起使用就可以搭建还不错的web app.
yeoman+bower+gulp可以很快的把架子搭起来,终归比较简单实用。
对于移动端,React比Angular更有潜力, reactjs的模块化 + vdom + 搜索友好, 轻巧高效。
 


ReactJS和AngularJS对比的更多相关文章

  1. 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs

    [前端神秘的面纱] 对后端开发来说,前端是神秘的, 眼花缭乱的技术,繁多的框架, 如果你还停留在前端等于只用jquery做开发,那么你out了, 本文从Java的角度简述下目前前端流行的一些框架. 水 ...

  2. 为什么 ReactJS 不适合复杂的前端项目?

    问题一:ReactJS组件难以在复杂交互页面中复用 ReactJS中的最小复用单位是组件.ReactJS的组件比AngularJS的Controller和View 要轻量些. 每个组件只需要前端开发者 ...

  3. Vue从零开始(一)

    一.什么是Vue? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层 ...

  4. Javascript开发之工具归纳

    写在前面 由于JS开发对我来说是全新的技术栈,开发过程中遇到了各种各样的框架.工具,同时也感叹一下相对于.Net的框架(工具框架以及测试框架等)JS框架真的是太丰富了.社区的力量果然强大---也是由此 ...

  5. 以太坊开发DApp入门教程——区块链投票系统(一)

    概述 对初学者,首先要了解以太坊开发相关的基本概念.   学习以太坊开发的一般前序知识要求,最好对以下技术已经有一些基本了解: 一种面向对象的开发语言,例如:Python,Ruby,Java... 前 ...

  6. [转] Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  7. Regularjs是什么

    本文由作者郑海波授权网易云社区发布. 此文摘自regularjs的指南, 目前指南正在全面更新, 把老文档的[接口/语法部分]统一放到了独立的 Reference页面. Regularjs是基于动态模 ...

  8. Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  9. 从Java的角度看前端JS各种框架

    今天看到一篇不错的文章: 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs http://blog.csdn.net/uikoo9/art ...

随机推荐

  1. python日志实时分析

    python随着人工智能的发展,越来越火热.但其实python在运维测试方面,也是一把利器. 最近就碰到了个需求,就顺手写了个python程序.用惯了go,不过发现python好像更简单点 :-) 涉 ...

  2. RAII Theory && auto_ptr

    RAII(Resource Acquisition is Initialization),也称为"资源获取即初始化",是C++语言的一种管理资源,避免泄露的惯用法. C++标准保证 ...

  3. 理解JVM之垃圾回收

    1.垃圾收集算法 1) 标记-清楚算法:该算法是最基础的收集算法,其分为标记与清除两个阶段.首先标记出所有需要回收的对象,在标记完成后统一回收所有被标记的对象,该算法主要有两个不足:一个是效率问题,标 ...

  4. 阿里P7浅谈SpringMVC

    一.前言 既然是浅谈 SpringMVC,那么我们就先从基础说起,本章节主要讲解以下内容: 1.三层结构介绍 2.MVC 设计模式介绍 3.SpringMVC 介绍 4.入门程序的实现 注:介绍方面的 ...

  5. 【leetcode】610. Triangle Judgement

    原题 A pupil Tim gets homework to identify whether three line segments could possibly form a triangle. ...

  6. linux三剑客grep,sed,awk

    grep 官方帮助文档 Usage: grep [OPTION]... PATTERN [FILE]... Search for PATTERN in each FILE or standard in ...

  7. Spring Boot笔记

    @SpringBootApplication中有以下注解:@Target({ElementType.TYPE})@Retention(RetentionPolicy.RUNTIME)@Document ...

  8. less嵌套规则

    嵌套,是less里面最有意思的小东西,比如说我们经常性的去写一些列表性的东西 html <ul class="list"> <li><a href=& ...

  9. Ubuntu系统---配置OpenCV

    Ubuntu系统---配置OpenCV 目录 一.Ubuntu下配OpenCV 二.Ubuntu下配python-opencv   说明 上述一.二两种方式,配置OpenCV还是有区别的.按个人已有知 ...

  10. 《流畅的Python》Data Structures--第3章 dict 和 set

    dict and set 字典数据活跃在所有的python程序背后,即使你的源码里并没有直接使用它. 和dict有关的内置函数在模块builtins的__dict__内. >>> _ ...