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

我由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中调用带参数存储过程的实现(数据库) VB中感叹号“!”与圆点“.”的用法差异 VB中如何实现注册表的读写 VB中实现“擦视”技术 Visual Basic 2000年问题 Visual Basic 的未来 Visual Basic 命令分类表 Visual Basic三级跳 Visual Basic使用技巧 Visual Basic中的子类处理技术 Visual Basic中软件封面技术探秘 VisualBasic 软件设计中的几个问题 Windows 95/NT 运行了多长时间 -VB资料 Windows 的登录资料库 -VB资料 把回车键变成TAB键-VB资料 把文件置入到Text或RichText中 -VB资料 避免按 [ENTER] 回车键产生的“嘀”声 -VB资料 避免使用全局变量-VB资料 避免装载多份应用程序-VB资料 不定个数的参数 -VB资料 不在任务栏中显示,只能在Ctrl+Alt+Del对话框中显示或者干脆什么也不显示数 -VB资料 处理 Dropdown List型 Combo的录入问题-VB资料 VB创建和删除快捷方式 从程序中生成 exe 文件 -VB资料 打开和关闭CD-ROM 驱动器 -VB资料 打开和关闭其他应用 -VB资料 打开一个超连接 -VB资料 当前操作系统的语言集-VB资料 当前系统目录-VB资料 得到磁盘上剩余空间的值-VB资料 知道26号放假!高兴!!放分!! 问个瓜问题 推荐几个好的编程论坛(中文的),不看的后悔呀!请不要移贴或删除! 关于脚本与代码的通信问题。。。 用WiseInstall作安装程序,怎么让可执行程序自动识别专用的文件,即点击专用文件即可用对应执行程序打开 在POWERDESIGN中将数据库设计倒入WORD报表的中文乱码问题 访问数据库时遇到的问题 如何把Excel的图表另存为图形文件?? 紧急求救!!(关于调用exe的问题) 关于动态删除记录的问题,大侠指点!!! 请问如何把用户上传的文件(所有)都保存在sql里面? 在POWERDESIGN中将数据库设计倒入WORD报表的中文乱码问题 时间设置 年关已到,谁有工作总结的模扳,给小弟发一份。 今天女朋友回家,放分,终于可以自由几天了,头一次放分,只有这么多了 生气!我真的很生气!现在的人怎么都这样? to shibichen(务必请近来一下) 在VC中怎么写关于猫的AT命令的程序?最好又程序。分数不过另外给 问一个傻傻的问题 帮帮忙,我送什莫礼物给女朋友好呢? 如何将选择出的内容存入文本文件??? Delphi中数据库操作Filter的原理,他和SQL语句查询输出的结果有什么不同? 在EXCEL中如何实现分两上SHEET打印!? 帮帮忙,我送什莫礼物给女朋友好呢? 几个linux下典型的应用问题,,高手新手都请进 ;-) 有关IE的奇怪问题 困扰很久的问题了:conn.execute为什么有是不能执行? 请问当一个页面中某个frame包含的网页不断重复刷新的时候怎么不让IE下面的刷新条滚动? 为什么局域网内看不到网站,而在广域网内却可以看到网站! 哪位用过这个控件的3DES,SHA1算法?我调不出来,急~~~~~:( delphi中类似于On Error GoTo的语句是什么 采用缓存模式的Dataset如何一次性进行所有行的数据合法性校验? 运行程序时如何交换数据窗口中的两列的位置呢? 两个sql语句一样只有条件不一样,如何取并集? 无法设置DatabaseName是为什么? 那位高手能给出创建弹出窗口的比较完善的例子(最好经过测试)? 在目前共享软件怎样才能获取美元?除了有自己的产品外,在营销中那些条件是必备的? 我有oracle考单两张1000元/张有需求请email给我 在POWERDESIGN中做的数据库设计倒入SQL中,能否保留住NAME栏的中文注释? ASP与存储过程 请教: 请熟悉C#和COM+的朋友进来,保证散分 请问如何在对话框中加入工具条 关于打包的问题???急!急!急! 怎么清除mysql在2000 关于DNS的问题!那位大侠指点一二~~~ 这个sql如何写当A table 的field1的值符合一定条件时检索条件为一种情况,当field1的值为另一值时,检索条件为一种情况 初来宝地,散分! XML模糊查询 在POWERDESIGN中做的数据库设计倒入ORACLE中,能否保留住NAME栏的中文注释? 我有两张oracle考单1000元/张 朝鲜纪念前最高领导人金正日逝世一周年宁波一栋居民楼突然倒塌致1人死亡盘点近年震惊全球的校园枪击案北极洋惊现大片“霜花”似英国夏日花朵60岁仍未婚 朴槿惠当选韩国首位女总女子闹市跳脱衣舞 周围男子扔钱起哄喊探秘公交公司点钞员 数钱数到手抽筋探秘公交公司点钞员 数钱数到手抽筋男子求爱被拒后藏在女孩床下欲拍艳照内蒙古四成面积雪情严峻吉林珲春再现东北虎下山吃狗事件英国奢侈品店圣诞促销引华人顾客抢购吃方便面中毒 西安封存近4万袋耐寒奇人挑战极限 比基尼美女体验“冰青海:7名留守儿童的新年心愿杭州连下32小时大雪 雪西湖美景再现螃蟹西红柿同食产生砒霜不成立印度男子14万打造纯金衬衫求偶长沙男子公厕值班一夜 醒来头发全没了女子阿胶枣中吃出虫 厂方称是蜜蜂公交追尾“拉粪车” 致乘客满身污秽两名外国记者在阿富汗东部遭枪击长沙市望城区清理行政审批项目让权力“(网闻求证)安徽宣城一国土所副所长因田东县朔良镇开展大型禁毒宣传教育活动(清明节新华调查)“日常冷,节日热”(服务、汽车)部分用户称艾瑞泽7前舱碧桂园助学扶贫活动获江苏省肯定(图)实拍广东弃婴岛前的离别纸质祭品花样翻新 资源浪费破坏环保美国氮化镓技术获突破 可显著减少雷达深圳器官捐献量全国第一 公民可网上登深圳一道路塌出两深坑 70立方米土方个人信息登记不准确 交警提醒车主尽快深圳路边停车一天最高收费265元 遭暴雨停课听气象局的? 代表建议教育局广东小作坊食品摊贩可以做盒饭 不得在清明假期高速仍免费 出深高峰期间将严日美防长将举行会谈 或探讨解禁集体自河北发布清明出行提示 多条高速将迎高墨尔本海滩烟蒂多 民众期盼严管澳大利亚搜寻马航失踪客机黑匣子 电池
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘