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

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

使用Twitter Bootstrap的五大理由 Twitter重塑API战略 开启V1.1时代 Sony开放SmartWatch 支持第三方定制固件 甩啦甩啦!Apptopia帮开发者在线买卖App所有权 聚焦全球移动市场:印度,这块肥肉不太肥 Google决定明年一月份停止对Chrome Frame支持与更新 你应该关注的几个Eclipse超酷插件 华为王丰:FusionCube打造下一代融合一体机 上海云人联合创始人吴朱华:中国人也能做出最好的实时数据库产品 Facebook RSS替代Google Reader?或因其社交属性失败 让这么多国外开发者如此兴奋,iOS 7到底好在哪里? Web开发中那些不招人“待见”的功能 最好的超级计算机在中国 为开发者提供的10款Web应用程序 5000万次下载:HandyGames如何征服Google Play? 红帽大战Ubuntu:750小时免费企业版红帽套餐即将登陆AWS EMC Sanjay Mirchandani:92%虚拟化,使更少IT人拥有更大交付能力 从NSA携谷歌、微软等9家名企监控用户行为看数据安全 【专访间】新科兰德创始人左磊:我们的“卖点”是“数据弹药” 甲骨文公司宣布推出最新Java EE 7 10款最佳CSS/jQuery开源图片说明 创业者应避免对投资者说的五句话 直接拿来用!最火的iOS开源项目(二) 西部数据Pat Wilkison:云计算市场是创新热点 猎豹浏览器发布手机版:PM谈开发理念 成为伟大开发者的“九步曲” 使用GPU构建更便宜的Google神经网络 Facebook与Yahoo!的“火花”:系统间实时数据流管理工具 视金钱如粪土?Yahoo!又要买了,梅姐的算盘是这样打的 MySQL手册不再遵循GPL协议:MySQL走向闭源前兆? 扁平化设计会扼杀人们的创造力吗? 当二个进程运行时,几就是两次运行FTP 动画关闭窗体API的问题 什么叫串行端口,什么叫并行端口? 程序员级考试就是中级考试吧 各位高手:请问*.html和*.htm文件有何区别? 在活动目录中如何实现组的嵌套? swing窗口布局的问题 毕设还要翻译6000子科技文献,谁介绍一篇呀! 介绍几个考中级的网址来噶 CNET网站重新架构,我们的链接也要改了~~ 急,真的急 各位,有谁能告诉我怎样使得程序中每个Show的窗体都以新窗体出现在任务栏。(答对了一定加分!!!!) 能不能获得来访者的计算机名 help me!高手请看! 11号帖子,救命呀,很急,很重要! 怎样在恢复一个被删除的文件时恢复文件全名? 我急!深夜提问!大家看一看 有谁告诉我Microsoft Visual InterDev 6.0如何使用其中的站点管理 如何在Word工具条上加一个按钮 请问系统和上网的速度有关系吗 急需foxpro for win版,哪有??? 请教一下,ado.net里如何返回表里的行数? 如何在HTML页面中使用 Acrobat 的 PDF 阅读器控件 关于一个遗传算法得问题!! 请问一个TSR问题! 关于跨数据库查询的问题 请问在ListBox中可不可以将每一行字符串设置成不同的颜色? vb6.0中如何将dbgrid里的内容添加到数据库里? 请问怎样才能将窗体上的最大化按钮设置成无用,而保留最小化按钮? 各位专家:请问win2000 PRO 下的config.msi目录中的好多以rbf为扩展名的文件是什么文件?有什么用?可以删除吗? ASP.NET中DATAGRILD的烦人处 新手问两个简单的问题??? 想知道如何才能看见前页纸油笔写过后留下的字迹?(散分) 为什么用odbc连接的paradox表不能编辑? 哪位大侠帮看一下代码(关于链表),为何出"invalid type argument of `->'"的错 一个非常非常想从事计算机软件开发的愿望 关于Hook的一个小问题 文档视图结构中无法显示编辑框,怎么办啊??用什么代替啊 十万火急! 通过网络,进行语音聊天的程序。 你了解人工受精吗? 有关“无纸化考试系统”bow api中的常量 关于addslashes的问题 有关“无纸化考试系统”的问题??thanks all,bow 如何删除windowsXP?紧急!!! 【数据结构】考试用的是类pascal还是c语言 我想往服务器中传文件。请问,需要组件吗? 如何写naked function的prolog 和 epilog? LoadIcon(NULL,IDR_QQ) 关于用c写聊天室 帮忙看看是不是session_start()惹的祸 D,E在B,C上,F,G分别在AC,AB上,且四边形DEFG为正方形.如果S△CFE=S△AGF=1,S△BDG=3,那么S△ABC等于多 直角三角形的性质 对于一元二次方程两根符号的异同,有何要求两根同号,两根异号时,系数应该分别满足怎样的条件? 二次函数交X轴两点之间的距离公式 我们发现三角形的一条中线将三角形分成面积相等的两个三角形,你能说明理由吗? 请用篮球、木板、铅笔设计实验来说明地球是个球体.(1)实验方案:_______________________________________________________________________________________________________________________(2)实验现象:_________________ 在三角形ABC中,角A,B,C的对边长分别为a,b,c,若A-C=π/3,且a,b,c成等差数列,求sinB值等于 证明:三角形的一条中线把三角形分成两个面积相等的三角形. 在三角形ABC中,A,B,C成等差数列,且sinC=5/13,求cosA如题. 三角形ABC中A.B.C.成等差数列,则sinB等于 为什么三角形的一条中线能将这个三角形分成面积,相等的两个三角形?要有因为,所以! 二次函数图像的最大值和最小值是什么·意思 在三角形ABC中,a,b,c成等差数列,则sinA乘以sinB等于多少? 三角形的一条中线能否将这个三角形分成面积相等的两个三角形?为什么?一条角平分线呢? 在三角形ABC中.三内角A,B,C,所对的边分别为a,b,c,若满足a=(√3-1)才,tanB/tanc=2a-c/c,求A,B,C的值 已知两根,如何求一元二次方程? 将两手的食指放在铅笔的下端,尽量使铅笔保持水平,向铅笔中部移动手指,观察到的现象是(两只手向中间交错移动).原因是------- 在篮球表面和木板表面上移动的铅笔,其长度和铅笔头随位置的变化有什么不同?为什么会这样? 一元二次方程,两根的和与两根的积与系数有什么关系 用两只食指水平搁起一只长铅笔(一只靠近中央,另一只手指靠近一端)让两根手指逐渐靠拢,铅笔会向伸出手指较长的一侧倾倒吗? 怎样判断一元二次方程根的符号 在三角形ABC中若abc成等差数列角B=30度S三角形=3/2求b三角形ABC中,abc分别为ABC的对边,如果abc成等差数列,B=30度,三角形ABC的面积为1.5,求b下面这个好象是错的↓http://zhidao.baidu.com/question/56093114.html 用两只食指水平搁起一只长铅笔(一只靠近中央,另一只手指靠近一端)让两根手指逐渐靠拢,铅笔……用两只食指水平搁起一只长铅笔(一只靠近中央,另一只手指靠近一端)让两根手指逐渐靠拢, 在一元二次方程中 x1*x2<0则可判定两根的符号为()? 已知函数f(x)=1-2a-2ax+2x2在定义域【-1,1】上的最小值为m(a)求m(a)的表达式 用两只手的食指,顶住铅笔的两端.铅笔一端尖,一端平.铅笔作用在两手指上的压力是相等的,但两手指受压部位的形状和感觉是否相同? 怎样证明三角形三条中线交于一点? 以知函数f(x)=1-2a-2ax+2x^2在定义域【-1,1】上的最小值为m(a),求m(a)的表达式 用牙轻轻咬住铅笔上端,用手指轻敲铅笔下端,注意听这个敲击声.然后张嘴使牙不接触铅笔,而保持铅笔位置不变,手指用与前同样的力轻敲铅笔下端.比较这两次听到的敲击声.这个实验能说明什 25、证明:三角形的一条中线把三角形分成两个面积相等的三角形. 已知函数f(x)的定义域为(0,+∞),且f(x)=2f(1/x)+x,求f(x)的表达式 直角三角形的性质(所有的)DP平分角CDA,BP平分角ABC,则角P、角A、角C之间的关系怎样,请说明理由. 直角三角形中,如果除直角以外的两个角相等,那这两个角一定是45度,为什么?如题,求证明过程 在△ABC中,已知B(-1/2,0)C(1/2,0),顶点A移动时满足sinC-sinB=1/2sinA,则点A的轨迹方程是?我知道可以化为c-b=1/2a.可是然后捏. 若三角形ABC的三内角成等差数列,则1+sin2B/sinB+cosB= 三角形的1条中线是否将这个三角形分成面积相等的三角形,WHY?/ 二次函数与X轴两交点间的距离公式是怎么得来的?我知道是绝对值a分之根号Δ.老师上课演算过,忘抄了.不要只是答案, 直角三角形内心有什么特别性质呢?是直角三角形的内心,不是不同三角形的.请帮忙想一下如果这个三角形是直角三角形的时候,内心有什么新的性质呢?一楼那个是不同三角形都有的性质。 为什么三角形中线能将三角形分成面积相等的两部分?中线不是只有平分两条线段的作用吗?怎么又能分面积了 在三角形ABC中,C(-4,0) B(4,0),且点A运动时满足sinB-sinC=1/2sinA,求A点的轨迹 用直角三角形性质, 三角形3边上的中线能否把1个三角形分成3个面积相等的三角形考虑的是普通三角形 已知ABC中,B,C是两个定点,并且sinB-sinC=1/2sinA,则顶点A的轨迹是什么 直角三角形的性质怎么做? a,b,c为三角形ABC的对边,S为三角形的面积,且S=c^2-(a-b)^2 (1)求tanC (2)当S=32/17时,求ab的值 如图,在△ABC中,AD、BE、CF是三条中线,它们相交于同一点G,(1)△AGF的面积和△AGE 已知:x是(﹣3)的绝对值的相反数,y是﹣2的绝对值,求2x的平方-y的平方 在三角形ABC中,S为三角形ABC的面积,且S=c^2-(a-b)^2.(1)求tanC(2)当S=32/17时,求ab的值 求100%正确详解 如图所示,人重600N,木板重为400N,人与木板,木板与水平 地面之间动摩擦因数为0.2.现在人用水平力拉绳,人受的摩擦力是多少 方向?答案是100N 和水平向左.这道题网上有 但我看不懂 求详解. 已知x+y-4的绝对值与(2x-y+7)的平方的值互为相反数,则x*x*y=? 1.在水平板上移动的铅笔,看到的铅笔会随着移动发生变化吗? 4.如图,已知正方形内接于△ABC,△AFG的面积为1,△BDG的面积为3,△CEF的面积为1,求正方形DEFG的边长 2x-5的绝对值与(y+3)的平方互为相反数,求2x-y的值?2x-5不等于0时2x-y的值是? 直角三角形有哪些性质? 三角形ABC中,正方形DEFG的顶点D、E在BC上,另两个顶点G、F分别在AB、AC上,且S三角形AGF=S三角形CEF=1且S三角形BDG=3,求S正方形DEFG. 在三角形ABC中,对边分别是a、b、c,若三角形ABC的面积为S,且S=c^2-(a+b)^2,求tanC/2的值 已知在三角形ABC中,三个内角A,B,C的对边分别是a,b,c,若三角形的面积为S,且S=c^2-(a+b)^2 ,求tanC/2的值,请看清题目再回答, 如图所示,三角形abc是边长为a的等边三角形,defg为正方形,求s正方形defg 直角三角形的所有性质? 三角形ABC的边长AD=14,BC=16,AC=26,P为角平分线上的点,且BP垂直AD,M为BC中点,则PM的值AB不等于14,AD=14
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘