AngularJs與ReactJS優劣及應用場景分析
優點
AngularJS是一套完整的框架,angular有自帶的資料繫結、render渲染、angularUI庫,過濾器,directive(模板),服務q(defer),http,inject(依賴注入),factory,provider……,等等一系列工具,基本上只要你在做web開發用過的東西,它都有一個。但是這些東西react自身都沒有。
Angularjs的架構清晰,分工明確,擴充套件性良好,model,view,controller誰在什麼時候做什麼事情說的很清楚,angular能夠讓程式設計師真正專注於業務邏輯,而且因為對html侵入不大,非常易於和designer協作。整個框架充滿了DI的思路,耦合性非常低,物件都是被inject的,也就是說每個物件都可以輕易被替換而不影響其他物件。
Angular生產效率高,單向資料流什麼的想法非常好,但是寫起來太麻煩!我只想變更個很簡單的資料還要經過action、dispatcher、reduce、view四步,angular裡一行程式碼就搞定的事情在react裡卻如此麻煩
缺點
效能
雙向資料繫結是一把雙刃劍。隨著元件增加,專案越來越複雜,雙向資料繫結帶來效能問題。
雙向資料繫結是如何影響效能的?在JavaScript(ES5)中,並沒有實現當變數或物件改變時發出通知的功能,Angular的實現方法被叫做“Dirty-checking(髒檢查機制)”,通過跟蹤資料的改變再動態更新使用者介面(UI)。
在Angular的作用域中任何操作的執行都會引發Dirty-checking,隨著繫結數量的增加效能就會越低。
Angular 2.0推翻重做使得目前不宜採用此框架
Angular 1.x版本其實是個比較舊的東西了,現在看來有些理念過時了,比如依賴注入、自己獨特的模組化,這些東西其實在ES6下已經很好地被解決了。
Angular的2.0幾乎是一個推翻重做的框架,估計不會有1.X的upgrade方案。所以如果現在新開始的專案採用Angular的話,會是一個很尷尬的時機。同樣,如此大的改動似乎也反面印證了1.X並不是那麼好。
學習成本高
使用Angular需要學習大量的概念,包括但不限於:
模組
控制器
指令
作用域
模板
鏈式函式
過濾器
依賴注入
React的優缺點
優點
React偉大之處就在於,提出了Virtual Dom這種新穎的思路,並且這種思路衍生出了React Native,有可能會統一Web/Native開發。在效能方面,由於運用了Virtual Dom技術,Reactjs只在呼叫setState的時候會更新dom,而且還是先更新Virtual Dom,然後和實際Dom比較,最後再更新實際Dom。這個過程比起Angularjs的bind方式來說,一是更新dom的次數少,二是更新dom的內容少,速度肯定快
ReactJS更關注UI的元件化,和資料的單向更新,提出了FLUX架構的新概念,現在React可以直接用Js ES6語法了,然後通過webpack編譯成瀏覽器相容的ES5,開發效率上有些優勢.
React Native生成的App不是執行在WebView上,而是系統原生的UI,React通過jsx生成系統原生的UI,iOS和Android的React UI元件還是比較相似的,大量程式碼可以複用
維護UI的狀態,Angular 裡面使用的是 $scope,在 React 裡面使用的是 this.setState。 而 React 的好處在於,它更簡單直觀。所有的狀態改變都只有唯一一個入口 this.setState(),Angular 就比較複雜,不知道背後使用了哪些黑魔法。
同構的JavaScript
單頁面JS應用程式的最大缺陷在於對搜尋引擎的索引有很大限制。React對此有了解決方案。
React可以在伺服器上預渲染應用再發送到客戶端。它可以從預渲染的靜態內容中恢復一樣的記錄到動態應用程式中。
因為搜尋引擎的爬蟲程式依賴的是服務端響應而不是JavaScript的執行,預渲染你的應用有助於搜尋引擎優化。
缺點
React是目標是UI元件,通常可以和其它框架組合使用,目前並不適合單獨做一個完整的框架。React 即使配上 redux 的組合,也不能稱之一個完整的框架,比如你想用Promise化的AJAX?對不起沒有,自己找現成的庫去。而且第三方元件遠遠不如Angular多。目前在大的穩定的專案上採用React的,我也就只知道有Yahoo的Email。React本身只是一個V而已,所以如果是大型專案想要一套完整的框架的話,也許還需要引入Redux和route相關的東西。而Angular在這方面提供的東西比React多多了.