綜合對比JavaScript的兩種開源代碼庫：ReactJS與AngularJS

者：陳峻來源：51CTO

【51CTO.com快譯】如今，隨著使用JavaScript的軟件應(yīng)用日漸普及，針對ReactJS與AngularJS這兩類開發(fā)技術(shù)的討論也是此起彼伏。下面，讓我們從各自的優(yōu)缺點(diǎn)、以及適用場景等方面，對它們進(jìn)行綜合比較吧。

ReactJS

作為一款JavaScript的開源代碼庫，ReactJS提供了一整套精益工程(lean engineering)和基于段(segment-based)的工作流程。它是由Facebook提供的、可用于改進(jìn)前端效果的專用語言，目前擁有體量大且活躍的社區(qū)。

React經(jīng)常被用在媒體、產(chǎn)品轉(zhuǎn)化、零售、金融創(chuàng)新、以及人工知識等領(lǐng)域。目前，F(xiàn)acebook網(wǎng)站的頁面，instagram和WhatsApp應(yīng)用都是以React為基礎(chǔ)構(gòu)建的。它通過各種優(yōu)秀的代碼庫和組件(apparatuses)為用戶帶來了更高的效率、更好的代碼穩(wěn)定性、以及更令?人滿意的搜索引擎優(yōu)化(SEO)效果。

為什么選擇ReactJS?

如下三方面因素往往是促使用戶選用ReactJS的主要原因：

1.卓越的更新能力

ReactJS擁有自己的虛擬文檔對象模型(Document Object Model，DOM)。通過管理DOM中的各項(xiàng)變化，它能夠及時更新其DOM樹，并可提供良好的顯示效果。也就是說，Reactjs只會在調(diào)用setState的時候，才去優(yōu)先更新虛擬DOM，之后再去與實(shí)際的DOM相比較，最后按需更新實(shí)際的DOM。顯然，這既減少了DOM的更新頻率，又減少了其更新的內(nèi)容。相對于機(jī)械地分配DOM的方式，它能夠更好、更可靠地管理和恢復(fù)DOM。

2.有效的SEO

通常，JavaScript框架會面臨一個巨大的問題是：在升級之后，Web搜索工具往往很難找到大量JavaScript類型的應(yīng)用。而ReactJS對此進(jìn)行了大幅優(yōu)化，可方便用戶網(wǎng)站去捕獲、吸引和留存訪客。

3. ReactJS中的“段”

ReactJS通過影子(Shadow)DOM 的方式，在文檔被渲染時插入子DOM。它與主文檔的DOM是分離的，因此不會影響到主DOM樹的內(nèi)容。而作為一個可調(diào)整的組件，這樣的獨(dú)立段擁有各種靈活性。例如：由于支持代碼的重用，因此經(jīng)驗(yàn)豐富的Web開發(fā)人員可以在開發(fā)項(xiàng)目中自由地重用其代碼組件，從而減少花費(fèi)在項(xiàng)目上的重復(fù)時間。此外，React.Js擁有下載(downloading)數(shù)據(jù)流，可讓那些較大的數(shù)據(jù)塊在不受任何影響的情況下，被無縫且高效地輸出。

ReactJS的缺點(diǎn)

1.文檔是硬傷

不可否認(rèn)，React的創(chuàng)新與迭代速度是有目共睹的。但是這卻和它滯后的文檔形成了鮮明的反差。也許是React的開發(fā)人員過于追求性能和功能上的升級，而拖累了其文檔的跟進(jìn)工作。至少對于ReactJS的用戶而言，他們必須自行摸索或撰寫相關(guān)的指南。

2.更新得太快

凡事都有利弊。React在功能上不斷得以更新的狀態(tài)，反而不一定會讓某些用戶買賬。對于他們而言，也許需要的只是一個穩(wěn)定的版本，而不必持續(xù)關(guān)注其是否又更新了什么新的特性，是否需要及時跟進(jìn)學(xué)習(xí)。

3. JSX語法

JSX是React的一個核心組成部分，它使用XML標(biāo)記的方式，去直接聲明界面，以方便界面組件之間的互相嵌套。作為一種JS的語句結(jié)構(gòu)，用戶可以使用HTML語句，將HTML標(biāo)簽傳送給子組件。與XML語言類似，它是一種帶有屬性樹結(jié)構(gòu)(即DOM結(jié)構(gòu))的語法，其目的不是為了在瀏覽器引擎中實(shí)現(xiàn)，而是要通過各種編譯器，將標(biāo)簽編譯成標(biāo)準(zhǔn)的JS語言。

不過，在實(shí)際應(yīng)用中，用戶可以完全不使用JSX語法，而只使用JS語法去實(shí)現(xiàn)。因此，在某種程度上說，JSX的使用只是為了讓代碼便于閱讀而已。

AngularJS

作為一種受到TypeScript約束的開源式前端架構(gòu)，AngularJS是從基于JavaScript的Web框架改進(jìn)而來。通過AngularJS，您可以讓應(yīng)用程序根據(jù)模型-視圖-控制器(MVC)的模型，將應(yīng)用程序的數(shù)據(jù)模型、表示信息、以及控制信息相互分隔。AngularJS的顯著優(yōu)點(diǎn)包括：易于測試、易于擴(kuò)展、易于調(diào)整、以及可直接用于工程設(shè)計(jì)等方面。總的來說，AngularJS通常被用于提供實(shí)時視頻服務(wù)的應(yīng)用程序中，對用戶上傳內(nèi)容的分析與評論網(wǎng)站等應(yīng)用場景中。

為什么選擇AngularJS?

與ReactJS類似，如下三方面因素往往是促使用戶選用AngularJS的主要原因：

1.適用性

AngularJS的MVC架構(gòu)十分清晰，彼此之間分工明確，且有極好的可擴(kuò)展性。通過使用Angular，用戶能夠更專注于業(yè)務(wù)邏輯，而不必考慮對于HTML的影響。可見，由它提供的功能具有低耦合性，能夠與應(yīng)用程序的其他部分相隔離，以方便用戶對某個對象進(jìn)行輕易地修改或替換，而不會對其他對象產(chǎn)生影響。同時，在AngularJs中，路由意味著從一個視圖移動到另一視圖，因此非常方便、容易。

2.測試

AngularJS可以通過依賴注入(Dependency Injection，DI)，連接到各種控制器(controller)上，以開展諸如單元測試、中途測試，以及端到端測試。其中，AngularJS的單元測試框架名為Karma。它是通過將模擬信息注入到監(jiān)管器(regulator)中來實(shí)現(xiàn)測試目的。

3.用戶界面(UI)

鑒于HTML是一種信息性且易讀懂的語言，AngularJS使用HTML來描繪Web應(yīng)用程序的UI。您可以在HTML中使用各種功能性的特征，來描述哪部分將會使用哪個調(diào)節(jié)器。而通過管理各種條件，AngularJS不但增強(qiáng)了用戶與Web之間的互動，而且準(zhǔn)確地描述了用戶的真實(shí)需求。同時，在AngularJs中，您只需編寫很少的代碼即可實(shí)現(xiàn)DOM的各項(xiàng)操作。

AngularJS的缺點(diǎn)

1. 對SEO支持較差

有過開發(fā)經(jīng)驗(yàn)的用戶都知道，在使用AngularJS將Web程序從以PHP、Spring、以及MVC等服務(wù)器端的渲染方式，改為前端渲染加上Ajax的，通過Restful API來請求數(shù)據(jù)的純客戶端模式后，搜索引擎往往無法從頁面上的數(shù)據(jù)中爬取相應(yīng)的搜索索引。這也就是為何單頁面應(yīng)用程序需要使用JavaScript，去定期更新內(nèi)容和元標(biāo)簽(Meta labels)的原因。

2.反向切換問題

設(shè)計(jì)人員無法直接從AngularJS切換到Angular。在Angular的文檔中，有一整段內(nèi)容清晰地描述了，所有能夠處理轉(zhuǎn)換的方式，唯獨(dú)沒有提到從AngularJS切換到Angular。

3. 與MVC高度關(guān)聯(lián)

如前所述，AngularJS是一款遵循著MVC模型的框架。因此，如果您有著前后端交互的開發(fā)經(jīng)驗(yàn)，就能很容易地理解MVC的相關(guān)實(shí)踐;相反，如果您僅具備純前端開發(fā)的知識，則很難理解MVC以及Angular。

ReactJS與AngularJS，到底該怎么選?

我們可能面對的開發(fā)項(xiàng)目往往是五花八門的。它們有的注重的是功能上的多樣性，有的在意的是向下兼容性，有的需要有強(qiáng)大的可擴(kuò)展性，而有的則應(yīng)該具有高效的性能。那么，我們該如何在ReactJS與AngularJS之間做出明智的選擇呢?下面是我的一些建議：

如果您習(xí)慣了C#和Java等傳統(tǒng)且明確的編程方式，而且精通CSS、HTML和JavaScript等編程語言，那么AngularJS將會是您的正確決定。
如果您需要制作的應(yīng)用程序，可能會被用到游戲等快速運(yùn)行環(huán)境中，或是需要進(jìn)行持續(xù)改進(jìn)，亦或需要在各種不同的部分之間進(jìn)行狀態(tài)的轉(zhuǎn)換，那么ReactJS會更加適合一些。
Angular的在功能上更為強(qiáng)大。它不但能夠?qū)τ脩籼峁┤轿坏闹С郑夷軌驗(yàn)榍岸说母倪M(jìn)提供豐富幫助和設(shè)備集支持。不過，其發(fā)起方—Google曾在社區(qū)里表示：目前，該項(xiàng)目已不再推進(jìn)，他們會致力于將AngularJS逐漸過渡為Angular 2+(https://dzone.com/articles/angular-2-vs-react)。
React已經(jīng)在本領(lǐng)域積累了豐富的經(jīng)驗(yàn)，并對本社區(qū)做出了不少承諾。它通過推行一種所謂“輕量級”的方法，來方便用戶快速上手，而無需投入更多的學(xué)習(xí)精力。
就開發(fā)速度和熟練程度而言，AngularJS憑借著其卓越的CLI，不但能夠加快工作區(qū)和配置工作的改進(jìn)速度，還能夠通過單行代碼(one-line codes)的方式，構(gòu)建出不同的段，以及包含了廣泛內(nèi)容組合的簡潔代碼。
在使用外部代碼庫時，React的速度和效率可能會受到影響。這就迫使ReactJS開發(fā)人員事先選好恰當(dāng)?shù)脑O(shè)計(jì)組件。
由于采用的是虛擬的DOM，因此在ReactJS中無論DOM樹的整體還是部分被改變或調(diào)整，樹的信息結(jié)構(gòu)會按需被更新。也就是說，開發(fā)者對更改的跟蹤和刷新，并不會影響到樹的其他部分。
而使用真實(shí)DOM的AngularJS，則需要查找和識別到底是哪些部分需要更改。當(dāng)然，AngularJS在識別和執(zhí)行更改時，其效率并不會受到限制。

原文標(biāo)題：ReactJS Vs. AngularJS，作者：Sidharth Jain

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】

今天的JavaScript世界中，有一股風(fēng)頭如熱鋒在飛，那就是Angular.js，它在前端開發(fā)界以強(qiáng)大、靈活和愉悅的體驗(yàn)吸引了前端開發(fā)者出現(xiàn)一 рай堂。今天，讓我們一起看看Angular.js的爆款之謎，并探討一下為何這個寵兒在JavaScript中擁有這么高的相信空間。

一、初識Angular.js

Angular.js是一個開源的JavaScript框架，由Google開發(fā)。它主要用于構(gòu)建用戶界面，幫助開發(fā)者以聲明式方法構(gòu)建動態(tài)的用戶界面。Angular.js的設(shè)計(jì)靈活，可以為活躍的WEB應(yīng)用程序添加交互性。

二、Angular.js的特點(diǎn)

雙向數(shù)據(jù)綁定：Angular.js支持雙向數(shù)據(jù)綁定，這為開發(fā)者提供了簡單的方法來以聲明式的方式更新DOM而無需顯式地接觸文檔對象模型 (DOM)。
模塊化：Angular.js具有強(qiáng)大的模塊化系統(tǒng)，可以將代碼組織成模塊，模塊之間可以相互調(diào)用，使得應(yīng)用程序更具有維護(hù)性。
依賴注入：Angular.js依賴注入機(jī)制可以促進(jìn)代碼復(fù)用、可測試性和可維護(hù)性。
直觀的DOM元素操作：Angular.js的API以Java 語言兩屏語法的形式出現(xiàn)，使開發(fā)者可以直觀地操作DOM。

三、angular的理念

Angular.js的核心理念是持續(xù)的創(chuàng)新。Google以技術(shù)升級和創(chuàng)新為ний錄發(fā)達(dá)了這一公司的文化愿景。Angular.js的設(shè)計(jì)追求簡練，只提供了必需的功能和直觀的更新流程，讓開發(fā)者透過Angular的誘之不得。

四、Angular.js的開發(fā)優(yōu)勢

可簡化的HTML風(fēng)格的模板語法：Angular.js開發(fā)者可以使用HTML來聲明式地描述應(yīng)用程序UI，因此開發(fā)者無需在概念上納入JavaScript，也可以跟蹤更少的導(dǎo)航屬性屬性。
快速、高效的開發(fā)：Angular.js的發(fā)展速度非常快，并且外部線程可以抽象或減緩其他組件的執(zhí)行過程。由于Angular.js框架無法創(chuàng)建或修改自我摧毀組件的對象，因此Angular.js性能比其他前端框架更高效。
通過雙向綁定的數(shù)據(jù)流速度可控：Angular.js通過使用雙向數(shù)據(jù)綁

地時間 11 月 4 日，Angular 團(tuán)隊(duì)宣布 Angular 13 發(fā)布。此版本核心更新包括不再支持舊編譯和渲染引擎 View Engine，全面支持新編譯和渲染引擎 lvy，以及不再支持 IE11，除此之外還有包括對 APF 以及 Angular CLI 等方面的更新和修改。

Angular 13 新特性

棄用 View Engine

Angular 13 宣布不再支持 View Engine，同時全面啟用 Ivy，Ivy 是 Angular 下一代編譯和渲染引擎，Angular 在最近的版本中一直支持它。對于決定棄用 View Engine 的原因，Angular 團(tuán)隊(duì)此前曾表示大多數(shù) Angular 開發(fā)人員已轉(zhuǎn)而使用 Ivy。同時根據(jù)谷歌開發(fā)者 Thompson 的說法，此更新意味著“團(tuán)隊(duì)可以期待更快的編譯，因?yàn)椴辉侔獢?shù)據(jù)和摘要文件。”

Angular Package Format (APF) 的更改

刪除了舊的輸出格式，包括來自 APF 的 View Engine 特定元數(shù)據(jù)；
使用最新版本的 APF 構(gòu)建的庫將不再需要使用 ngcc；
更新 APF 以支持 Node Package Exports。

Component API 的更新

在 Angular v13 更改之前，動態(tài)創(chuàng)建組件需要大量樣板代碼。新的 API 消除了將 ComponentFactoryResolver 注入構(gòu)造函數(shù)的需要。 Ivy 創(chuàng)造了使用 ViewContainerRef.createComponent 實(shí)例化組件的機(jī)會，而無需創(chuàng)建關(guān)聯(lián)的工廠。

結(jié)束對 IE11 的支持

結(jié)束 IE11 的支持后：

Angular 可以通過原生的 Web API 使用更現(xiàn)代瀏覽器功能；
可以刪除 IE 特定的 polyfills 和代碼路徑使得應(yīng)用程序更小，加載速度更快；
移除差異加載的需要；
運(yùn)行 ng update 將自動刪除這些特定于 IE 的 polyfills 并在項(xiàng)目遷移期間減少包大小。

需要注意的是，現(xiàn)有項(xiàng)目仍需支持 IE11 用戶的開發(fā)者可繼續(xù)使用 Angular 12，Angular 12 版本將一直維護(hù)到 2022 年 11 月。

Angular CLI 的改進(jìn)

Angular 13 項(xiàng)目中默認(rèn)使用持久構(gòu)建緩存，要啟用此功能，可以在 angular.json 中添加如下配置：

{
 "$schema": "...",
 "cli": {
 "cache": {
 "enabled": true,
 "path": ".cache",
 "environment": "all"
 }
 }
 ...
}

復(fù)制代碼

框架的更改和依賴項(xiàng)更新

使用 ng new 創(chuàng)建的應(yīng)用程序默認(rèn)使用 RxJS 7.4 版本；
使用 RxJS v6.x 的現(xiàn)有應(yīng)用程序必須使用該 npm install rxjs@7.4 命令手動更新，可以在此處閱讀遷移說明；
支持 TypeScript 4.4；

Angular 測試的改進(jìn)

TestBed 現(xiàn)在在每次測試后能更好地銷毀測試模塊和環(huán)境；
DOM 在每次測試后都會被清除。

Angular 組件更新

所有基于 MDC 的組件都經(jīng)過評估，在對?比度、觸摸目標(biāo)、ARIA 等方面滿足更高的 a11y 標(biāo)準(zhǔn)。

可在此處閱讀有關(guān)可訪問性 (a11y) 標(biāo)準(zhǔn)的拉取請求

社區(qū)貢獻(xiàn)

動態(tài)啟用/禁用驗(yàn)證器
取消導(dǎo)航后恢復(fù) history

其他更新

本次版本更新還包括擴(kuò)展對 Adobe Fonts 的支持等，有關(guān)更詳細(xì)的概述可以查看完整更新公告：

更新公告：https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

更新指南：https://update.angular.io/

關(guān)于 Angular

AngularJS 誕生于 2009 年，由 Misko Hevery 等人創(chuàng)建，是一款構(gòu)建用戶界面的前端框架，后為 Google 所收購。AngularJS 是一個應(yīng)用設(shè)計(jì)框架與開發(fā)平臺，使得開發(fā)現(xiàn)代的單頁面應(yīng)用程序（SPAs：Single Page Applications）變得更加容易：

AngularJS 把應(yīng)用程序數(shù)據(jù)綁定到 HTML 元素；
AngularJS 可以克隆和重復(fù) HTML 元素；
AngularJS 可以隱藏和顯示 HTML 元素；
AngularJS 可以在 HTML 元素”背后”添加代碼；
AngularJS 支持輸入驗(yàn)證。

AngularJS 有諸多特性：

MVC；
模塊化與依賴注入；
雙向數(shù)據(jù)綁定；
指令與 UI 控件。

Angular 是 AngularJS 的重寫，Angular2 以后官方命名為 Angular，2.0 以前版本稱為 AngualrJS。AngularJS 是用 JavaScript 編寫，而 Angular 采用 TypeScript 語言編寫，是 ECMAScript 6 的超集。因不能簡單遷移，因此 AngularJS 和 Angular 成為兩個獨(dú)立的框架。

目前，Angular 在前端框架中占據(jù)重要地位，經(jīng)過嚴(yán)格測試已由 Google 和 Microsoft 等公司投入生產(chǎn)使用，相關(guān)線上資源也十分豐富。但是從學(xué)習(xí)角度說，Angular 的學(xué)習(xí)曲線最為陡峭，開發(fā)者需熟悉 TypeScript 才能開展工作，對于新手而言并不是最佳選擇，更適合在團(tuán)隊(duì)中發(fā)揮作用。

在線咨詢

上一篇：10款語音文字互轉(zhuǎn)工具，為了你我找了兩星期
下一篇：如何實(shí)現(xiàn)注入html的中文不顯示亂碼？

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商