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

我由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

面向对象编程从骨子里就有问题——看看名人大家是如何诋毁面向对象的 开发者及团队能从LibreOffice那里学到什么? 8000美元存储135TB数据:打造开源的存储硬件 Bing,每月27亿的有效搜索不及僵尸网络的一半 为什么说Amazon的James Hamilton是“可遇不可求”的? Facebook背后的数据团队 红帽将产品转移到Apache社区 Impala是如何提升3~90倍查询效率的? 云中保障数据安全及完整性必须防范的遗留问题 VMware推出移动性平台:VMware Horizon Suite 移动周报:全球最大校园Hackathon的参赛宝典 Unity3D首届游戏创意设计大赛开始报名 中国日报:向移动新媒体蜕变 C#五子棋程序设计 Mozilla宣布推出Firefox OS 面临四大问题 Ruby 2系列首个稳定版 Ruby 2.0.0-P0发布 微软改进Windows Blue搜索 系统或今夏推出 移动新趋势:扁平化设计 vs. 拟物化设计(下篇) 传奇程序员:Minecraft开发者Notch大神 让沟通更便捷 ConnectYard宣布推出全新的Web API 在Hadoop上运行SQL:程序员需知晓的13种数据工具 怎样用好Eucalyptus? AWS攻势变猛,Rackspace主动降价CDN与云存储 惠普将于下季度推出低功耗的Moonshot服务器 webOS复活!LG收购webOS用于智能电视 那些因为HTML5而将消亡的产品 初窥iWatch用户界面:开创基于时间的全新体验 如何编写出拥抱变化的代码? 20个优秀的前端框架 以AWS和vCloud为标杆看四大开源平台的定位 桌面集成开发环境五年内必将“死亡”? 数据库连接问请各位指点(300分) 圖像控件和報表製作 创天中文版是怎么汉化的?我想把它改回英文的要怎么改? 请问有没有Linux版本的QQ? 找DriverStudio2.5正式版 VB6中不能使用ACCESS2000数据库??? vb中怎么调用dos命令 请问海星... 哪有visual age3.0下载? 有关FTP 我双击注册表编辑器出现"注册表编辑器被管理员禁用"是怎么回事?怎么解决? 如何更改Oracle显示日期的默认方式? *****高手请进****** ======================各位高手,看一下!UP也有分! 请问安徽的高程成绩什么时候可以查? 请问谁知道vb里面如何调用notes对象,怎么调用? 急急急,我好急,有没有办法先把记录集处理一下在绑顶到datagrid 请问为什么这一段XML代码运行不了???为什么???帮帮忙??多谢!! 请教有关手机方面的问题 连编好的可执行文件不能用 帮帮忙啊 哪儿有免费的jsp空间并且有数据库支持的?谢谢 客户机的WinSock控件采用TCP协议,如何使用预设的固定的端口? sos!Help me! 有谁知道怎样用Capwnd控件(用于捕获视频的控件)?? 请帮我看看,谢了 请问如何控制imagecombo控件的下拉高度呢? 能告诉我什么是回调函数吗?注册的系统回调函数中引入的参数能在别的地方得到吗? 在RicheEdit里的字体颜色都是黑色,能变成其他颜色吗? 请问在视中如何使主框架的某个菜单项变为不可用(代码如下,错在什么地方,如何改?)! 请教VFP中GRID的显示和取值问题 请教一些有关用ROSE进行UML设计的问题 高薪寻找合作者:医院信息管理系统 求救!!!!为什么必须多按reset键才可以启动?? 請教: WideString如何存入數據庫image字段? 如何判断一个字符串是数字串?要源码(无内容) 登陆某些网站后浏览器的默认主页不能更改,怎么办???谢谢 请教简单的API函数的问题 ! 简单问题,怎么样得到下拉列表的选项?????最好有简单的原码 主  题:高薪寻找合作者:医院信息管理系统 上海机械电脑有限公司??? 小弟刚刚开始自学pb有好多问题想请教各位老大 HW待遇到底咋样??? 谁在CB里面用过游标? 关于网络协议软件的开发问题,编译成什么形式? 我是个新手,请教Linux下面C编程,该怎么入手,该看些什么样的书?来则有分!!!! 高分求源代码!又谁做过票据打印的软件!帮忙给点源代码! 如何执行insert 语句效率最高 数据窗口相同记录的判断??? 关于网络协议问题 求救,怎么判断试用版的试用天数? 中国第三大能源是什么 石油几十年后就枯竭了,有什么替代能源吗?地热,风能,潮汐,太阳能,主要用于发电.那我们现有的飞机,汽车,轮船,坦克,军舰,不是全不能用了 地球上有些什么资源,这些资源对我们人类有什么作用 目前世界最重要的三大能源是什么? 石油枯竭后该用什么?·····用什么代替呀···· 地球为人类提供了哪些资源 2的0次方 加2的一次方 加2的2次方 ··· ··· 一直加到2的n-1次方 等于700问 n 是多少 请写出计算的公式 上大学以后把高中数学都忘干净了···最好把公式也写写·· 石油会枯竭吗? 聚醚型聚氨酯枕头为什么有味道在商场买了个赛诺的枕头,回家后睡了一晚上,早上起床发现有一股难闻的味道,看到填充物是聚醚型聚氨酯,问下各位聚醚型聚氨酯有毒吗?如何能清除这种味道? 等比数列的和怎么求?数列1,a,a^2,a^3,…,a^(n-1),…的前n项和为? 有那位能比较详细的说明一下聚苯板与聚氨酯发泡板有什么区别? 聚醚型聚氨酯有什么功效? 求高一数列错位相减的例题, 某公司原有10名职工,每名职工年薪5万元,由于业务不断扩大,计划从今年起,职工的年薪每年比上一年增加10%,同时每年新招收3名职工,每名新招收的职工第一年年薪为4万元,第二年的年薪开时与 地球上矿产资源枯竭的后果是什么 求数列和中的错位相减法怎么用,能举几个例子吗? 科普类说明文 要来做阅读积累啊!快 谢了 “如果不加节制地开采,必将加速地球上矿产资源的枯竭.”“节制”的意思是:这么说的理由是: 什么胶粘木头最好?我家的床侧面的床帮是木头做的,但是在搬家的时候不小心弄断了.我应该用什么胶可以粘牢呢?是2米的木头,中间段开的,关键是有一个弹簧的骨架,要木头的床帮左右受力,所 怎样写好科学说明文和科幻作文~ 关于所有矿产资源枯竭的,今天就要,急, 请问什么样的胶粘木头最好?我的吉他断了以前用的是499粘得但是后来还是不结实所以只能再粘一次了不然就糟蹋了1000多买的吉他不能就这样完蛋了所以请问谁知道最好的粘木头的胶是什么 世界著名说明文 有哪些 数列求和公式中的错位相减法有什么特点的方法或者口诀啊! 有没有金属用胶粘剂(室外用),能将两个铝合金的东西粘到一起我想找一种金属用胶粘剂(室外用),将两个铝合金的东西粘到一起,我的这个部件一直要放在室外用,希望能保持三年不脱胶. 我的小天地 说明文 数列求和错位相减法化简中间等比数列时怎么确定项数 用什么胶粘木头粘的最牢固?横截面椭圆型木棍斜着断开 用什么粘最好呢?再麻烦 请问我该到那些地方买树脂胶或者结构胶? 五年级续写想象的科幻说明文二十年后的母校开头:2030年7月15日,此时的我已成为一位举世闻名的发明家.今天早上,我的机器人助手珍珍为我送来了早餐——营养早餐压缩药丸.只要吃下一粒这 聚氨酯泡沫填缝剂主要成份是什么 什么胶粘木头的效果好?就是做模型的5mm木板 等比数列,如图! 人类是怎样破坏地球的? 目前世界上主要的三大能源是哪三大?同上 已知等比数列{An}中,A3=-12,S3=-9,求首项A1及公比Q 人类是怎么破坏地球的 世界上最重要的三大矿物能源是什么? 高中数学题关于等比数列的等比数列 :若a9+a10=a,a10+a20=b (a,b不等于零),求a99+a100的值要过程 二氯异氰脲酸钠如何使用二氯异氰脲酸钠粉在喷洒消毒时怎样使用?一公斤二氯异氰脲酸钠粉需要多少公斤水?配好的液剂是否就可以直接使用,还有配好的液剂能保存多长时间?我问的是二氯异 ABS和铝合金粘接,请问用什么胶粘?要求快干,无汽味,高强度我也是做胶的,我有一款结构胶就能达到这样的要求!主要用于塑料,金属,等材料的粘接!希望有需thansin要@163.com的朋友电邮 有没有关于超临界正己烷的物理化学性质的资料?必须要包含关于不同压强下介电常数 三氯异氰脲酸对鱼的影响? 高中数学 数列问题 我知道用错位相减 怎么列 方便的话发个图 因为我有点笨 谢谢大家 PS塑料的物理及化学特性如何与其他塑料进行区分无论怎样,还是非常感谢 回答 蛋糕的温度海绵 铝合金与玻璃用玻璃胶粘好后,时间长了会不会脱落? 全世界一共有多少个能源枯竭城市 高一数学,第十六题,过程详细点,(错位相减法) 高中数学数列等差等比数列题的问题,用错位相减的方法解.已知等差数列an=4n-3,等比数列bn=2^n.求{an/bn}的前n项和Sn 请以实例说明 等比数列求和题在等比数列An中,S3=3.5,S6=31.5,求An 目前我国使用的三大能源是什么它们所储存的能量都来源于 等比数列,前n项和,通向公式.设正项等比数列{an}的首项是a1=1/2,前n项和为Sn,且2^10·S30-(2^10+1)·S20+S10=0(1)求{an}通向公式(2)求{n·Sn}的前n项和Tn 我想知道人类在地球上生存了多久了? 胶粘剂剪切强度用45号钢作为粘接试片的强度为什么比铝合金的大 化学烃的衍生物官能团的性质?有什么官能团 可以发生什么反应? 怎样清除衣服上的泡沫填缝剂?郁闷啊! 弄了一身都是,还拿纸擦了, 怎么办啊!不懂,请详细说明一下,谢谢 用酸性玻璃胶粘铝合金接地板有什么坏处,我家防蚊纱窗铝合金很松垮,我想用玻璃胶粘紧,请问哪一种比较好,是中性玻璃胶好还是酸性玻璃胶? 高中化学烃和烃的衍生物物理性质 地球给人类的哪些资源
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn