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

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

用Delphi如何实现VFP中的Cache特性 用Delphi设计数据库应用的几点体会 在我们日常工作中,常会碰到这样一个难题:一大堆-Delphi资料 用DELPHI制作应用软件 用Dephi 程 序 维 护Paradox 数 据 表 的 索 引-Delphi资料 用Dephi程序维护Paradox数据表的索引-Delphi资料 用InstallShield制作数据库应用系统的安装程序-Delphi资料 在BDE中使用ASCII-Delphi资料 在DBMemo中查找文字-Delphi资料 在Delphi 程序中维护DBF 数据库 在Delphi 中 利 用 Tbatch 组 件 完 成 数 据 批 处 理 在Delphi 中使用计算出的字段 在Delphi3 程 序 中自 动 检 测、 建 立 数 据 库 别 名 和 表 格 在Delphi3程序中自动检测、建立数据库别名和表格 在Delphi4 BDE中配置Access数据库 在Delphi5 中修改了Delphi自带的VCL Source文件后怎样重建Delphi的库文 在DELPHI程序中动态设置ODBC数据源 在DELPHI程序中使用ADO对象存取ODBC数据库 在DELPHI程序中自动设置ODBC数据源 在Delphi的DBGrid中插入其他可视组件 在Delphi的Socket编程中如何从服务器向指定的客户机发送信息? 在Delphi动态生成定义数据库 在Delphi中处理数据库日期型字段的显示与输入 在Delphi中简单实现多重查询 在Delphi中建立和使用别名 在DELPHI中使用ADO对象存取ODBC数据库 在Delphi中使用DBF数据 在Delphi中随意控制DBGrid 每一行的颜色 在Delphi中自动检测、建立数据库别名和表格 在存储过程中使用use database-Delphi资料 在一个Dbgrid中显示多数据库-Delphi资料 在Redhat Linux6.2中,如何输入中文? exchange server 5.5 支持win2000 server吗? 不好意思 , 小弟没分了 , 再问一个问题 , SLE控件中有没有响映回车键的事件. 汇编里数据类型间的转换函数有哪些? 谁知道base64的编码方法? cathy0505活泼有余,roani典型的北方闺女,MM书看的太多了,做梦爱 难道没有人会ADO事务处理吗?请帮忙回答‘这个事务操作错在哪?’ 请给以人道主义援助!!! 如何自定义消息??? 求救!请教高手VC里如何产生一个类似CDialogBar或CToolBar的可任意停靠的东西,并且拖动时没有虚框显示。 错误提示:“无法为更新行集定位:一些值可能已在最后读取后改变”。看一下,谢谢。 SQL Server 存储过程中错误处理问题,请教高手 請教: ADO 的 RecordSet 的打開方式和鎖方式 如何选择三层架构的中间件产品? 小呆猫谢谢了,再请教一下。。。 我想问一下,如何能在程序中锁定键盘和鼠标 西摩斯(厦门)医疗软件开发有限公司急招精通Delphi,MS SQL Sever软件设计师! 大家帮忙啊... 关于 int[][][] a = new int[3][3][3] 再问clavy(有巢无车氏) 和 wqxtt(wqxtt) 关于WINCE 下ACCESS 与 WINDOWS 下ACCESS 的转换 关于C/S结构的问题?快帮我啊!!! 各位programer加班有加班工资吗? 代理服务器的原理?——有谁知道! 请问怎么在一个对话框程序的文本框中绘图 请问windows网络程序PING编程技术里的几个问题,ICMP回显里面的timestamp是怎么纪录进去的 什么地方可以Down rose?或谁寄给我一个? 编写一个函数,通过指针连接两个字符串!!!!!!!!!!!! 用applet怎样打开一个文件吗? 请问哪种ORB产品实现了com服务器/corba客户机的桥 我读《深入探索C++对象模型》的感受,cber能再回答我一次么? 谁有DELPHI的有关网络编程方面的资料?给我一份可以吗? 关于stringgrid的问题????? 痛苦啊,难道要放弃BCB吗? 大家认为在开发过程中是否不能用全局变量? 如何让LINUX支持我显卡 高手,谁来帮我一下~! 取字符 在SDK中,如何获得客户区的宽度和高度呢??(哪两个函数呢?) 哪里有ATL的电子书下载?最好是中文的! 高手谁能帮帮我呀~~~~~~~! 请教:如何在statusbar的panel中显示一个图标呢? VC++中如何使用OLE对象? 初来乍到,发现这儿JJMM还挺多的。。。 请高人指教~! CSDN中碰到这种问题,该如何解决呢? 如何学习director 你能帮我一下吗?~ 企业商务管理软件,开放全部的源代码及开发文档! 企业管理软件,全套源码及开发文档!!!! 哪里有支持任何波特率的通讯控件下载? net_lover(孟子E章)请进~! 若S=1^2-2^2+3^2-4^2+……+99^2-100^2+101^2,则A=__,B=__.填空抱歉哈 是的后面是:S被103除得到的余数是__________ 一、单选题(共 10 道试题,共 30 分.) V 1. 如果人们对闲暇的需求增加,则( ). A. 工资率会上升,劳动求助《西方经济学》答案 三角形ABC中,∠C=90°,若a:c=7:25,b=48,则a= (-3)^100×(-3)^-101等于( ) A.-3 B.3 C.1/3 D.-1/3 ____ghost exists in the world.That's your illusion.A.No such a thing as B.No such a thing as aC.No such thing as a D.No such thing as选D为什么不是C?____for a long time,the fields are all dried up.A.There has been no rain B.Having no rainC.There 在三角形ABC中,角C等于90°,COSA=5分之3,a=2,则,b+c=? 一辆汽车以每小时60千米的速度从武汉开往长沙,3小时行了全程的4/5, 一、单选题(共 10 道试题,共 30 分.) V 1.管理人员的工作能一、单选题(共 10 道试题,共 30 分.)V 1.管理人员的工作能力越强,管理幅度().A.越大B.越小C.不变D.满分:3 分2.下列不属于人群关系 三角形ABC中,∠B,∠C的外角平分线交于E,则∠BEC等于多少? 如果A和B都是非零自然数,A-B=1,那么A和B的最大公因数是( ).要步骤,很详细. 一、单选题(共 50 道试题,共 100 分.)英语试题一、单选题(共 50 道试题,共 100 分.)V1.____he works hard,I don’t mind when he finishes the experiment.A.As soon asB.As well asC.So far asD.So long as满分:2 分2.She has 三角形ABC中,角B的外角平分线与角C的外角平分线交于点E.求证:角BEC=90°减二分之一角A. 1/a-1/b=5/24,其中a和b都是非零自然数,那么a+b=? 经济类题目,懂的朋友帮帮忙,一、单选题(共 50 道试题,共 100 分.)V 1.当存在外部经济时,6.如果价格上升10%能使买者的购买减少1%,则该商品的需求价格弹性()A.缺乏弹性B.富有弹性C.具有单 如图一,将三角形abc纸片折叠,使c落在三角形内部,求证,角abc加角bec等于两倍的角c (2)如图一,将三角形abc纸片折叠,使c落在三角形内部,求证,角abc加角bec等于两倍的角c(2)如图二,将三角形abc纸片 b为非零自然数,与它相邻的两个自然数分别是( )和( ) 一、英语单选题(共 20 道试题,共 100 分.)一、单选题(共 20 道试题,共 100 分.)V1._______ joyful he was to meet his father again!A.WhatB.HowC.How aD.What a 满分:5 分2.This flower smells ________.I like it a lot.A.badB. 如图,已知点E是三角形ABC的两条角平分线BE,CE的交点,试说明角BEC等于角A加角1加角2 已知AB是两个不等零的自然数,如果A>B,那么A分之一>B分之一 一、单选题(共 50 道试题,共 100 分.)V 1.ROM与RAM的主要区别是( ) A.断电后,ROM内保存的信息会 如图,在△ABC中,∠C=∠ABC=2∠A,BE是∠ABC的平分线,求BEC的度数 a点、b点、个代表什么、 0.027+9·9x0·27怎样简便计算 如图,在△ABC中,∠C=∠ABC=2∠A,BE是∠ABC的平分线,求∠BEC的度数 A-B 表示什么意义 0.027+9.9x0.27简便计算要过程 已知:DE∥BC,BE是∠ABC的平分线,∠ABC=70°,∠C=50°,试求∠DEB ∠BEC的度数 如果A➗B=75,那么(Ax10)➗(Bx5)=( ) 在三角形ABC中,角A,B,C的对边分别为a,b,c,且满足4sin^2(A+C)/2-cos2B=7/2求角B度数如果B=根号3,a+c=3.且a>c,求a,c 在三角形ABC中,∠B与∠C的外角平分线BE,CE交于点E 试说明∠BEC=90°-1/2∠A a、b表示什么数? 在三角形ABC中,a,b,c分别为角A,B,C的对边,4sin²(B+C)/2-cos2A=7/2(1)求A的度数(2)若a=√3,b+c=3,求b与c的值 如图11-1-12,已知点E是角ABC的两条角平分线BE,CE的交点,试说明角BEC等于角A加角1加角2. It is not until you have lost your health____you know its value.A.until B.when C.what D.that ____ at the news that I didn’t know what to say to comfort her.A.So sad she looked B.So sad did she look C.So sadly she looked D.So sadly did she look Ther 在三角形abc中,角a,b,c所对的边分别为a,b,c,已知c=2,acosb-bcosa=7acosB-bcosA=7/2.第一问:求bcosA的值。第二问:设a=4.求三角形ABC的面积 如图,△ABc为等边三角形,角1=角2=角3,①求角BEc②△DEF是等边三角形吗? 请英语高手再帮做20道单选题(一共两套题,一套已解决)1.I didn’t forget the book because my wife ____ me to bring it.a)recalled b)mentioned c)reminded d)remembered2.The surgeon is treating several _______ of this disease.a)conditio 已知在▲ABC中,角A等于2分之1角B等于3分之1角C,它的最长边为2,求这个三角形的面积? 三角形ABC和三角形DEC均为等边三角形,角DAB=40°角ACD=15°求角BEC的度数 问题是这样的:我国是一个多地震的国家.从板块学说来看,我国多地震的主要原因是:A.东部和西南部处于板块交界地带B.东部和西北部处于板块交界地带C.我国全部位于环太平洋地震带上D.我 在三角形ABC中,角A,B,C所对的边分别是a,b,c,已知c等于2,C等于3分之派,若三角形的面积等于根号3,求a,b 如图,在三角形ABC中,角BAC=90°,AD⊥BC于D,BF平分∠ABC交于E点,交AC于F点,求证角AEF=角AFE 一、单选题(共 40 道试题,共 80 分.) 1.垄断竞争厂商短期均衡时____一、单选题(共 40 道试题,共 80 分.)1.垄断竞争厂商短期均衡时____ A.厂商一定获得超额利润B.厂商一定不能获得超额利润C. 在三角形ABC中,已知角A,B,C的对边分别为a,b,c.且a=2,B-C=二分之派,三角形ABC的面积为根号三.求边b. 已知:如图,三角形ABC中∠1=∠2,BE⊥AC于E,交AD 于F 求证:∠AFE=1/2(∠ABC+∠C 试卷总分:100 测试时间:-- 单选题 一、单选题(共 40 道试题,共 100 分.)V 1.今科学 在三角形ABC中,a,b,c分别是角A,B,C,的对边,如果a,b,c成等差数列,角B是30度,三角形面积是三分之二求b 如图,在三角形ABC中,BC=10,边BC的垂直平分线交AB,BC与E,D,BE=6,求三角形BEC的周长 一、单选题(共 10 道试题,共 40 分.) 1. "短期"和"长期"的根本区别在于() A. 在短期内至少有一种资源 已知三角形的三边为abc,a-b=b-c=2,它的最大角的正弦值为二分之根号三,则三角形面积为多少? 如图,在等边三角形ABC的边BC、AC上分别取点D、E,使BD=CE,AD与BE相交于点F,求角AFE的度数 一、单选题(共 10 道试题,共 40 分.)V 1.力的作用线都在同一平面内且汇交于一点的力系称( )力系.A.一、单选题(共 10 道试题,共 40 分.)V 1.力的作用线都在同一平面内且汇交于一点的力 已知a,b,c是三角形ABC的三条边,满足a/3=b/4=c/5,且a+b+c=24 (1)试求a,b,c的值 (2)判断三角形ABC的形状 三角形ABC的三条角平分线交于一点G,角BAC=76度,角ABE=20度.求角BEC,角ADC,角DGC的度数? 一、单选题(共 10 道试题,共 40 分.)V 1.等截面直杆在两个外力的作用下发生轴向压缩变形时,这对外力一、单选题(共 10 道试题,共 40 分.)V 1.等截面直杆在两个外力的作用下发生轴向压缩 已知a,b,c为三角形ABC的三边,(a-c):(a+b):(c-d)= -2:7:1,且a+b+c=24,试判断三角形ABC的形状 △ABC的三条角平分线交于一点G ∠BAC=76° ∠ABE=20° 求∠BEC ∠ADC ∠DGC 若|A+2|+(B-1)2=0,则(A+B)101=( ) 一、单选题(共 10 道试题,共 30 分.)1.新民主主义共和国的政体是:A.苏维埃代表大会制度B.参议会制度C.人民代表会议制度D.人民代表大会制度满分:3 分2.意识的反作用或能动性,从根本上说 已知a.b.c为三角形ABC的三边长,且(c-a):(a+b):(c-b)=2:7:1,a+b+c=24判断三角形形状
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn