说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

我由Angular转向React,为什么?

HTML文档下载 WORD文档下载 PDF文档下载
Angular在快速开发大型Web项目上很受推崇,但仍存诸多缺陷,React正为JavaScript应用开发者提供新的开发方式。本文将对Angular和React进行对比,评析各自优劣。

【编者按】Kumar Sanket为Toptal公司的全栈Web开发者/工程师,他在一篇文章《Why I Ditched Angular for React》中对Angular和React进行了对比,他表示Angular在快速开发大型Web项目上很受推崇,但其也存在的种种缺陷,如过于依赖DOM操作,双向数据绑定带来性能问题等。而React作为由Facebook和Instagramin领导的新开源项目,为JavaScript应用开发者提供了新的开发方式,同时具有速度快、跨浏览器兼容、模块化等优点,也是这些优点,让Kumar Sanket选择了React。下面为该文章的译文。


几年前,我的代码因充满了jQuery选择器和回调函数而十分凌乱,后来AngularJS的出现很好地解决了这个问题。

使用AngularJS开发的项目拥有极好的可维护性,AngularJS拥有一系列简单易用的功能,有利于快速开发大型的Web项目。

初识时,AngularJs的双向数据绑定和所有的数据源都放在Model中的设计理念让我惊叹,在实际的开发中,有效地减少了应用程序中的数据冗余。

随着应用频率越来越多, AngularJs的一些缺陷也渐渐体现,在使用过程中的不如意让我决定寻找一个它的替代品。

以下就是我对Angular的一些不满。

基于DOM的程序执行。在Angular的执行过程中过于依赖DOM操作。在Angular应用的执行时,会首先扫描所有的DOM,再通过指令进行编译,这让不利于开发者进行调试也很难判断程序执行顺序。

双向数据绑定是一把双刃剑。随着组件增加,项目越来越复杂,双向数据绑定带来性能问题。

双向数据绑定是如何影响性能的?在JavaScript(ES5)中,并没有实现当变量或对象改变时发出通知的功能,Angular的实现方法被叫做“Dirty-checking(脏检查机制)”,通过跟踪数据的改变再动态更新用户界面(UI)。

在Angular的作用域中任何操作的执行都会引发Dirty-checking,随着绑定数量的增加性能就会越低。

双向数据绑定的另一个问题是,如果页面上有许多拥有动态数据的组件,这意味着也会有很多的数据来源,如果管理不好会让人感觉混乱不堪。但公平地说,这是开发人员的方式方法问题而不是Angular本身的缺陷。

Angular自成一体。Angular的任何操作会引起digest cycle对注册过的监听器的遍历,以实现组件动态地同步数据。这会和其它的依赖产生兼容性问题。

如果你使用的其它JavaScript库也需要改变数据就必须用Angular的$apply函数去封装。

或者如果它是一个工具库,你就需要把它转换成一个服务。似乎其它JavaScript库都必须经过改动才能和Angular进行交互操作。

依赖注入。JavaScript目前没有自己的包管理器和依赖解析器,AMD、UMD和CommonJs很好的解决了这个问题。不幸的是Angular并没有很好地利用这些规范,Angular甚至实现了一个自己的依赖注入(DI)。但是公平地说Angular使用RequireJS依赖项注入的非官方实现已经有了。

学习进阶难。使用Angular需要学习大量的概念,包括但不限于:

  • 模块
  • 控制器
  • 指令
  • 作用域
  • 模板
  • 链式函数
  • 过滤器
  • 依赖注入

用好Angular是非常难的,不是一朝一夕的事情。

以上的原因导致我改用React。

React又哪里牛了?

React是一个由Facebook和Instagramin领导的新开源项目,用于构建用户界面,为JavaScript应用开发者提供了新的开发方式。 

事先声明:React并不是AngularJs那样的一个应用程序开发框架。把他们作为同一个类型来比较是不公平的。

2013年五月,当JSConf EU大会上被推出时,它“单向数据流”和“虚拟DOM”等概念把观众震撼了。

React是用于构建用户界面的。引用官方主页上的说法:“对开发者来说,React就是MVC中的V”。你可以自由地写独立的组件,在这一点上或多或少优于Angular的指令集。

React省思了目前Web开发中遇到的一些问题并作出了最佳的实践。

比如,它鼓励的单向数据流,并坚信组件是被数据驱动的状态机。

然而大部分其它类似的框架都是直接操作DOM,React并不喜欢这种方式且尽量避免这种方式。

React恰如其分地提供了定义一个UI组件所需的最基本的API。它遵循UNIX的信条:做一件事,做到极致。

想知道更详细的关于Angular和React的比较,可以阅读Pete Hunt(Facebook/Instagram职员)写的Angular和React的比较来获取更多细节。

为什么我开始使用React?

以下是我喜欢React的一些地方。

React速度很快

与其它框架相比,React采取了一种特立独行的操作DOM的方式。

它并不直接对DOM进行操作。

它引入了一个叫做虚拟DOM的概念,安插在JavaScript逻辑和实际的DOM之间。

这一概念提高了Web性能。在UI渲染过程中,React通过在虚拟DOM中的微操作来实对现实际DOM的局部更新。

跨浏览器兼容

虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。

模块化

为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。

每个组件都可以进行独立的开发和测试,并且它们可以引入其它组件。这等同于提高了代码的可维护性。

单向数据流让事情一目了然

Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。它只是一个概念,而非特定工具的实现。它可以被其它框架吸纳。例如,Alex Rattray有一个很好的Flux实例,在React中使用了Backbone的集合和模型。

纯粹的JavaScript

现代Web应用程序与传统的Web应用有着不同的工作方式。

例如,视图层的更新需要通过用户交互而不需要请求服务器。因此视图和控制器非常依赖彼此。

许多框架使用Handlebars或Mustache等模板引擎来处理视图层。但React相信视图和控制器应该相互依存在一起而不是使用第三方模板引擎,而且,最重要的是,它是纯粹的JavaScript程序。

同构的JavaScript

单页面JS应用程序的最大缺陷在于对搜索引擎的索引有很大限制。React对此有了解决方案。

React可以在服务器上预渲染应用再发送到客户端。它可以从预渲染的静态内容中恢复一样的记录到动态应用程序中。

因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。

React与其它框架/库兼容性好

比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

不幸的是,目前的JavaScript版本并没有提供一个打包和加载的模块。(在未来的ES6版本上将使用System.import来解决这个问题)。

幸运的是,我们有RequireJS和Webpack这些漂亮整洁的替代品。React是由Browserify构建的,如果你想操作图像资源或者编译Less和CoffeeScript,Webpack或许是一个更好的选择。

我需要另一个开发框架来配合React吗?

你可以使用React来构建用户界面,但是你仍然需要进行AJAX调用,应用数据过滤以及其它Angular已经实现的功能。

如果我们还需要另一个额外的JavaScript开发框架,为什么不使用Angular?

框架由一系列模块和规则组成。如果我们不需要它的一些模块,甚至想将某些模块替换,我该怎么做?

其中一种实现模块化且能更好地进行依赖管理的方法是通过包管理器。

但是,在Angular中怎么进行包管理呢?这还得取决于你,但是得记住,Angular是自成一体的。你很可能需要让第三方包去适配Angular。

另一方面,React仅仅只是JavaScript而已。任何用JavaScript写的的包都不需要用React去封装。

对我而言,使用npm和Bower这样的包管理器更好。我们可以选择自己的组件和工具集。需要明确的是:这比使用像Angular这样的综合性开发框架更复杂。

就这方面而言,React的好处是鼓励使用npm,npm已经拥有了很多现成的包。你可以从完整的初学者工具包中选择一个开始构建React应用的包。

转向使用React也不是一帆风顺的!

由于Angular是一个应用开发框架,它带来了很多便利。我放弃了一些好的功能比如:封装好的AJAX用于$http服务,$q用于应答服务,ng-show,ng-hide,ng-class和ng-if作为模板的控制语句——所有这一切都让人惊奇。

React不是一个应用开发框架,所以你需要考虑如何处理构建一个应用程序的其它方面。例如,我正在参与一个叫做react-utils的开源项目,它可以帮助React进行更简单便捷的开发。

就目前而言,社区也在积极的贡献一些类似的组件来填补这一方面的空白。React Components就是这样一个非官方的网站,你可以在这儿找到类似的开源组件。

React的信条不鼓励使用双向绑定,这也给处理表单数据和编辑表格数据带来了很多痛苦。

无论如何,当你开始理解Flux数据流和存储,事情就变得简单、清晰和简单。

React是新生的。这需要一些时间让它周边社区发展。在另一方面,Angular已经非常流行了,且有大量的可用扩展(例如 AngularUI和Restangular)。

虽然React的社区刚起步,但是发展得非常迅速。像React Bootstrap这样的扩展就是一个很好的证明。我们早晚会拥有更多更丰富的组件,这只是一个时间问题。

总结

如果你喜欢Angular的方式,在一开始你可能会不喜欢React。主要是因为它是单向数据流且缺乏开发应用程序的一些功能。最终很多事情还是需要自己来考虑。

然而当你开始习惯了Flux的开发模式和React的设计理念,我相信你会看到它的美。

Facebook和Instagram都在使用React(因为他们在领导这个项目)。

GitHub最新的源码编辑器Atom就是用React构建的。

雅虎邮箱也正在使用React重构。

React已经被大量的应用程序和科技公司所关注。(责编:陈秋歌)

原文来自:Six Revisions

收藏!斯坦福Andrew Ng教授“机器学习”26篇教程全译 美国云计算价格战爆发 王寒:12岁儿童,该怎样开始iOS开发? 陈昊芝:腾讯!让我说你什么好? Top Paid与Top Grossing定价策略的差异 Android版百度云推送正式发布 为何开发者应推动公司开源? 从AppGratis被下架说起,苹果或将再次付出代价 58同城的“烦恼”——8K月薪安全工程师引发的入侵 软件开发实践的24条军规 思科 IBM 微软等巨头联合开发开源SDN项目OpenDaylight 巾帼不让须眉:2012年度云计算领域Top 10女性 中移动全力推进NFC 5月起乘公交可刷手机 支持Android与iOS,Qt 5.1 Alpha全新亮相 Google Play:劣质Android应用已无藏身之地! 360推出信用网站认证开放平台 联合百家协会围剿钓鱼网站 经验分享:百度测试架构师眼中的百度QA(一) 在线旅行服务行业开放API带来的新机遇 专访:悬疑恐怖游戏Year Walk美术及音效设计师 解密:微软都柏林数据中心的神秘“免费冷却”装置 云计算如何影响数字化营销? 榜单:十位帮我们打理数据的存储大佬 OpenStack Grizzly版发布 Comcast、CERN成为新会员 谷歌携Blink来势汹汹 WebKit将成明日黄花? 星巴克与苹果合作 顾客可免费下载付费App 微信回应信令争议 将启动2.5G网络优化计划 凤凰网CTO吴华鹏离职 先后供职长达10年 外媒:开发者每周编码时间仅19.1小时 AppGratis CEO现身说法:应用被苹果儆杀始末 一个Web设计师眼里的云计算 戴尔高管:服务器业务领先惠普五年时间 cout的问题(20分). 关于vector<string>的问题(40分). 有没有上海双杨的PB高手? 在pb中怎样写自动递加的序列号?? 我的visio 2000一旦启动以后,就会说遇到问题需要关闭 请问一个关于连接SQL SERVER2000的问题 两行数据重名,查询的时候只能显示其中一个,怎么处理? 在vbscript中的"%TEMPLATEDIR%\wvline.gif"的"%..%"是什么意思? 一个非常棘手的问题,求求各位了!是关于字符转换的!求求各位大侠! 找人 寻C语言编程高手!现有一IP地址和网页、搜索栏关键词拦截程序需要编写,付酬!!! 关于Dll里导出VCL控件的问题。。。高手请进。。。。。。 紧急求救!!! 如何制作浮动面板? 给分的问题! 如何获得 mod_webapp.so 紧急求救 想知道各位WINDOWS下用什么SNIFFER? 对于网络上的第三方控件的看法 简单问题?JTable中的数据如何居中对齐,有没有直接的函数(不用自定义CellRenderer) 有关析构函数 请问一个小问题 关于ADO中ltBatchOptimisticr的FilterGroup的问题 两个星要到多少分才能升到三个星呀 请问有谁知道北京的成人教育大致的情况如何? 是VC编译器不符合ANSI C++,还是?? 我现在在写个程序!是关于证券方面的!可是如下的一个小问题如何解决?? ★★如何让excel的某行的值等于另一行的值乘以一个固定值(急问,在线等待)★★ @@@开学了,散分! 怎样构建一个LDAP服务器和怎样使用 用VFW采集时进行压缩的问题。求解 C# 在DW MX中如何进行层定位? 回复:機會不要錯過! 華強科技有限公司幫你成就軟件工程師的夢想! How to access SMB/CIFS from Sun workstation? 谁来拿分啊。我有一个问题自己解决了,但没有给分的对象。 问一个message Bean的问题,up有分 [EJB]HelloWorldBean正确编译配置和执行,但"HelloWorld"却不见了 寻C语言编程高手!现有一IP地址和网页、搜索栏关键词拦截程序需要编写,付酬!!! 如何让主界面变成三维的那种 寻C语言编程高手!现有一IP地址和网页、搜索栏关键词拦截程序需要编写,付酬!!! 用什么组件能得到网站上的末知大小的文件? 问一个简单的问题 还是有问题关于获得选中安钮的当前行,请进>> 请教简单问题,如何将菜单的一个选项隐藏。就是类似cb的将Visible=false的做法!! 连接ACCESS数据库的问题? 寻C语言编程高手!现有一IP地址和网页、搜索栏关键词拦截程序需要编写,付酬!!! 如何提取一个EXE文件的特征码??要高分者和高手进!!!!来者有分! j2ee配置问题,大家帮我看看,错误出在哪里?谢了! 如何在注册表中修改使得浏览的网页可以即时通过工具栏的“编辑”调用DW修改? "聊聊"网站是怎样建的?用拉什么技术,可以即使聊天? 一个圆锥体积是12.56cm立方,比等底等高的圆柱体积少()立方cm 人生寓言白兔和月亮第四段的仍然好在什么地方 在一个圆柱形水桶里,把一段半径是3cm的圆柱形钢材全部垂直放入水中,水面上升10cm,把它竖直拉出来6cm,水面又下降了7cm,求这段钢材的体积? 甲乙两人在一条东西方向的公路方向的公路上行走,甲,在乙西300米甲向东走,乙向西走,2分钟后相遇.两人都向东走,半个小时甲追上乙,求两人的速度 一个圆柱体积18立方cm,高是10cm,把这个圆柱削成一个最大的圆锥体,削去部分体积是()写算式,写清楚,要写得数. 北方和南方农耕文化的相同点和不同点? 动物都要经历哪四个阶段 小轿车上五人.大客车上的人数比小轿车多26人.问两辆汽车上一共有多少人? 电源电压为10V,电压表示数为4V,则灯L1.L2两端的电压各为多少? AB两点,甲乙两人相向而行.甲比乙的速度快.甲距离B点240米时与乙相遇.甲乙继续行走到达终点时原路返回.甲距离A点120米时再次与乙相遇.AB两点距离是多少? 去年小麦种植面积为"1",今年种植面积比去年增加20%.今年种植面积是去年的?% 英语翻译“一个人的生活,过一个人的生日.”翻译成英文怎么说? 甲乙两人步行的速度比是9:7,若甲乙分别由AB两地沿同一公路同向而行,则甲追上乙需4时,若相向而行,则多少时间相遇? 小汽车每辆能坐4人,大客车能坐25人,有3辆小汽车和1辆大客车,问一共能坐多少人?求这道题的答案 围绕克隆技术真神奇来写一段话 ___mol的CO2中含有3g碳 刘庄村今年小麦播种面积比去年增加了10%.今年播种小麦39.6公顷,去年播种多少公顷? 克隆技术奇妙在:第一第二第三要短 如图,已知等腰三角形ABC的底边BC=10cm,顶角为120°,求它的外接圆的直径 一辆轿车可坐4人,一辆客车再多坐2人就是小轿车的10倍.一辆大客车可乘坐多少人 克隆技术神奇在哪 几摩尔的二氧化碳中含有三克碳 今年小麦播种面积比去年增加了5/12,是把【】看作单位1,关系式为【】 克隆技术多么奇妙啊!假如我会克隆,我会怎样? 等腰△ABC的底边BC的长为a,顶角为120°,求它的外接圆的直径 今年小麦的播种面积是去年播种面积的13/12,这里是把谁看作单位1? 某工程基础平面图和剖面示意图如下,计算人工挖地槽长度及土方工程量.(工作面c=300mm;放坡系数K=0.3;1 已知等腰三角形ABC的底边BC=10cm,顶角为120°,求它的外接圆的直径 爱在细微处作文【600】字 我是新手,没多少积分, 如何提高英语学科教学成绩 等腰三角形ABC的顶角∠A=120° BC=12 求它的外接圆的直径w 东北平原比南方种植水稻有利的气候条件 50亿0402万约等于几万? 在等腰三角形ABC中,∠BC=120度,点P是底边AC上一个动点,M,N分别是AB,AC上上的中点,若PM+PN的最小值为2,则三角形ABC的周长是多少? 中南半岛种植水稻的有利条件(地形气候方面) 50亿年等于多少秒 排水管道,检查井有支管接入,上下游管道有跌水,支管该怎么接?支管与上下游管道的管底标高差有什么要求支管的埋深是不是不能低于与下游管道采取管顶平接时的埋深?如果这样,跌水水头大 白兔和月亮 读后感 600字今天就要 已知等腰三角形ABC内接于半径为5的圆O,如果底边BC长为6,则底角的正切值为 检查井管内底标高为什么标在圆圈中间?每个检查井都会画一个十字,然后标高就从十字的中心指出,就算没有画十字的检查井标高也都标在圆圈的最中心位置,这是为什么呢?为什么一定要标在 抄一份材料,每分钟抄30字,若干分钟抄完,当抄写2/5时,决定提高效率50%,结果提前20分钟抄完,这有多少抄一份材料,每分钟抄30字,若干分钟抄完,当抄写2/5时,决定提高效率50%,结果提前20分钟抄完, 小学第一节体育课怎么上? 为什么1+3会等于4 抄写一篇文章,每分钟可抄30个字,当抄了2/5的时候,抄写速度提高到每分钟45个字,结果提前20分钟抄完,求这篇文章的字数.(要用一元一次方程解)! 如何上好小学体育课 有一个高24厘米,底面半径为10厘米的圆柱形容器,里面装了一半水,先有一根长30厘米,底面半径为2厘米的圆柱体木棒,将木棒竖直放入容器中,使木棒底面与容器底面接触,这时水面升高(D)厘米. 抄写一份材料,如每分抄30个字,则若干小时可抄完,当抄完2/5的时候,决定将效率提高40%,结果提前半%抄写一份材料,如每分抄30个字,则若干小时可抄完,当抄完2/5的时候,决定将效率提高40%,结果提 请问谁知道小学体育课教学计划哪儿有 北方是___农业~南方是___农业 抄写一份材料,如每分抄30个字,则若干小时可抄我那,当抄完2/5的时候,决定将效率提高40%,结果提前半小时抄完,问这份材料共有多少字?请用一元一次方程解 RNA是否只分为tRNA,mRNA,rRNA?那么作为RNA病毒的遗传物质RNA有属于哪类呢? 南方以水田农业为主,北方以旱地农业为主,西北发展畜牧业,形成这种生产活动地域差异的主要因素是降水为什么是降水,而不是热量 或者是土壤呢? 抄写一份材料,若每分钟抄写30个字,则用若干小时可抄完.当抄完2/5时,决定将效抄写一份材料,若每分钟抄写30个字,则正好在计划时间内抄完。当抄完2/5时,决定将效率提高40%,结果比原计 1.2亿等于几万 有甲 乙两个大小不同的圆柱形容器 甲容器的底面半径的24厘米 乙容器的底面半径是12CM 已知30厘米深的水乙容器无水 现将甲容器的一部分谁倒入乙容器 使两个容器中的水面高度相等,此时水 灯泡L1和L2串联在电路中,加在它们两端的总电压为12V,L1的电阻是8Ω,L1两端的电压是4V,求L1中的电流.【图】(自己画)已知:求: 月球车玉兔是什么 有一个高为24厘米,内底面半径为4厘米的圆柱形容器,里面装了一半的水,把一跟长L厘米,底面半径为2厘米的圆柱玻璃b棒,竖直放入容器中,使棒的地面与容积底面接触,根据L分别求出水面升高了 甲和乙分别从a b同时相向而行,甲每分走100米,乙每分120米,甲与乙相遇后又走了9分钟才到b地.求a到b的距离 11亿日元相当于多少人民币?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘