ReactJS与AngularJS这两类开发技术

2022-03-31 11:43:34

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对此进行了大幅优化，可方便用户网站去捕获、吸引和留存访客。

ReactJS中的“段”
ReactJS通过影子(Shadow)DOM 的方式，在文档被渲染时插入子DOM。它与主文档的DOM是分离的，因此不会影响到主DOM树的内容。而作为一个可调整的组件，这样的独立段拥有各种灵活性。例如：由于支持代码的重用，因此经验丰富的Web开发人员可以在开发项目中*地重用其代码组件，从而减少花费在项目上的重复时间。此外，React.Js拥有下载(downloading)数据流，可让那些较大的数据块在不受任何影响的情况下，被无缝且高效地输出。

ReactJS的缺点
1.文档是硬伤
不可否认，React的创新与迭代速度是有目共睹的。但是这却和它滞后的文档形成了鲜明的反差。也许是React的开发人员过于追求性能和功能上的升级，而拖累的其文档的跟进工作。至少对于ReactJS的用户而言，他们必须自行摸索或撰写相关的指南。

2.更新得太快
凡事都有利弊。React在功能上不断得以更新的状态，反而不一定会让某些用户买账。对于他们而言，也许需要的只是一个稳定的版本，而不必持续关注其是否又更新了什么新的特性，是否需要及时跟进学习。

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的缺点

对SEO支持较差
有过开发经验的用户都知道，在使用AngularJS将Web程序从以PHP、Spring、以及MVC等服务器端的渲染方式，改为前端渲染加上Ajax的，通过Restful API来请求数据的纯客户端模式后，搜索引擎往往无法从页面上的数据中爬取相应的搜索索引。这也就是为何单页面应用程序需要使用JavaScript，去定期更新内容和元标签(Meta labels)的原因。

2.反向切换问题
设计人员无法直接从AngularJS切换到Angular。在Angular的文档中，有一整段内容清晰地描述了，所有能够处理转换的方式，唯独没有提到从AngularJS切换到Angular。

与MVC高度关联
如前所述，AngularJS是一款遵循着MVC模型的框架。因此，如果您有着前后端交互的开发经验，就能很容易地理解MVC的相关实践;相反，如果您仅具备纯前端开发的知识，则很难理解MVC以及Angular。

ReactJS与AngularJS，到底该怎么选?
我们可能面对的开发项目往往是五花八门的。它们有的注重的是功能上的多样性，有的在意的是向下兼容性，有的需要有强大的可扩展性，而有的则应该具有高效的性能。那么，我们该如何在ReactJS与AngularJS之间做出明智的选择呢?下面是我的一些建议：

ReactJS与AngularJS这两类开发技术

码农公寓

相关文章