AngularJS和ReactJS對比

孤舟蓑翁發表於2016-04-25

Angular的特點:

優勢:

AngularJS是一套完整的框架,angular有自帶的資料繫結、render渲染、angularUI庫,過濾器,$filter,$directive(模板),$service(服務), $q(defer),$route, $http,$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上手比較容易。

劣勢:

1. 效能 
同樣是TODO MVC的Sample,Angular完全載入用了1.1s(WebPagetest - Visual Comparison)。React只用了0.3s,不得不說,確實挺慢的。。
2. Angular 2.0推翻重做使得目前不宜採用此框架

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

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

 

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是真正的大而全的Framework,它有一套生態體系和思路,基本你按照它的思路往裡面填程式碼就OK。
React是一個簡短有力的library,它只負責解決你某個單一的“痛點”。
開發大專案或者比較正規的專案,建議使用Angular,angular 是最適合CRUD的SPA 單頁面的應用程式。 和 angularUI 一起使用就可以搭建還不錯的web app.
yeoman+bower+gulp可以很快的把架子搭起來,終歸比較簡單實用。
對於移動端,React比Angular更有潛力, reactjs的模組化 + vdom + 搜尋友好, 輕巧高效。
 
 
 
 



 
 
 


 
 








 







 

 
 
 
 

相關文章