【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傳媒 的文章
