AngularJS和ReactJS对比

Angular的特点:

优势:

AngularJS是一套完整的框架,angular有自带的数据绑定、渲染、angularUI库, $directive,$service, $q(defer),$route, $http,$cookie……,等等一系列工具,基本上只要你在做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的特点:

优势:

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是真正的大而全的Framework,它有一套生态体系和思路,基本你按照它的思路往里面填代码就OK。
React是一个简短有力的library,它只负责解决你某个单一的“痛点”。

开发大项目或者比较正规的项目,建议使用Angular,angular 是最适合CRUD的SPA 单页面的应用程序。 和 angularUI 一起使用就可以搭建还不错的web app.

yeoman+bower+gulp可以很快的把架子搭起来,终归比较简单实用。

对于移动端,React比Angular更有潜力, reactjs的模块化 + vdom + 搜索友好, 轻巧高效。

时间: 2024-10-29 19:07:46

AngularJS和ReactJS对比的相关文章

使用 AngularJS 和 ReactJS 的经验

1. React 福音 当我们的团队开始寻找一个合适的前端框架的时候,我们考虑了许多选择,最后留下两个选项 —— Angular 和 React. Angular 是目前为止最成熟的方案:它拥有一个庞大的社区,你可以为大部分应用场景找到合适的第三方模块. React 也很有竞争力,它以 JavaScript 为中心的设计看起来很有前途,而且它性能很好.虽然它还是 Beta 版本,但是 “由Facebook团队开发的” 这一点给它的竞争力加分. 我们决定给 React 一个机会,选择了使用它. 最

ReactJS 与 Domcom 比较 -- domcom 好在哪里?

在John Resig设计的jQuery独霸前端javascript多年之后,Google推出的重量级AngularJS给前端开发带来巨大的观念变化,给人耳目一新之感,同时也推动前端的观念.技术和框架领域进入快速迭代,百花齐放的局面.长江后浪推前浪,AngularJS还在浪涛之巅,facebook推出的ReactJS又异军突起,再次给前端Web应用开发的思路带来巨大转变,颠覆了很多刚刚成为时尚的观念.然而ReactJS依然存在很大的问题,而Domcom做到了去繁就简,成为一个非常简洁优雅的框架,

Bootstrap + AngularJS+ Ashx + SQL Server/MySQL

去年年底12月,为适应移动端浏览需求,花了1个月时间学习Bootstrap,并将公司ASP网站重构成ASP.NET. 当时采取的网站架构: Bootstrap + jQuery + Ashx + SQL Server 时间紧,没人带,只能硬着头皮,最后如期完成,但是也遗留了几个问题. 问题: 1.页面查询条件太复杂,太多的checkbox,jQuery操作DOM虽然方便,但是组合成json提交给后端还是比较麻烦,有没有天然支持json的前端框架或者脚本语言? html控件做的任何修改,都自动保存

AngularJs学习笔记0——前言

距离上次写博客有很长时间了,这段时间中也一直想坚持写博客,但是迟迟未动,一方面是因为刚换工作并适应新的环境导致工作比较忙碌,一直没有抽出时间来,其实说白了就是给自己的懒惰找借口,但是本人在园子里也有一段时间了,也一直坚持关注园子里的大神们的文章,感触颇多.最近也一直计划坚持写博客,并把工作中遇到问题及学习到的技能给大家分享,对给大家有那么一些帮助.最近也计划写一些最近工作中用到的技术做一个专题分享给大家,也对自己的一个总结吧. 前端时间因为工作中项目需要学习了一下AngularJs,我也网上查询

分享一个前后端分离方案源码-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年angularjs和reactjs算是比较火的项目了,而我选择angularjs并不是因为它火,而是因它的模块化.双向数据绑定.注入.指令等都是非常适合架构较复杂的前端应用,而且文档是相当的全,碰到问题基本上可以在网上都找到答案.所以前端基本思路就以angularjs为主.代码模块化,通过requir

[开源] angularjs + Asp.net 前后端分离解决方案

本文版权归 博客园 萧秦 所有,此处为技术收藏,如有再转,请于篇头明显位置标明原创作者及出处,以示尊重! 作者:萧秦 原文:http://www.cnblogs.com/xqin/p/4862849.html 一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年angularjs和reactjs算是比较火的项目了,而我选择angularjs并不是因为它

浅谈移动前端的最佳实践(转)

前言 这几天,第三轮全站优化结束,测试项目在2G首屏载入速度取得了一些优化成绩,对比下来有10s左右的差距: 这次优化工作结束后,已经是第三次大规模折腾公司框架了,这里将一些自己知道的移动端的建议提出来分享下,希望对各位有用 文中有误请您提出,以免误人自误 技术选型 单页or多页 spa(single page application)也就是我们常常说的web应用程序webapp,被认为是业内的发展趋势,主要有两个优点: ① 用户体验好 ② 可以更好的降低服务器压力 但是单页有几个致命的缺点:

读“40 分,60 分,90 分”

原文链接: http://mp.weixin.qq.com/s?__biz=MzA5MjYyNzY1OQ==&mid=2650901947&idx=1&sn=89af64d3b0dec01587f14aab15e62b9a#rd   40 分,60 分,90 分 原创 2016-05-27 汪海 汪海的实验室 背景 最近在微博上看到有人说,找工作太难了,面试官要求还高,才大三就问会不会这个框架那个框架的,并且表示平时项目机会少, jQuery Bootstrap 这种基础框架基本够

Visual Studio Code 配置指南

Visual Studio Code (简称 VS Code)是由微软研发的一款免费.开源的跨平台文本(代码)编辑器.在我看来它是「一款完美的编辑器」. 本文是有关 VS Code 的特性介绍与配置指南,相关设置主要针对 Mac OS X 平台.在快捷键部分, ? 指 Command 键,? 指 Shift 键,? 指 Control 键,? 指 Option/Alt 键. 1. Visual Studio Code 特性简介 1.1 Git 集成 如上图所示,VS Code 默认集成了 Git