【51CTO.com快译】如今,随着使用JavaScript的软件应用日渐普及,针对ReactJS与AngularJS这两类开发技术的讨论也是此起彼伏。下面,让我们从各自的优缺点、以及适用场景等方面,对它们进行综合比较吧。
ReactJS
作为一款JavaScript的开源代码库,ReactJS提供了一整套精益工程(lean engineering)和基于段(segment-based)的工作流程。它是由Facebook提供的、可用于改进前端效果的专用语言,目前拥有体量大且活跃的社区。
React经常被用在媒体、产品转化、零售、金融创新、以及人工知识等领域。目前,Facebook网站的页面,instagram和WhatsApp应用都是以React为基础构建的。它通过各种优秀的代码库和组件(apparatuses)为用户带来了更高的效率、更好的代码稳定性、以及更令人满意的搜索引擎优化(SEO)效果。
为什么选择ReactJS?
如下三方面因素往往是促使用户选用ReactJS的主要原因:
1.卓越的更新能力
ReactJS拥有自己的虚拟文档对象模型(Document Object Model,DOM)。通过管理DOM中的各项变化,它能够及时更新其DOM树,并可提供良好的显示效果。也就是说,Reactjs只会在调用setState的时候,才去优先更新虚拟DOM,之后再去与实际的DOM相比较,最后按需更新实际的DOM。显然,这既减少了DOM的更新频率,又减少了其更新的内容。相对于机械地分配DOM的方式,它能够更好、更可靠地管理和恢复DOM。
2.有效的SEO
通常,JavaScript框架会面临一个巨大的问题是:在升级之后,Web搜索工具往往很难找到大量JavaScript类型的应用。而ReactJS对此进行了大幅优化,可方便用户网站去捕获、吸引和留存访客。
3. ReactJS中的“段”
ReactJS通过影子(Shadow)DOM 的方式,在文档被渲染时插入子DOM。它与主文档的DOM是分离的,因此不会影响到主DOM树的内容。而作为一个可调整的组件,这样的独立段拥有各种灵活性。例如:由于支持代码的重用,因此经验丰富的Web开发人员可以在开发项目中自由地重用其代码组件,从而减少花费在项目上的重复时间。此外,React.Js拥有下载(downloading)数据流,可让那些较大的数据块在不受任何影响的情况下,被无缝且高效地输出。
ReactJS的缺点
1.文档是硬伤
不可否认,React的创新与迭代速度是有目共睹的。但是这却和它滞后的文档形成了鲜明的反差。也许是React的开发人员过于追求性能和功能上的升级,而拖累的其文档的跟进工作。至少对于ReactJS的用户而言,他们必须自行摸索或撰写相关的指南。
2.更新得太快
凡事都有利弊。React在功能上不断得以更新的状态,反而不一定会让某些用户买账。对于他们而言,也许需要的只是一个稳定的版本,而不必持续关注其是否又更新了什么新的特性,是否需要及时跟进学习。
3. JSX语法
JSX是React的一个核心组成部分,它使用XML标记的方式,去直接声明界面,以方便界面组件之间的互相嵌套。作为一种JS的语句结构,用户可以使用HTML语句,将HTML标签传送给子组件。与XML语言类似,它是一种带有属性树结构(即DOM结构)的语法,其目的不是为了在浏览器引擎中实现,而是要通过各种编译器,将标签编译成标准的JS语言。
不过,在实际应用中,用户可以完全不使用JSX语法,而只使用JS语法去实现。因此,在某种程度上说,JSX的使用只是为了让代码便于阅读而已。
AngularJS
作为一种受到TypeScript约束的开源式前端架构,AngularJS是从基于JavaScript的Web框架改进而来。通过AngularJS,您可以让应用程序根据模型-视图-控制器(MVC)的模型,将应用程序的数据模型、表示信息、以及控制信息相互分隔。AngularJS的显著优点包括:易于测试、易于扩展、易于调整、以及可直接用于工程设计等方面。总的来说,AngularJS通常被用于提供实时视频服务的应用程序中,对用户上传内容的分析与评论网站等应用场景中。
为什么选择AngularJS?
与ReactJS类似,如下三方面因素往往是促使用户选用AngularJS的主要原因:
1.适用性
AngularJS的MVC架构十分清晰,彼此之间分工明确,且有极好的可扩展性。通过使用Angular,用户能够更专注于业务逻辑,而不必考虑对于HTML的影响。可见,由它提供的功能具有低耦合性,能够与应用程序的其他部分相隔离,以方便用户对某个对象进行轻易地修改或替换,而不会对其他对象产生影响。同时,在AngularJs中,路由意味着从一个视图移动到另一视图,因此非常方便、容易。
2.测试
AngularJS可以通过依赖注入(Dependency Injection,DI),连接到各种控制器(controller)上,以开展诸如单元测试、中途测试,以及端到端测试。其中,AngularJS的单元测试框架名为Karma。它是通过将模拟信息注入到监管器(regulator)中来实现测试目的。
3.用户界面(UI)
鉴于HTML是一种信息性且易读懂的语言,AngularJS使用HTML来描绘Web应用程序的UI。您可以在HTML中使用各种功能性的特征,来描述哪部分将会使用哪个调节器。而通过管理各种条件,AngularJS不但增强了用户与Web之间的互动,而且准确地描述了用户的真实需求。同时,在AngularJs中,您只需编写很少的代码即可实现DOM的各项操作。
AngularJS的缺点
1. 对SEO支持较差
有过开发经验的用户都知道,在使用AngularJS将Web程序从以PHP、Spring、以及MVC等服务器端的渲染方式,改为前端渲染加上Ajax的,通过Restful API来请求数据的纯客户端模式后,搜索引擎往往无法从页面上的数据中爬取相应的搜索索引。这也就是为何单页面应用程序需要使用JavaScript,去定期更新内容和元标签(Meta labels)的原因。
2.反向切换问题
设计人员无法直接从AngularJS切换到Angular。在Angular的文档中,有一整段内容清晰地描述了,所有能够处理转换的方式,唯独没有提到从AngularJS切换到Angular。
3. 与MVC高度关联
如前所述,AngularJS是一款遵循着MVC模型的框架。因此,如果您有着前后端交互的开发经验,就能很容易地理解MVC的相关实践;相反,如果您仅具备纯前端开发的知识,则很难理解MVC以及Angular。
ReactJS与AngularJS,到底该怎么选?
我们可能面对的开发项目往往是五花八门的。它们有的注重的是功能上的多样性,有的在意的是向下兼容性,有的需要有强大的可扩展性,而有的则应该具有高效的性能。那么,我们该如何在ReactJS与AngularJS之间做出明智的选择呢?下面是我的一些建议:
- 如果您习惯了C#和Java等传统且明确的编程方式,而且精通CSS、HTML和JavaScript等编程语言,那么AngularJS将会是您的正确决定。
- 如果您需要制作的应用程序,可能会被用到游戏等快速运行环境中,或是需要进行持续改进,亦或需要在各种不同的部分之间进行状态的转换,那么ReactJS会更加适合一些。
- Angular的在功能上更为强大。它不但能够对用户提供全方位的支持,而且能够为前端的改进提供丰富帮助和设备集支持。不过,其发起方—Google曾在社区里表示:目前,该项目已不再推进,他们会致力于将AngularJS逐渐过渡为Angular 2+(https://dzone.com/articles/angular-2-vs-react)。
- React已经在本领域积累了丰富的经验,并对本社区做出了不少承诺。它通过推行一种所谓“轻量级”的方法,来方便用户快速上手,而无需投入更多的学习精力。
- 就开发速度和熟练程度而言,AngularJS凭借着其卓越的CLI,不但能够加快工作区和配置工作的改进速度,还能够通过单行代码(one-line codes)的方式,构建出不同的段,以及包含了广泛内容组合的简洁代码。
- 在使用外部代码库时,React的速度和效率可能会受到影响。这就迫使ReactJS开发人员事先选好恰当的设计组件。
- 由于采用的是虚拟的DOM,因此在ReactJS中无论DOM树的整体还是部分被改变或调整,树的信息结构会按需被更新。也就是说,开发者对更改的跟踪和刷新,并不会影响到树的其他部分。
- 而使用真实DOM的AngularJS,则需要查找和识别到底是哪些部分需要更改。当然,AngularJS在识别和执行更改时,其效率并不会受到限制。
原文标题:ReactJS Vs. AngularJS,作者:Sidharth Jain
【51CTO译稿,合作站点转载请注明原文译者和出处为51CTO.com】