者：陳峻 來源：51CTO

【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】

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

一、初識Angular.js

Angular.js是一個開源的JavaScript框架，由Google開發。它主要用于構建用戶界面，幫助開發者以聲明式方法構建動態的用戶界面。Angular.js的設計靈活，可以為活躍的WEB應用程序添加交互性。

二、Angular.js的特點

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

三、angular的理念

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

四、Angular.js的開發優勢

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

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

Angular 13 新特性

棄用 View Engine

Angular 13 宣布不再支持 View Engine，同時全面啟用 Ivy，Ivy 是 Angular 下一代編譯和渲染引擎，Angular 在最近的版本中一直支持它。對于決定棄用 View Engine 的原因，Angular 團隊此前曾表示大多數 Angular 開發人員已轉而使用 Ivy。同時根據谷歌開發者 Thompson 的說法，此更新意味著“團隊可以期待更快的編譯，因為不再包含元數據和摘要文件。”

Angular Package Format (APF) 的更改

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

Component API 的更新

在 Angular v13 更改之前，動態創建組件需要大量樣板代碼。 新的 API 消除了將 ComponentFactoryResolver 注入構造函數的需要。 Ivy 創造了使用 ViewContainerRef.createComponent 實例化組件的機會，而無需創建關聯的工廠。

結束對 IE11 的支持

結束 IE11 的支持后：

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

需要注意的是，現有項目仍需支持 IE11 用戶的開發者可繼續使用 Angular 12，Angular 12 版本將一直維護到 2022 年 11 月 。

Angular CLI 的改進

Angular 13 項目中默認使用持久構建緩存，要啟用此功能，可以在 angular.json 中添加如下配置：

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

復制代碼

框架的更改和依賴項更新

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

Angular 測試的改進

• TestBed 現在在每次測試后能更好地銷毀測試模塊和環境；
• DOM 在每次測試后都會被清除。

Angular 組件更新

• 所有基于 MDC 的組件都經過評估，在對?比度、觸摸目標、ARIA 等方面滿足更高的 a11y 標準。

可在此處閱讀有關可訪問性 (a11y) 標準的拉取請求

社區貢獻

• 動態啟用/禁用驗證器
• 取消導航后恢復 history

其他更新

本次版本更新還包括擴展對 Adobe Fonts 的支持等，有關更詳細的概述可以查看完整更新公告：

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

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

關于 Angular

AngularJS 誕生于 2009 年，由 Misko Hevery 等人創建，是一款構建用戶界面的前端框架，后為 Google 所收購。AngularJS 是一個應用設計框架與開發平臺，使得開發現代的單頁面應用程序（SPAs：Single Page Applications）變得更加容易：

• AngularJS 把應用程序數據綁定到 HTML 元素；
• AngularJS 可以克隆和重復 HTML 元素；
• AngularJS 可以隱藏和顯示 HTML 元素；
• AngularJS 可以在 HTML 元素”背后”添加代碼；
• AngularJS 支持輸入驗證。

AngularJS 有諸多特性：

• MVC；
• 模塊化與依賴注入；
• 雙向數據綁定；
• 指令與 UI 控件。

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

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