Angular vs React 最全面深刻對比

現在，Angular和React這兩個JavaScript框架可謂紅的發紫，同時針對這兩個框架的選擇變成了當下最容易被問及或者被架構設計者考慮的問題，本文或許沒法告訴你哪一個框架更優秀，但儘可能從更多的角度去比較二者，儘量的爲你在選擇時提供更多的參考意見。

選擇的方法

在選擇以前，咱們嘗試帶着一些問題去審視你將要選擇的框架（或者是任何工具），嘗試用這些問題的答案來幫助咱們更加了解框架，也更加讓選擇變得更容易

框架自己的問題：

• 是否成熟？誰在背後支持呢？
• 具有的功能？
• 採用什麼架構和模式？
• 生態系統是否豐富？

須要自我反思的問題：

• 我和個人團隊可否輕鬆學習並掌握？
• 是否適合個人項目？
• 開發體驗是否足夠好？

嚴格說來，Angular和React的比較是不公平的，由於Angular是一個功能豐富的框架，而React是一個UI的組件庫，因此咱們在接下來的分析中會將一些常常和React在一塊兒使用的類庫放在一塊兒討論。

OK，開始… …

 

成熟度

做爲一名成熟的開發人員或者是可以決定架構及技術走向的人員，一項必備的技能就是可以在工做和項目中平衡成熟技術與最前沿框架之間的關係，既能保持人員及技術的前進，又能保證項目或產品的交付質量，因此，必須當心如下可能的風險：

• 該框架多是不穩定的。
• 主要的開發方（贊助方）可能會忽然的放棄。
• 若是你須要幫助，可能沒有大型知識庫或社區可用。

幸虧，不管是Angular仍是React，彷佛都不須要擔憂以上的風險

React

React由Facebook開發和維護，用於本身的產品，包括Instagram和WhatsApp。如今已經有大約三年半的時間。 它也是GitHub 最受歡迎的項目之一。

Angular

Angular由Google進行維護，並用於Google 的Adwords 和Fiber項目。既然AdWords是Goolge重要的吸金利器，天然Angular不太可能忽然夭折。

 

功能

如前文提到的，Angular自己會比React自帶不少的功能，固然，更豐富的功能對於一個框架來講，是優勢也有多是缺點。兩個框架都具有一些相同的核心功能：組件化、數據綁定以及平臺無關的Render機制。

Angular

Angular除了提供一些須要最新瀏覽器支持的功能外，同時提供如下標準功能：

• 依賴注入
• 模板
• 路由（@angular/router）
• AJAX（@angular/http）
• 表單（@angular/forms）
• 組件化CSS封裝
• XSS保護
• 單元測試工具

功能豐富的好處就是你不須要額外費精力去挑選第三方的類庫，然而，這也一樣讓你沒得選擇，即便你並不須要這些功能（最新發布的Angular4貌似已經意識到了這個問題）

React

相對Angular，React自己提供的功能就相對「簡約「：

• 無依賴注入
• 使用JSX代替傳統的HTML Templates
• XSS保護
• 單元測試工具

相對Angular，React讓你有很大的自由度去挑選第三方的類庫，好比：

• 路由（React-router）
• AJAX（Fetch or axios）
• 各類CSS封裝（詳見：https://github.com/MicheleBertoli/css-in-js）
• 更強大的單元測試（Enzyme）

能夠根據本身的需求很自由（或者定製）須要的類庫，同時這些第三方的類庫都是很容易學習的。

 

語言與模式

隨着兩個框架的流行，一些概念和技術也隨着浮出，若是想真正的用好或者說掌握這兩個框架，瞭解隨之而出的這些概念或者技術是很是必要的：

React

JSX

JSX是一個頗有爭議的話題：有些人喜歡它，而其餘人認爲這是一個很大的退步。React決定使用一種相似XML的語言在組件中把標記和代碼結合起來，直接在JavaScript代碼中編寫HTML標記。

儘管混合標記與JavaScript的話題多是有爭議的，但它具備無可爭議的優勢：靜態分析。若是在JSX標記中發生錯誤，編譯器會當即報錯而不是留待運行時出現莫名其妙的問題。這有助於開發人員快速排查錯誤以及避免其它愚蠢的錯誤，好比拼寫錯誤。

Flow

Flow是由Facebook開發的JavaScript類型檢查工具。它能夠解析代碼並檢查常見的類型錯誤，如隱式轉換或取消引用。

與相似目的的TypeScript不一樣，它不須要開發人員遷移到新語言，併爲你的代碼註釋類型檢查工做。在流程中，類型註釋是可選的，可用於向分析器提供其餘提示。若是你想使用靜態代碼分析，同時避免重寫現有的代碼，Flow是一個很好的選擇。

Redux

Redux是一個能夠以清晰的方式管理狀態變化的庫。它的靈感來自Flux，可是有一些簡化。Redux的關鍵思想在於，應用程序的整個狀態由單個對象表示，該對象由名爲reducers的函數進行突變。Reducers自己是純功能，與組件分開實現。這樣能夠更好地分離問題和測試。

若是你正在開展一個簡單的項目，那麼引入Redux可能有點得不償失，但對於中等和大型項目來講，這是一個很好的選擇。

Angular

TypeScript

TypeScript是一種基於JavaScript開發並由Microsoft開發的新語言。它是JavaScript ES2015的超集，幷包含較新版本的語言的功能。你可使用它而不是Babel來編寫最早進的JavaScript。它還能夠經過使用註釋和類型推斷的組合來靜態分析你的代碼。

還有一個更微妙的好處。TypeScript受到Java和.NET的嚴重影響，因此若是你的開發人員有這些語言之一的背景知識，他們可能會比簡單的JavaScript更容易找到TypeScript（請注意咱們如何從工具切換到你的我的環境）。 雖然Angular是第一個積極採用TypeScript的主要框架，但它也能夠與React一塊兒使用。

RxJS

RxJS是一個響應式編程庫，能夠靈活地處理異步操做和事件。它是將Observer和Iterator模式與功能編程相結合的組合。RxJS容許您將任何東西視爲連續的流，並對其進行各類操做，例如映射，過濾，拆分或合併。

該類庫已被Angular採用其HTTP模塊以及一些內部使用。當您執行HTTP請求時，它返回一個Observable，而不是一般的Promise。 雖然這個類庫很是強大，但也很複雜。要掌握它，您將須要瞭解不一樣類型的「可觀察」，「主題」以及大約一百種方法和操做符 。

當您使用連續數據流（如Web套接字）工做不少的狀況下，RxJS很是有用，可是對於其餘任何東西來講彷佛過於複雜。 不管如何，當你使用Angular時，您至少應該瞭解RxJS的基本知識。

 

TypeScript能夠說是Angular中很是重要的特色，首先他給本來C#/Java開發人員提供了很容易進入前端的機會，另外TypeScript也想比JavaScript更容易理解，尤爲是代碼量或者業務複雜的項目中。

 

生態系統

開源框架這麼流行的緣由之一，就是圍繞着他們，會有無數的工具、類庫、擴展來支撐整個框架，有時，這些工具可能比框架自己更有幫助，接下來咱們就來看看相關這兩個框架最流行的工具和類庫。

Angular

Angular CLI

現代框架的流行趨勢是使用CLI工具，能夠幫助您引導項目，而無需自行配置構建。Angular有Angular CLI。它容許您僅使用幾個命令來生成和運行項目。負責構建應用程序的全部腳本，啓動開發服務器和運行測試都會在node_modules中隱藏。您也能夠在開發過程當中使用它來生成新的代碼。這使得新項目的設置變得垂手可得。

Ionic 2

Ionic 2 是開發混合移動應用程序的流行框架的新版本。它提供了一個與Angular 2完美集成的Cordova容器，以及一個漂亮的材料組件庫。 使用它，您能夠輕鬆地設置和構建移動應用程序。 若是您喜歡使用混合應用程序，那麼這是一個不錯的選擇。

Material design components

若是您熱衷於設計Material，您會很高興聽到Angular有一個Material組件庫。

Angular universal

Angular universal是一個種子項目，可用於建立支持服務器端渲染的項目。

@ngrx/store

@ngrx/store是由Redux啓發的Angular的狀態管理庫，基於由pure reducer進行突變的狀態。它與RxJS的集成容許您利用推送更改檢測策略得到更好的性能。

關於更多的有關Angular相關類庫和工具能夠參考：the Awesome Angular list

React

Create React App

Create-react-app 是一個CLI工具，用於快速建立新的React應用。能夠生成一個新的工程，啓動開發服務器並建立綁定。Jest（來自Facebook的一個單元測試工具）也同時集成在Create-react-app內部，更方便的讓咱們進行單元測試。

React Native

React Native 是Facebook開發的基於React在移動端的開發平臺，藉助此平臺，React能夠建立真正的Native的UI。提供了一系列標準的React組件用於綁定。同時容許建立本身的組件並與Objective-C、Java或者Swift的代碼進行綁定。

Material UI

還有一個可用於React的Material Design Component。與Angular的版本相比，這個版本比較成熟，可使用更普遍的組件。

Next.js

Next.js 是React應用程序的服務器端呈現的框架。它提供了一種在服務器上徹底或部分呈現應用程序的靈活方式，將結果返回給客戶端並在瀏覽器中繼續。它試圖使建立通用應用程序的複雜任務儘量簡單，因此設置被設計爲儘量簡單，最少許的新原語和對項目結構的要求。

MobX

MobX 是用於管理應用程序狀態的替代庫。不像Redux那樣將狀態保存在一個不可變的存儲中，它鼓勵您僅存儲最低限度的必需狀態，並從其中獲取剩餘的數據。它提供了一組裝飾器來定義可觀察和觀察者，並將反應邏輯引入到你的狀態管理代碼中。

Storybook

Storybook是React的組件開發環境。它容許您快速設置單獨的應用程序來顯示您的組件。除此以外，它提供了許多附加組件來記錄，開發，測試和設計您的組件。

一樣的，能夠從Awesome React list瞭解更多的工具和類庫。

 

學習曲線與開發體驗

選擇新技術的一個重要標準是學習它是否容易。固然，答案取決於普遍的因素，例如您之前的經驗和對相關概念和模式的廣泛瞭解。若是咱們假設你已經知道ES6 +，構建工具和全部這些，咱們來看看你還須要瞭解什麼。

React

有了React，你會遇到的第一件事就是JSX。對於一些開發人員來講彷佛剛開始會以爲很彆扭，但它並無增長複雜性; 只是表達式，實際上仍是JavaScript，還有一個特殊的相似HTML的語法。您還須要學習如何編寫組件，使用props進行配置和管理內部狀態。不須要學習任何新的邏輯結構或循環，由於全部這些都是純JavaScript。

官方教程是開始學習React的好地方。一旦完成了官方教程，接下來應該熟悉並掌握React的路由機制 。React Router v4版本可能稍微複雜和很是規，但也不準太過擔憂。

使用Redux將須要一個範式的轉變，免費入門Redux視頻課程能夠快速介紹核心概念。根據項目的大小和複雜性，找到並學習一些額外的庫，這多是棘手的一部分，但以後，一切都應該變得順利。

其實，React的上手很是容易，最難的部分多是如何挑選合適你項目或產品的類庫。

Angular

Angular將向您介紹比React更多的新概念。首先，您須要使用TypeScript。對於具備靜態類型語言（如Java或.NET）經驗的開發人員，這可能比JavaScript更容易理解，但對於純JavaScript開發人員，這可能須要一些額外的學習。

框架自己豐富的技術主題能夠從諸如模塊，依賴注入、裝飾器、組件、服務、管道、模板和指令等基礎開始，到更高級的主題，如更改檢測，區域，AoT編譯和RxJS。這些都在文檔中。RxJS是一個很重的話題，在官方網站上有詳細描述。雖然在基本功能層面上使用起來相對容易，但在轉到高級應用時會變得更加複雜。

總而言之，咱們注意到Angular的進入壁壘高於React。新概念的數量絕對令新來者感到困惑。又是碰到一些問題還不得不Google後才能找到答案，可是，就像以前說的，是否合適，仍是取決於更多的因素。

 

前景

Angular

就在2017年的3月，Angular已經發布了4.0的版本（兼容2.x版本），關於爲何是4.0，官方的解釋是由於Router這個主要核心組件的版本已是4.0.0，若是Angular還用3.0會引發混淆，以下圖：

 

4.0版本中主要是大幅度的減少了代碼體積（60%），同時提升了加載的速度（肉眼可查的程度），同時報錯的信息更清晰了。根據官方的文檔，Angular的版本升級會以比較快的速度進行迭代

 

不管是大版本的6個月迭代，仍是每週的hotfix，能看出Angular團隊想用快速升級的策略迅速佔領市場。

React

反觀React的升級卻是很是謹慎的，這從最新的v15.5.0的發佈新聞博客中就能看出

不過，從博客中能看到React即將迎來v16，不知道整個重寫的React會給咱們帶來什麼驚喜。不過，須要提一下的是Facebook已經與去年末的時候發佈了React VR，有興趣的同窗能夠圍觀如下。

 

契合度

不管是哪一個框架，適合本身的纔是「好「的，因此須要你從項目（產品）自己的角度去衡量，如下的問題列表可能並不全面，但至少能夠做爲一個開始

• 該項目（產品）有多大規模？
• 要維護多久？
• 全部的功能是提早清楚地定義仍是靈活的改變？
• 域模型和業務邏輯是否複雜？
• 你定位什麼平臺？ Web，手機，桌面？
• 你須要服務器端渲染嗎？ SEO重要嗎？
• 你會處理不少實時事件流？
• 你的團隊有多大？
• 你的開發人員有多豐富，他們的背景是什麼？
• 是否有任何您想要使用的現成的組件庫？

若是您正在開展一個大型項目，並但願儘量減小錯誤選擇的風險，請考慮先建立一個demo用於驗證產品概念。選擇項目的一些主要功能，並嘗試使用其中一個框架以簡單的方式實現它們。 Demo一般不會（也不該該）花費不少時間，但會提供一些寶貴的經驗，能夠幫助您驗證關鍵的技術要求。若是對結果感到滿意，能夠繼續全面構建。若是沒有，會給你充分的時間從新選擇。

 

總結

經過以上的6個方面對比了React和Angular這兩個目前最熱的前端框架，但願能對你在選擇時提供一些參考。可是否真的是合適本身的，或許真的須要用過才知道 😊 Good luck~~~

原文連接：https://www.sitepoint.com/react-vs-angular/

http://www.cnblogs.com/powertoolsteam/p/angular_react.html