【51CTO.com原創(chuàng)稿件】您是否對(duì)當(dāng)前兩款前端開發(fā)框架無從選擇?本文將深入比較并分析 React 和 Angular 哪個(gè)項(xiàng)目更適合您。

在編程領(lǐng)域，Angular 和 React 對(duì)于前端開發(fā)人員來說是目前比較流行的兩款 JavaScript 框架。

2018 年版的 Stack Overflow Developer Survey 認(rèn)為：Angular、React 和 Node.js 是所有軟件工程師所公認(rèn)的三大優(yōu)秀編程框架。

請(qǐng)見：

https://insights.stackoverflow.com/survey/2018/#technology  

無論是從流行程度、架構(gòu)相似度，還是從基于 JavaScript 的角度考慮，這兩種前端框架都有著諸多相似之處。

在本文中，我們將對(duì) React 和 Angular 進(jìn)行深入比較。我們會(huì)從兩者的框架基本特征入手。

當(dāng)然，如果您對(duì)此類話題特別感興趣的話，請(qǐng)參見：

https://www.altexsoft.com/blog/engineering/angularjs-vs-knockout-js-vs-vue-js-vs-backbone-js-which-framework-suits-your-project-best/?utm_source=DZone&utm_medium=referral  

Angular 與 React.js 簡(jiǎn)要介紹

Angular

Angular 是由 Google 提供支持的一種前端框架，它能夠與大多數(shù)常用的代碼編輯器相兼容，它屬于 MEAN stack 的一部分。

請(qǐng)見：

https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-angular-development/#angular%202%20and%20angular%202+  
https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-javascript-full-stack-development/?utm_source=DZone&utm_medium=referral  

而 MEAN stack 是一組免費(fèi)開源的、以 JavaScript 為中心工具集，可被用于構(gòu)建動(dòng)態(tài)網(wǎng)站和 Web 應(yīng)用。

其組件包括：MongoDB(NoSQL 數(shù)據(jù)庫(kù))、Express.js(Web 應(yīng)用框架)、Angular 或 AngularJS(前端框架)、以及 Node.js(服務(wù)器平臺(tái))。

Angular 框架允許開發(fā)人員創(chuàng)建動(dòng)態(tài)的單頁面 Web 應(yīng)用(Single-Page Web Applications，SPA)。

最初版本的 Angular，解決的是將基于 HTML 文檔轉(zhuǎn)換為動(dòng)態(tài)內(nèi)容的問題。

在此，我們將重點(diǎn)關(guān)注其較新的版本 Angular 2+，以及它與 AngularJS 的區(qū)別。

在業(yè)界案例上，Angular 主要被 Forbes、WhatsApp、Instagram、healthcare.gov、HBO、Nike 等組織所使用。

React.js

React.js 是由 Facebook 于 2011 年創(chuàng)建的一種用于構(gòu)建動(dòng)態(tài)用戶界面的開源 JavaScript 庫(kù)。

具體請(qǐng)請(qǐng)見：

https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-reactjs-and-react-native/  

React 基于 JavaScript 和 JSX，而 JSX 是由 Facebook 所開發(fā)的 PHP 擴(kuò)展，它能夠?yàn)榍岸碎_發(fā)創(chuàng)建可重用的 HTML 元素。React 擁有一個(gè)可以被用于移動(dòng)開發(fā)的獨(dú)立跨平臺(tái)框架 React Native。

在業(yè)界案例上，React 主要被 Netflix、PayPal、Uber、Twitter、Udemy、Reddit、Airbnb、Walmart 等組織所使用。

工具集：框架 vs 庫(kù)

有過開發(fā)經(jīng)驗(yàn)的讀者都知道，框架生態(tài)系統(tǒng)定義了工程體驗(yàn)的無縫性。下面，我們來看看 Angular 和 React 的主要特點(diǎn)。

首先，React 并非一個(gè)真正的框架，它實(shí)際上是一個(gè)庫(kù)。所以，它需要與其他的工具和庫(kù)進(jìn)行多次集成。

相比而言，在使用 Angular 時(shí)，您已經(jīng)擁有了用于構(gòu)建應(yīng)用的一切條件。

Angular 提供了如下各種開箱即用(out of the box)的功能：

• RxJS：是一個(gè)異步程序庫(kù)，它通過設(shè)置多個(gè)數(shù)據(jù)交換的通道，來減少資源的消耗。
• RxJS 的主要優(yōu)點(diǎn)是：它能夠獨(dú)立地同步處理事件。不過，伴隨的問題是：雖然 RxJS 可以與許多框架協(xié)同運(yùn)行，但是您必須通過對(duì)庫(kù)的學(xué)習(xí)，以充分利用到 Angular。
• Angular CLI：具有功能強(qiáng)大的命令行界面，可協(xié)助創(chuàng)建應(yīng)用、添加文件、測(cè)試、調(diào)試和部署。
• Dependency injection：該框架將各種組件與依賴關(guān)系相分離，使之同步運(yùn)行;同時(shí)也能夠在不重新配置組件的情況下更改依賴關(guān)系。
• Ivy renderer：作為新一代的 Angular 渲染引擎，Ivy 的性能有了明顯的提升。
• Angular Universal：是一種用于服務(wù)器端渲染的技術(shù)，它能夠快速地渲染出頭一個(gè)應(yīng)用頁面，或是在可能缺乏渲染資源的瀏覽器端設(shè)備(如移動(dòng)設(shè)備)上顯示應(yīng)用。
• Aptana、WebStorm、Sublime Text、Visual Studio Code：都是 Angular 的常用代碼編輯器。
• Jasmine、Karma 和 Protractor：都是在瀏覽器中進(jìn)行端到端測(cè)試與調(diào)試的工具。

React 需要通過多種集成和各種支持工具才能運(yùn)行：

• Redux：是一種狀態(tài)容器，它可以加速 React 在大型應(yīng)用中的運(yùn)行，能夠管理具有多種動(dòng)態(tài)元素的應(yīng)用組件，還可以被用于渲染。

此外，React 用到了更為廣泛的 Redux 工具集，其中包括：Reselect、Redux 的選擇器庫(kù)和 Redux DevTools Profiler Monitor。

• Babel：是一種轉(zhuǎn)換編譯器，它可以將JSX轉(zhuǎn)換為能夠被瀏覽器理解的 JavaScript 應(yīng)用。
• Webpack：由于所有的組件都是用不同的文件編寫而成，因此我們需要將它們捆綁在一起，以便實(shí)現(xiàn)更好的管理。而 Webpack 就是一種公認(rèn)的標(biāo)準(zhǔn)代碼捆綁器。
• React Router：該路由器是一種常被 React 所使用的標(biāo)準(zhǔn) URL 路由庫(kù)。
• 與 Angular 類似：在代碼的選擇方面，您并不受限。其常見的編輯器包括 Visual Studio Code、Atom 和 Sublime Text。
• 與 Angular 不同的是：在 React 中，您無法使用單個(gè)工具去測(cè)試整個(gè)應(yīng)用，而必須使用不同的工具進(jìn)行不同類型的測(cè)試。

如下是 React 與各種工具的配合列表：

• Enzyme 和 Unexpected-react，用于組件測(cè)試。
• Jest 用于 JavaScript 代碼。
• react-testing-library 用于 React DOM 測(cè)試。
• React-unit 用于單元測(cè)試。
• Skin-deep 用于渲染測(cè)試。

由 ReselectDevTools(https://github.com/skortchmark9/reselect-tools)所提供的此類工具集，可以被用于調(diào)試和可視化。

而 React Developer Tools 的 Chrome Extension 與 Firefox Extension，以及 React Sight 也都能可視化顯示狀態(tài)和屬性樹(prop tree)。

這兩種工具都形成了強(qiáng)大的生態(tài)系統(tǒng)。通常情況下，用戶傾向于選擇 React，不過 React 需要 Redux 之類的多種集成來擴(kuò)展其服務(wù)能力。

基于組件的體系結(jié)構(gòu)：兩種工具的可重用與可維護(hù)組件

兩個(gè)框架都具有基于組件的體系結(jié)構(gòu)。這就意味著單個(gè)應(yīng)用可以通過模塊化、內(nèi)聚且可重用的組件，來構(gòu)建出各種用戶界面。

在 Web 開發(fā)中，基于組件的體系結(jié)構(gòu)通常被認(rèn)為比使用其他結(jié)構(gòu)更易于維護(hù)。

它通過創(chuàng)建單獨(dú)的組件來加速開發(fā)的進(jìn)程，并使得開發(fā)人員能夠縮短產(chǎn)品上線的時(shí)間，也能調(diào)整和擴(kuò)展應(yīng)用。

①代碼：TypeScript vs JavaScript(JSX)

Angular 使用 TypeScript 語言(當(dāng)然如果需要的話，您也可以使用 JavaScript)。

TypeScript 是一種適合于大型項(xiàng)目的 JavaScript 超集。它既緊湊，又能夠識(shí)別輸入中的錯(cuò)誤。

TypeScript 的其他優(yōu)點(diǎn)還包括：更好的導(dǎo)航與自動(dòng)完成功能，更快的代碼重構(gòu)。

另外，TypeScript 的可擴(kuò)展性和簡(jiǎn)潔性，也非常適合于企業(yè)規(guī)模的大型項(xiàng)目。

React 使用的是 JavaScript ES6 和 JSX 腳本。JSX 是 JavaScript 的語法擴(kuò)展，被用于簡(jiǎn)化 UI 編碼，并使得 JavaScript 代碼看起來更像 HTML。JSX 不但能夠檢測(cè)各種錯(cuò)誤，還可以保護(hù)代碼。

另外，Babel(https://babeljs.io/)使用 JSX 進(jìn)行瀏覽器編譯。而 Babel 則是一種將代碼轉(zhuǎn)換為可被 Web 瀏覽器讀取的格式編譯器。

雖然 JSX 在語法上幾乎能夠?qū)崿F(xiàn)與 TypeScript 類似的功能，但是一些開發(fā)人員仍認(rèn)為它比較復(fù)雜難學(xué)。

②DOM：真實(shí) vs 虛擬

文檔對(duì)象模型(Document Object Model，DOM)是 HTML、XHTML 或 XML 文檔的編程接口。

它具有一種樹形組織結(jié)構(gòu)，使得腳本能夠動(dòng)態(tài)地與 Web 文檔的內(nèi)容及結(jié)構(gòu)進(jìn)行交互，并對(duì)它們實(shí)現(xiàn)更新。

DOM 有兩種類型：虛擬和真實(shí)。在實(shí)現(xiàn)原理上，即使有一個(gè)元素發(fā)生了變化，傳統(tǒng)的或稱真實(shí)的 DOM 也會(huì)更新整個(gè)樹型結(jié)構(gòu)。

而虛擬的 DOM 則是真實(shí) DOM 的一種映射，因此它只跟蹤變更的部分，僅更新特定元素，而不會(huì)影響整個(gè)樹中的其他部分。

React 使用虛擬的 DOM，而 Angular 則在真實(shí)的 DOM 上運(yùn)行，并使用變更檢測(cè)來查找那些需要更新的組件。

雖然虛擬的 DOM 被認(rèn)為比真正的 DOM 操作起來更為快捷，但是在 Angular 中，由于需要進(jìn)行變更檢測(cè)，因此這兩種方法在性能方面實(shí)際上是相當(dāng)?shù)摹?/p>

③數(shù)據(jù)綁定：雙向 vs 向下(單向)

數(shù)據(jù)綁定是在模型(業(yè)務(wù)邏輯)和視圖(UI)之間同步數(shù)據(jù)的過程。數(shù)據(jù)綁定有單向和雙向兩種基本的實(shí)現(xiàn)方式。而單向與雙向數(shù)據(jù)綁定之間的區(qū)別，就在于模型視圖的更新過程上。

Angular 中的雙向數(shù)據(jù)綁定類似于“模型 - 視圖 - 控制器(Model-View-Controller，MVC)”的體系結(jié)構(gòu),

具體請(qǐng)參見：

https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller  

由于其中的模型和視圖是同步的，因此數(shù)據(jù)的變更會(huì)影響到視圖上，而視圖的更改也會(huì)反過來觸發(fā)數(shù)據(jù)相應(yīng)的變更。

React 則使用單向或向下的數(shù)據(jù)綁定。單向數(shù)據(jù)流不允許子元素在更新時(shí)影響到父元素，因此保證了只有已獲準(zhǔn)的組件才會(huì)發(fā)生更改。

可見，此類數(shù)據(jù)綁定使得代碼更為穩(wěn)定，當(dāng)然也需要通過額外的作業(yè)來同步對(duì)應(yīng)的模型與視圖。畢竟，由于子組件變更所觸發(fā)的父組件配置的更新，需要更多的時(shí)間。

總的說來，React 的單向數(shù)據(jù)綁定更具備可預(yù)測(cè)性，代碼更為穩(wěn)定，調(diào)試也更加容易。而 Angular 中的傳統(tǒng)雙向數(shù)據(jù)綁定，則易于被使用。

④應(yīng)用體積和性能：Angular 略勝一籌

在處理復(fù)雜且動(dòng)態(tài)的應(yīng)用時(shí)，AngularJS 的性能較低。而由于用到了虛擬的 DOM，React 各類應(yīng)用的效率比同等大小的 AngularJS 應(yīng)用要快一些。

然而，根據(jù)來自 freeCodeCamp.org 的 Jacek Schae 研究，新版本的 Angular 比 React + Redux 要略快一些。

具體請(qǐng)參見：

https://medium.freecodecamp.org/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-2018-update-e5760fb4a962  

此外，該研究還表明：Angular 的應(yīng)用體積略小，受測(cè)時(shí)的轉(zhuǎn)換體積(Transfer Size)只有 129 KB，而 React + Redux 則有 193 KB。

⑤預(yù)構(gòu)建的 UI 設(shè)計(jì)元素：Angular Material vs 社區(qū)支持的組件

Angular：隨著材料設(shè)計(jì)(Material Design)語言在 Web 應(yīng)用中流行，更多的工程師受益于其開箱即用的材料工具集。

Angular 擁有預(yù)構(gòu)建的材料設(shè)計(jì)組件。其 Angular Material 能夠?qū)Ρ韱慰丶?、?dǎo)航、布局、按鈕、指示器、彈窗、模塊、以及數(shù)據(jù)表，實(shí)現(xiàn)一系列常見的交互模型。由于各種預(yù)構(gòu)建元素的存在，配置 UI 的速度變得更快。

React：它的大多數(shù) UI 工具都來自于它的社區(qū)。目前，React 門戶網(wǎng)站上的 UI 組件板塊(https://reactjs.org/community/ui-components.html)提供了大量免費(fèi)的和部分收費(fèi)的組件。

您需要安裝 Material-UI 庫(kù)和各種依賴項(xiàng)，才能使用 React 的材料設(shè)計(jì)進(jìn)行構(gòu)建。

此外，您還可能用到由 React 構(gòu)建的 Bootstrap 組件(https://react-bootstrap.github.io/)，以及包含 UI 組件與工具集(https://hackernoon.com/23-best-react-ui-component-libraries-and-frameworks-250a81b2ac42)的其他軟件包。

⑥移動(dòng)可移植性：NativeScript vs React Native

這兩個(gè)框架都附有能讓工程師將現(xiàn)有的 Web 應(yīng)用移植到移動(dòng)應(yīng)用之中的工具。

我們對(duì)NativeScript(Angular)和React Native也進(jìn)行了深入分析和比較。

具體請(qǐng)參見：

https://www.altexsoft.com/blog/engineering/xamarin-vs-react-native-vs-ionic-vs-nativescript-cross-platform-mobile-frameworks-comparison/?utm_source=DZone&utm_medium=referral  

下面是要點(diǎn)簡(jiǎn)述：NativeScript(https://www.nativescript.org/)是一款使用 TypeScript 作為核心語言的跨平臺(tái)移動(dòng)框架。其用戶界面是用 XML 和 CSS 來構(gòu)建的。

開發(fā)人員在從 Web 應(yīng)用處移植業(yè)務(wù)邏輯，并在其 UI 上使用相同的操作技巧時(shí)，該工具允許 iOS 和 Android 平臺(tái)共享大約 90% 的代碼。

NativeScript 背后的理念是：為移動(dòng)設(shè)備編寫單個(gè) UI，并根據(jù)具體的需求為每個(gè)平臺(tái)進(jìn)行微調(diào)。

與使用 WebView 來渲染的混合式跨平臺(tái)解決方案不同，該框架是在 JavaScript 虛擬機(jī)中運(yùn)行各種應(yīng)用，并直接連接到原生的移動(dòng) API 上，從而保證了具有能夠和原生應(yīng)用相媲美的高性能。

React Native(https://facebook.github.io/react-native/)：該 JavaScript 框架是針對(duì)移動(dòng)應(yīng)用的跨平臺(tái)實(shí)現(xiàn)所準(zhǔn)備的，同時(shí)能夠支持從Web處的移植。

與 NativeScript 相比，React Native 采用了略有不同的方法：它鼓勵(lì)其社區(qū)為不同的平臺(tái)編寫單獨(dú)的 UI，并堅(jiān)持“learn once, write everywhere”的方法。

因此，其代碼的共享程度也有 70%。另外，React Native 還擁有類似 NativeScript 的原生 API 渲染功能。

不過它需要構(gòu)建額外的橋式 API 層，并運(yùn)用原生控制器來連接 JavaScript 的 runtime。

總的說來，如果您需要使用同一種業(yè)務(wù)邏輯同時(shí)運(yùn)行 Web 和移動(dòng)應(yīng)用的話，那么這兩種框架都是不錯(cuò)的選擇。

當(dāng)然，NativeScript 更專注于代碼的共享，和產(chǎn)品上線時(shí)間的縮短;而 React Native 則會(huì)用更長(zhǎng)的開發(fā)周期換取最終更貼近的原生觀感。

⑦文檔和廠商支持：文檔不足，需依靠大型社區(qū)

自 2018 年 1 月以來，由于 Google 持續(xù)對(duì) Angular 生態(tài)系統(tǒng)進(jìn)行開發(fā)，他們不但能為該框架提供長(zhǎng)期支持(Long-Term Support，LTS)，還能專注于修復(fù)錯(cuò)誤和積極改進(jìn)。

不過相比其框架的發(fā)展速度，對(duì)應(yīng)的文檔更新則沒有那么的及時(shí)。一些開發(fā)人員對(duì)其 CLI 文檔更新的速度表示了擔(dān)憂。

下圖是旨在方便 Angular 開發(fā)人員使用的一款交互式服務(wù)界面(https://update.angular.io/)，您可以自定義框架的當(dāng)前版本和更新目標(biāo)，以獲取更新內(nèi)容的清單。

由于 AngularJS 的文檔(https://docs.angularjs.org/api)和教程所提供的范圍比 Angular 2+ 更為廣泛，因此受到了開發(fā)人員的稱贊。

而 React 社區(qū)則遇到了與 Angular 類似的文檔問題。由于 React 環(huán)境及其運(yùn)行方式經(jīng)常出現(xiàn)更新，因此在使用 React 時(shí)，您必須為各種變化和不斷的學(xué)習(xí)做好準(zhǔn)備。

雖然 React 已有一些新版本的文檔(請(qǐng)參見：https://reactjs.org/versions/)，但是要跟上所有的變更與集成，卻并非一項(xiàng)簡(jiǎn)單的任務(wù)。

好在其社區(qū)的支持在某種程度上抵消了此類問題。React 擁有大量的開發(fā)人員，他們能夠在專題論壇上時(shí)常分享自己的知識(shí)。

⑧學(xué)習(xí)曲線：Angular 更為陡峭

Angular 的學(xué)習(xí)曲線被認(rèn)為比 React 陡峭一些。Angular 是一款復(fù)雜且冗長(zhǎng)的框架，它能夠通過各種方法去解決某些單個(gè)問題。不過它需要通過許多重復(fù)性的操作，來實(shí)現(xiàn)復(fù)雜的組件管理。

正如我們上面所提到的，該框架一直在不斷地發(fā)展之中，因此開發(fā)人員不得不適應(yīng)其各種變更。

另外，由于 Angular 2+ 使用了 TypeScript 和 RxJS，盡管 TypeScript 接近于 JavaScript，但是用戶仍然需要花上一些時(shí)間去學(xué)習(xí) RxJS。

由于更新頻繁，React 也需要用戶不斷地學(xué)習(xí)。當(dāng)然，如果您已經(jīng)擅長(zhǎng)于使用 JavaScript 的話，則不需要花費(fèi)太多的時(shí)間重新開始。

目前，由于約有 60% 的 React 應(yīng)用構(gòu)建會(huì)用到 Redux，因此 Redux 成了一種必備工具，而 React 學(xué)習(xí)曲線則主要是由 Redux 庫(kù)所決定。

不過，React 也為初學(xué)者提供了各種實(shí)用的教程，具體請(qǐng)參見：

https://reactjs.org/tutorial/tutorial.html  

⑨社區(qū)和接受度：兩者不相上下

React 在 GitHub 上的受歡迎程度略高于 Angular。它擁有 113,719 顆星和 6,467 人關(guān)注;而 Angular 只有 41,978 顆星和 3,267 人關(guān)注。

根據(jù) 2018 年版的 Stack Overflow Developer Survey(如下圖所示)，Angular 的開發(fā)人員占比為 37.6%，而 React 的用戶占比為 28.3%。

值得一提的是，該調(diào)查涵蓋了 AngularJS 和 Angular 2+ 用戶。

有趣的是：Angular 在負(fù)面評(píng)論上也較為領(lǐng)先。根據(jù)同一份調(diào)查顯示，有 45.6% 的開發(fā)人員認(rèn)為 Angular 是最糟糕的框架之一。

當(dāng)然，此類負(fù)面反饋可能受到了許多開發(fā)人員仍在使用 AngularJS，這一客觀事實(shí)的影響，畢竟 AngularJS 比 Angular 2+ 存在更多的問題。而且 Angular 的社區(qū)規(guī)模更為龐大。

相對(duì)而言，React 的數(shù)字就好看一些，只有 30.6% 的專業(yè)開發(fā)人員不愿意使用它。

您會(huì)選擇哪種框架?

綜上所述，Angular 背后的基本理念是：為前端開發(fā)的總體體驗(yàn)提供強(qiáng)大的支持和工具集。

由于擁有 Google 團(tuán)隊(duì)的不斷更新和積極支持，該框架不會(huì)出現(xiàn)“野蠻生長(zhǎng)”。

其背后的工程師們會(huì)努力保護(hù)現(xiàn)有的社區(qū)，并協(xié)助各類開發(fā)人員與公司，從 AngularJS 切換到具有更高性能和更小應(yīng)用體積的 Angular 2+ 上。

同時(shí)，隨著您的應(yīng)用逐漸到達(dá)企業(yè)級(jí)規(guī)模，TypeScript 能夠增加應(yīng)用代碼的可維護(hù)性，因此也就變得愈加重要了。當(dāng)然，這些也會(huì)讓開發(fā)人員面臨陡峭的學(xué)習(xí)曲線。

React 提供了一種更為輕量級(jí)的方案，適合于沒有太多學(xué)習(xí)時(shí)間就需要快速上手的開發(fā)人員。

雖然其代碼庫(kù)并未規(guī)定各種工具集和方法，但是諸如 Redux 之類的常用工具，還是需要您去額外花時(shí)間學(xué)習(xí)的。

而且，由于 React 的性能與 Angular 旗鼓相當(dāng)，因此它對(duì)于開發(fā)人員來說還是頗具吸引力的。

【51CTO原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文作者和出處為51CTO.com】