【51CTO.com原創稿件】您是否對當前兩款前端開發框架無從選擇?本文將深入比較并分析 React 和 Angular 哪個項目更適合您。

在編程領域，Angular 和 React 對于前端開發人員來說是目前比較流行的兩款 JavaScript 框架。

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

請見：

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

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

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

當然，如果您對此類話題特別感興趣的話，請參見：

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 簡要介紹

Angular

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

請見：

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 是一組免費開源的、以 JavaScript 為中心工具集，可被用于構建動態網站和 Web 應用。

其組件包括：MongoDB(NoSQL 數據庫)、Express.js(Web 應用框架)、Angular 或 AngularJS(前端框架)、以及 Node.js(服務器平臺)。

Angular 框架允許開發人員創建動態的單頁面 Web 應用(Single-Page Web Applications，SPA)。

最初版本的 Angular，解決的是將基于 HTML 文檔轉換為動態內容的問題。

在此，我們將重點關注其較新的版本 Angular 2+，以及它與 AngularJS 的區別。

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

React.js

React.js 是由 Facebook 于 2011 年創建的一種用于構建動態用戶界面的開源 JavaScript 庫。

具體請請見：

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

React 基于 JavaScript 和 JSX，而 JSX 是由 Facebook 所開發的 PHP 擴展，它能夠為前端開發創建可重用的 HTML 元素。React 擁有一個可以被用于移動開發的獨立跨平臺框架 React Native。

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

工具集：框架 vs 庫

有過開發經驗的讀者都知道，框架生態系統定義了工程體驗的無縫性。下面，我們來看看 Angular 和 React 的主要特點。

首先，React 并非一個真正的框架，它實際上是一個庫。所以，它需要與其他的工具和庫進行多次集成。

相比而言，在使用 Angular 時，您已經擁有了用于構建應用的一切條件。

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

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

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

• Redux：是一種狀態容器，它可以加速 React 在大型應用中的運行，能夠管理具有多種動態元素的應用組件，還可以被用于渲染。

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

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

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

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

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

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

這兩種工具都形成了強大的生態系統。通常情況下，用戶傾向于選擇 React，不過 React 需要 Redux 之類的多種集成來擴展其服務能力。

基于組件的體系結構：兩種工具的可重用與可維護組件

兩個框架都具有基于組件的體系結構。這就意味著單個應用可以通過模塊化、內聚且可重用的組件，來構建出各種用戶界面。

在 Web 開發中，基于組件的體系結構通常被認為比使用其他結構更易于維護。

它通過創建單獨的組件來加速開發的進程，并使得開發人員能夠縮短產品上線的時間，也能調整和擴展應用。

①代碼：TypeScript vs JavaScript(JSX)

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

TypeScript 是一種適合于大型項目的 JavaScript 超集。它既緊湊，又能夠識別輸入中的錯誤。

TypeScript 的其他優點還包括：更好的導航與自動完成功能，更快的代碼重構。

另外，TypeScript 的可擴展性和簡潔性，也非常適合于企業規模的大型項目。

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

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

雖然 JSX 在語法上幾乎能夠實現與 TypeScript 類似的功能，但是一些開發人員仍認為它比較復雜難學。

②DOM：真實 vs 虛擬

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

它具有一種樹形組織結構，使得腳本能夠動態地與 Web 文檔的內容及結構進行交互，并對它們實現更新。

DOM 有兩種類型：虛擬和真實。在實現原理上，即使有一個元素發生了變化，傳統的或稱真實的 DOM 也會更新整個樹型結構。

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

React 使用虛擬的 DOM，而 Angular 則在真實的 DOM 上運行，并使用變更檢測來查找那些需要更新的組件。

雖然虛擬的 DOM 被認為比真正的 DOM 操作起來更為快捷，但是在 Angular 中，由于需要進行變更檢測，因此這兩種方法在性能方面實際上是相當的。

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

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

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

具體請參見：

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

由于其中的模型和視圖是同步的，因此數據的變更會影響到視圖上，而視圖的更改也會反過來觸發數據相應的變更。

React 則使用單向或向下的數據綁定。單向數據流不允許子元素在更新時影響到父元素，因此保證了只有已獲準的組件才會發生更改。

可見，此類數據綁定使得代碼更為穩定，當然也需要通過額外的作業來同步對應的模型與視圖。畢竟，由于子組件變更所觸發的父組件配置的更新，需要更多的時間。

總的說來，React 的單向數據綁定更具備可預測性，代碼更為穩定，調試也更加容易。而 Angular 中的傳統雙向數據綁定，則易于被使用。

④應用體積和性能：Angular 略勝一籌

在處理復雜且動態的應用時，AngularJS 的性能較低。而由于用到了虛擬的 DOM，React 各類應用的效率比同等大小的 AngularJS 應用要快一些。

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

具體請參見：

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

此外，該研究還表明：Angular 的應用體積略小，受測時的轉換體積(Transfer Size)只有 129 KB，而 React + Redux 則有 193 KB。

⑤預構建的 UI 設計元素：Angular Material vs 社區支持的組件

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

Angular 擁有預構建的材料設計組件。其 Angular Material 能夠對表單控件、導航、布局、按鈕、指示器、彈窗、模塊、以及數據表，實現一系列常見的交互模型。由于各種預構建元素的存在，配置 UI 的速度變得更快。

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

您需要安裝 Material-UI 庫和各種依賴項，才能使用 React 的材料設計進行構建。

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

⑥移動可移植性：NativeScript vs React Native

這兩個框架都附有能讓工程師將現有的 Web 應用移植到移動應用之中的工具。

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

具體請參見：

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  

下面是要點簡述：NativeScript(https://www.nativescript.org/)是一款使用 TypeScript 作為核心語言的跨平臺移動框架。其用戶界面是用 XML 和 CSS 來構建的。

開發人員在從 Web 應用處移植業務邏輯，并在其 UI 上使用相同的操作技巧時，該工具允許 iOS 和 Android 平臺共享大約 90% 的代碼。

NativeScript 背后的理念是：為移動設備編寫單個 UI，并根據具體的需求為每個平臺進行微調。

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

React Native(https://facebook.github.io/react-native/)：該 JavaScript 框架是針對移動應用的跨平臺實現所準備的，同時能夠支持從Web處的移植。

與 NativeScript 相比，React Native 采用了略有不同的方法：它鼓勵其社區為不同的平臺編寫單獨的 UI，并堅持“learn once, write everywhere”的方法。

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

不過它需要構建額外的橋式 API 層，并運用原生控制器來連接 JavaScript 的 runtime。

總的說來，如果您需要使用同一種業務邏輯同時運行 Web 和移動應用的話，那么這兩種框架都是不錯的選擇。

當然，NativeScript 更專注于代碼的共享，和產品上線時間的縮短;而 React Native 則會用更長的開發周期換取最終更貼近的原生觀感。

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

自 2018 年 1 月以來，由于 Google 持續對 Angular 生態系統進行開發，他們不但能為該框架提供長期支持(Long-Term Support，LTS)，還能專注于修復錯誤和積極改進。

不過相比其框架的發展速度，對應的文檔更新則沒有那么的及時。一些開發人員對其 CLI 文檔更新的速度表示了擔憂。

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

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

而 React 社區則遇到了與 Angular 類似的文檔問題。由于 React 環境及其運行方式經常出現更新，因此在使用 React 時，您必須為各種變化和不斷的學習做好準備。

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

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

⑧學習曲線：Angular 更為陡峭

Angular 的學習曲線被認為比 React 陡峭一些。Angular 是一款復雜且冗長的框架，它能夠通過各種方法去解決某些單個問題。不過它需要通過許多重復性的操作，來實現復雜的組件管理。

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

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

由于更新頻繁，React 也需要用戶不斷地學習。當然，如果您已經擅長于使用 JavaScript 的話，則不需要花費太多的時間重新開始。

目前，由于約有 60% 的 React 應用構建會用到 Redux，因此 Redux 成了一種必備工具，而 React 學習曲線則主要是由 Redux 庫所決定。

不過，React 也為初學者提供了各種實用的教程，具體請參見：

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

⑨社區和接受度：兩者不相上下

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

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

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

有趣的是：Angular 在負面評論上也較為領先。根據同一份調查顯示，有 45.6% 的開發人員認為 Angular 是最糟糕的框架之一。

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

相對而言，React 的數字就好看一些，只有 30.6% 的專業開發人員不愿意使用它。

您會選擇哪種框架?

綜上所述，Angular 背后的基本理念是：為前端開發的總體體驗提供強大的支持和工具集。

由于擁有 Google 團隊的不斷更新和積極支持，該框架不會出現“野蠻生長”。

其背后的工程師們會努力保護現有的社區，并協助各類開發人員與公司，從 AngularJS 切換到具有更高性能和更小應用體積的 Angular 2+ 上。

同時，隨著您的應用逐漸到達企業級規模，TypeScript 能夠增加應用代碼的可維護性，因此也就變得愈加重要了。當然，這些也會讓開發人員面臨陡峭的學習曲線。

React 提供了一種更為輕量級的方案，適合于沒有太多學習時間就需要快速上手的開發人員。

雖然其代碼庫并未規定各種工具集和方法，但是諸如 Redux 之類的常用工具，還是需要您去額外花時間學習的。

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

【51CTO原創稿件，合作站點轉載請注明原文作者和出處為51CTO.com】