Angular 2與React比較

Angular 2與React的選擇其實只是一種風格偏好。React專註於渲染速度且能夠在用戶端或原生應用內處理複雜的UI設計，而Angular 2則更具開發普適性。它既能夠引導我們逐步構建自己的應用，同時也提供一定的表現力及可複用UI設計機制。
ReactJS快速回顧

ReactJS是一套JavaScript Web庫，由Facebook打造而成且主要用於構建高效能及響應式使用者介面。React負責解決其它JavaScript架構所面對的一大常見難題，即對大規模資料集的處理。能夠使用虛擬DOM並在發生變更時利用補丁安裝機制只對DOM中的dirty部分進行重新渲染，React得以實現遠超其它架構的速度表現。 優勢:

1.React偉大之處就在於，提出了Virtual Dom這種新穎的思路，並且這種思路衍生出了React Native，有可能會統一Web/Native開發。在效能方面，由於運用了Virtual Dom技術，Reactjs只在調用setState的時候會更新dom，而且還是先更新Virtual Dom，然後和實際Dom比較，最後再更新實際Dom。這個過程比起Angularjs的bind方式來說，一是更新dom的次數少，二是更新dom的內容少，速度肯定快。

2.ReactJS更關注UI的組件化，和資料的單向更新，提出了FLUX架構的新概念，現在React可以直接用Js ES6文法了，然後通過webpack編譯成瀏覽器安全色的ES5，開發效率上有些優勢.
React Native產生的App不是運行在WebView上，而是系統原生的UI，React通過jsx產生系統原生的UI，iOS和Android的React UI組件還是比較相似的，大量代碼可以複用

3.維護UI的狀態,Angular 裡面使用的是 $scope，在 React 裡面使用的是 this.setState。 而 React 的好處在於，它更簡單直觀。所有的狀態改變都只有唯一一個入口 this.setState()，Angular 就比較複雜，不知道背後使用了哪些黑魔法。 劣勢:

React是目標是UI組件，通常可以和其它架構組合使用，目前並不適合單獨做一個完整的架構。React 即使配上 Flux 的組合，也不能稱之一個完整的架構，比如你想用Promise化的AJAX。對不起沒有，自己找現成的庫去。而且第三方組件遠遠不如Angular多。目前在大的穩定的項目上採用React的，我也就只知道有Yahoo的Email。React本身只是一個V而已，所以如果是大型項目想要一套完整的架構的話，也許還需要引入Flux和route相關的東西。而Angular在這方面提供的東西比React多多了. Angular 2滿載強化機制

Angular 2相較於Angular 1迎來一系列強化。首先，Angular 2高度關注建立可複用的前端組件。儘管Angular 1在一定程度上也能實現同樣的效果，但該架構的新版本解決了大量影響利用性的難題，例如對$scope與控制器的依賴性。其指令亦得到顯著簡化，使得Angular 2代碼較前代更易於輸入及閱讀。Angular 2還考慮到與TypeScript的協作需求，消除了大量用於保證型別安全的代碼。再加上眾多效能與架構改進，Angular 2確實給人煥然一新之感。 優勢:

AngularJS是一套完整的架構，angular有內建的資料繫結、render渲染、angularUI庫,過濾器, filter, filter,directive(模板), service(服務), service(服務), q(defer), route, route, http， cookie, cookie, inject(依賴注入),factory,provider……，等等一系列工具，基本上只要你在做web開發用過的東西，它都有一個。但是這些東西react自身都沒有。

Angularjs的架構清晰，分工明確，擴充性良好，model，view，controller誰在什麼時候做什麼事情說的很清楚，angular能夠讓程式員真正專註於商務邏輯，對js能力要求也不高（基本上只需要寫商務邏輯，實在用不上那些進階的js技巧和知識呀），而且因為對html侵入不大，非常易於和designer協作。整個架構充滿了DI的思路，耦合性非常低，對象都是被inject的，也就是說每個對象都可以輕易被替換而不影響其他對象。

Angular生產效率高，單向資料流什麼的想法非常好，但是寫起來太麻煩。我只想變更個很簡單的資料還要經過action、dispatcher、store、view四步，angular裡一行代碼就搞定的事情在react裡卻如此麻煩

Angular的背後是Google，所以社區基礎是不用擔心的，整個生態也已經是非常的完整了，從最基本的Tutorial到StackOverflow的問題數到架構本身的剖析都非常多，Angular上手比較容易。 劣勢: 效能
同樣是TODO MVC的Sample，Angular完全載入用了1.1s（WebPagetest - Visual Comparison）。React只用了0.3s,不得不說，確實挺慢的。。 Angular 2.0推翻重做使得目前不宜採用此架構

Angular 1.x版本其實是個比較舊的東西了，現在看來有些理念過時了，比如依賴注入、自己獨特的模組化，這些東西其實在ES6下已經很好地被解決了。

Angular的2.0幾乎是一個推翻重做的架構，估計不會有1.X的upgrade方案。所以如果現在新開始的項目採用Angular的話，會是一個很尷尬的時機。同樣，如此大的改動似乎也反面印證了1.X並不是那麼好。 注意事項

值得強調的是，React與Angular（任意版本）之間的比較其實並不對等。Angular是一套前端架構，負責為應用用戶端提供完整架構，並允許我們將用戶端代碼作為強大的功能套件。而React則是一套庫，其提供的功能並不豐富——其主要作用是充當完整項目的組成部分，而非主導整體代碼結構。當然，二者之間也存在著相當程度的相似性，而這也正是此次比較存在的理由所在。 架構

如上所述，React是一套用於建立響應式模板的JavaScript庫。因此，React並不真正關注架構——它更像是一款作用於應用內大型用戶端代碼中的工具。

另一方面，Angular 2則以架構的角色指明了前端代碼的“正確設計方式”。其專註於組件與型別安全，允許大家將注意力集中在代碼本身，並在強調複用性與封裝的同時建立物件導向前端。

從這個角度來看，React與Angular 2實在沒什麼可比性——React適合那些希望以更為靈活的方式構建代碼架構的朋友，而Angular 2則屬於應用前端的整體架構選項。因此，誰能更好地適應應用設計模式的需求，誰就將在這一環節中勝出。 模板

兩套方案皆提供模板工具，但採用的範本管理員方式則區別很大。React以JSX為基礎構建模板對象，大家可以構建內聯模板並將所有模板代碼進行集中儲存。Angular 2則以物理方式將用於驅動應用的JavaScript與作為渲染對象的HTML加以分離。

不過由於更關注組件化且能夠與TypeScript順暢協作，因此大家往往能夠憑藉Angular 1.x實現更出色的複用性與靈活性。總而言之，在選定了理想的模式之後，具體選擇將由美學與準系統決定——React模板更緊湊且渲染速度更快，而Angular 2組件則更具複用性，並通過無處不在的雙向資料繫結簡化應用對象管理流程。 原生支援

Angular 2與React有著不同的底層目標，這也意味著二者在支援原生裝置代碼時有著截然不同的表現。Angular 2團隊決定專註於架構本身，並將裝置可運行代碼方面的工作交給其它供應商。而React生態系統則推出了React Native——這套架構能夠將React代碼翻譯為原生應用體驗，從而帶來遠超傳統混合型Web應用的效能表現。

再次強調，選擇“正確的”方案才是理想的思維方式。如果大家希望自己的行動裝置 App體驗快如閃電，那麼React將直接勝出。但如果大家希望採用組件化程度更高的應用架構，同時願意犧牲部分效能以提升代碼結構一致性，那麼Angular 2與Ionic等架構的結合則將成為正確答案。 總結

Angular是真正的大而全的Framework，它有一套生態體系和思路，基本你按照它的思路往裡面填代碼就OK。
React是一個簡短有力的library，它只負責解決你某個單一的“痛點”。
開發大項目或者比較正規的項目,建議使用Angular，angular 是最適合CRUD的SPA 單頁面的應用程式。 和 angularUI 一起使用就可以搭建還不錯的web app.
yeoman+bower+gulp可以很快的把架子搭起來,終歸比較簡單實用。
對於移動端，React比Angular更有潛力, reactjs的模組化 + vdom + 搜尋友好, 輕巧高效。
Angular 2與React的選擇其實只是一種風格偏好。React專註於渲染速度且能夠在用戶端或原生應用內處理複雜的UI設計，而Angular 2則更具開發普適性。它既能夠引導我們逐步構建自己的應用，同時也提供一定的表現力及可複用UI設計機制。

最終決定取決於應用設計目標及Team Dev的普遍意見。大型複雜使用者介面外加出色效能是React的王牌，開發流程與代碼架構則是Angular 2的主場。總之，只要能夠充分考量實際需求與定位，大家一定能做出正確的選擇。 一些AngularJS相關文章連結： AngularJS權威教程 清晰PDF版 帶你走近AngularJS - 準系統介紹 帶你走近AngularJS - 體驗指令執行個體 帶你走近AngularJS - 建立自訂指令 如何在 AngularJS 中對控制器進行單元測試 在 AngularJS 應用中通過 JSON 檔案來設定狀態 AngularJS 之 Factory vs Service vs Provider AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 架構提交資料