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

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

VB用API复制移动文件 VB用OleDragdrop事件接受拖放文件 用VB进行文本文件的再处理 用VB开发应用程序如何使用INI文件 用VB实现文件查找功能 VB用Winsock控件实现文件的下载 VB用两分法搜索列表框或组合框中的数据 在 ListBox 之中, 如何检测鼠标所在位置的选项? -VB资料 在 Textbox 中,录入 N 个字符后移到下栏-VB资料 在 VB 中控制 Word 在GotFocus时快速选择文本 -VB资料 在VB中使用文件对象 在VB中使用艺术字 在VB中引用.dbf及索引文件 在Windows操作系统中改变文件打开方式-VB资料 在程序运行时,怎样把多个文本框的内容保存起来-VB资料 在打印字符串时自动换行 -VB资料 在文本框中快速增加一串字符-VB资料 在文本框中实现由加减号输入数据-VB资料 在引用项目找不到Excel、Word等Office软体Lib的解决法-VB资料 VB怎样从文件列表框中取得文件的完整路径和名称 VB制作一个有参数的执行文件(方法之简单难以想像) 资源档(.RES)的应用-VB资料 自定义Text的pop-up菜单-VB资料 自动出现动画、进度和确认的文件操作 -VB资料 自动选择 Text 的内容-VB资料 VB 调用 IMAGE 控件实现图像缩放的一种方法 VB5 实 现 窗 口 图 像 缩 放、 滚 动 技 巧 VB编程之提速攻略(一) VB开发通讯软件 VB实现图形动画的三种方法 继承的问题 我的问题 C++ Primer和C++ Programming Language 哪本好一些呢? 哪位朋友可以给一个PHP4导航栏的代码(1 2 3 4 5 6 这样的) redhat9.0是否支持ich5 在VS2002中可以用的设置星期格式的代码,在VS2003下不能用,为什么? 请教一个关于时间的SQL语句! 关于多级菜单问题 我的电脑里的chm文档打不开了,求救~~~~~~~~~~~! 购买QQ,共1000分(1) 大家帮忙分析一下 请教,关于“name not Unique in this context”的错误。50分,急!!!! 请教一个小问题 显示属性打不开? 购买QQ,共1000分(2) 很简单的问题,最好详细写listput 这个组件怎么用? 80分够不?在线等待中。 改好了告訴我一下,等0點去機房,這邊的認證服務器不動了,VMS系統我不懂 MIDAS 高手请进,这个问题在大富翁上出了600分,也没人拿到,难道真的没人明白吗? 女儿三岁生日,酬宾 关于PHP GD库的问题. jsp主要做什么的?菜鸟问题 为什么会重复显示两次? 怎样恢复类! 有没有人可以帮我的,55 如何把DBF文件导入到SQL2000里? 我想将一个字符串(用户密码)加密,有没有好的算法,请大家指教 熟悉化境编程界HTTP上传程序的请进! 我想将一个字符串(用户密码)加密,有没有好的算法,请大家指教 局域网搜索时,怎样连上要搜索的机子 如何分辨用户是通过在URL栏输入地址,还是点击链接来到本站网页。 好了,我把数据库清理一下,你继续改那几个参数,LOG文件太大先不要管 问题! “多步 OLE DB 操作产生错误。。。”怎么解决?? 急!!! 哪里有内存泄漏检测工具? 请问如何将80*60象素的图片文件转换为120*90象素的图片文件 哪位兄弟试过把csdn的文档里面的文章全部下到本地看的? APL和DOL表的区别?在系统中怎样设置(运用)?最好有示例。多谢先! 如何在一个函数内部知道这个函数的名字? “多步 OLE DB 操作产生错误。。。”怎么解决?? 急!!! _RecordsetPtr对象的Find方法怎样用? 等會過來喝點咖啡吧,今天晚上一定要測完 一个简单的fork问题(那个高手来帮忙呀) 一个关于安装的问题 在VC中用什么函数运行一个程序?像vb中的shell.比如运行QQ.exe 继续散分 急招游戏软件合作伙伴(美国项目外包) 有关更新表中的记录,有没有简洁的办法? 散分的理由 那位大侠能告诉我这是什么原因。Error 404--Not Found 研究生题目,大家试试,帮帮忙 新手问题! click to make him fall on the models tailor–made models是不是泰勒模型呀?这是有关工业 管理 上的术语“度身定做的模型”和“订制的模型 ”都是字面意思吧?PS: Do you make(make) models?Does Susan sing(sing)Do you make(make) models?Does Susan sing(sing) at school?Do you feed(feed) the dog?Does Kate help(help) at home?请问括号前的单词都对吗? you get what you pay for啥意思? This is not what we asked you to do.You can not get more pay for the _______ work. Work shadowing (Signed off by a member)怎样翻?Work shadowing 在这里不是什么教学合一(如果在百度查的话),这句话是一家协会的一条会员入会要求.不太懂这是不是对日常工作的要求,有高人麻烦指点 zig zag的意思 zig and zag是什么意思 为自己来zig zag 服装店看看吧 ( The beach were beautiful making a models 是什么意思 美炸死塔利班领袖引不满 巴基斯坦检讨社评:印度探火星,大国谁能漠视战略竞美一女子以波士顿爆炸案受害人造型过节巴西被曝曾监视他国外交人士 巴当局已专家:从中央到地方反腐提速 不再只依孙杨无证驾驶被拘留 分析称管理机制欠美国称伊朗反美游行表明两国仍存深度“美国务卿称沙特系中东领导 两国关系须部分高校将学位证挂钩英语四级 教育部桐乡获批旅游综合改革试点 先行先试旅浙江桐乡获批中国首个旅游综合改革试点中欧人权研讨会在重庆召开责编:任 涛 卢泽华邮箱:diery五哥放羊(名家说民歌)出入有境 服务无涯万里关山曾飞渡(文学新观察·纪念红军俞正声会见全国少数民族参观团中央民族歌舞团奉献艺术精品王岐山出席中央单位巡视座谈会气蒸云梦泽,波撼岳阳城(诗词赏鉴·大实现更高程度便利化新民随笔 | 神器
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘