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

我由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建立文件关联 -VB资料 将RichTextBox 之中被选取的内容复制到剪贴簿-VB资料 将我的程序的文本直接送到WORD中(不用粘贴)-VB资料 开启文件属性窗口 -VB资料 快速读取 TextBox 第 N 行的资料 -VB资料 快速选择里List全部项目-VB资料 VB利用 App.Path 读取「应用程序所在之目录」 VB利用 EM_LINESCROLL 信息控制 TextBox 的卷动。 命名的技巧 -VB资料 目录所占的字节数-VB资料 VB判断文件是否在IE的缓存中 屏蔽文本框的右键菜单-VB资料 VB取得长文件名 VB取得临时文件名 VB取得某个目录底下所有文件大小总和 VB取得文件的扩展名 VB取得文件内容 确定 TextBox 有几行-VB资料 确定是 WINDOWS 的可执行文件-VB资料 让打印机只打印一行-VB资料 VB如何把批处理文件转换成EXE文件? VB如何调用 Office VB如何将文件删除到回收站 VB如何快速移动文件? VB如何让文本框输入完后,直接跳入下一行? VB如何使用vb取得一个文件的控制权 VB如何使用文件复制对话框? VB如何使用资源文件 VB如何用Dir()函数来列出C下所有TMP文件并且用文本框输出 VB如何在 VB 中使用 Winzip 来压缩文件? VB如何在DOS程序结束执行时,自动将其关闭? 急救!自动隐藏Panel 帮忙 哪里有数据库系统开发的文档下载 急待解决的问题 请问从socket发信息,连续发送几个小数据包出错的情况!! 紧急问题,在线等待! 救命——存取违例 请问在VB中使用DAO控件怎样打开ACCESS数据库? 请问装vc6的sp5主要有什么作用啊 双网卡的局域网,如何让 CSocket 使用指定的网卡与另一电脑通讯? SQL删除不了相同的记录 JBuilder7中的中文问题 谁知道计算机的本地时间与系统时间有什么区别? 请问如何实现垂直显示文字?` JDOM高手看过来! 请问怎么在vb中调用纯c接口的api并实现多线程 如何实现任意长整数的运算? 程序移植,有多大的工作量??? 哪里有InstallShield Express的中文包D6自带的那个。 HELP ME! 请教:API中的数据类型与pb中的数据类型的对应关系 第一个进来给100分!哈哈,高兴!! 高分求翻译, 高手请进,就一句 TeeChart在那个组件栏中?我怎么找不到?(我是6.0的版本) 在哪里下载KPT7.0? 存储过程问题讨论!高手请进. 高人指点几行代码不难,只是我不懂 紧急问题,在线等待! 急问:在DROPDOWNLIST中如果只有一个下拉选择项怎么无法相应SelectedIndexChanged事件?该怎么做? 关于用DataGrid显示数据的问题 请高手相助 示例解析sqlDataAdapter中tablemappings的使用(在线给分)急!!! 我想让一条记录的其中四个字段成为ComboBox中的四个选项,如何做啊? 请问.netFrameWork里面没有提供Chart的类。 关于驱动编译的一个问题!100分! 十行小程序 想做一个VC6.0那样的WorkSpace,谁有这方面的经验或代码? 我现在做一个考试系统,它的客户端怎样操作服务器端的数据库? 还是web打印的问题,特别是票据打印,要求比较高(还要免费的),据说可以用Applet+数字签名+JNI+XML的形式? mshflexgrid同步更新问题===请高手做答 我想在CDocument中控制CDialogBar,如何控制? Easy,简单的开始问题!!! 谁有Antechinus C# Editor的注册码呀? 随缘 99高程的最后一题c语言题目的编程原理是什么?什么图理论?数据结构?不明白? 请 Swing 高手指教:java 如何实现点击窗口最小化时在最右下角的任务栏有图标显示。 声卡装不上怎么解决????????????????????急急!!!!!!!!!!!!!!! 各位大虾,关于安装了ie6.0 sp1出现的问题。。。。。。 at89c52停产了,替换at89c52 500分求教:怎样发送任意格式的邮件附件?要求用Base64编码,速度要快。 asp本地机怎么设置 美国9月商品零售额环比下降0.1%埃及穆兄会领导人案庭审法官辞职一武装直升机在莫斯科市区坠毁走近维纳斯故乡――访塞浦路斯能源商工泰国会将二读审议特赦条例草案埃及穆兄会领袖庭审 3名法官开审前请飓风袭击德国致多地交通瘫痪 乘客被困波兰国家法律顾问称该国养老金制度改革一架直升机在莫斯科坠毁 未致地面人员埃及穆兄会领袖案开审 三名法官请辞俄罗斯总理说“俄入世崩溃论”未成真强风暴席卷北欧地区 造成大面积交通瘫金砖国家农业部长共商粮食安全消息称美考虑停止对盟国领袖监听 未做消息称美考虑停止对盟国领袖监听 未做希中经贸合作潜力巨大——访希腊新任驻一架直升机在莫斯科坠毁 未致地面人员强风暴席卷北欧地区 造成大面积交通瘫一架直升机在莫斯科坠毁 未致地面人员消息称美考虑停止对盟国领袖监听 未做强风暴席卷北欧地区 造成大面积交通瘫雾锁乌奎高速 20余辆车相撞广东“三星闪耀”豪夺21连胜 辽宁客俄罗斯大量琥珀被风暴吹上岸 民众冒严欧盟计划在2015年加强打击非法偷渡甘肃会宁“十年九旱” 农民闲唠“苦乐留美学生纪欣然命案初审首日 检方还原叙难民到来给约旦带来挑战 国际社会应成中英:中国放弃战争赔款是姑息了日本国足式逆袭:沙特打平就出线 乌兹生死冯骥才开年连发六部新作 时隔33年再河北贸促工作实现新突破 2014年新今年河北省将再让565万农村人口喝上河北省高职单招试行按类别联考 实现学冀鲁豫贸促机构签约 构建促进三省边界新一艘052D驱逐舰完工离港 舰员列台湾政党盘点:解严至今成立过264个佩兰:今晚开美酒全队庆胜利天津新建特警突击队命名“金鹰” 防暴布里斯班:舜天双星闪耀“中国龙”腾空国足“翻译”赵旭东:“其实我是个安静新媒:中国用浩大工程展示技术和经济实
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘