請問 React 和 Angular 各有什麼優缺點，各自又適合什麼開發場景？

01-02

@空空我算是用過React沒用過Angular，所以正好補充下。

首先我現在的經驗是Angular和Ember都只玩過TODOMVC的tutorial，React的話自己正在寫一個Chrome的App和公司的一個小項目。

最近正好有個新項目在評估用Angular，Ember還是React(+Flux)，我隨便談一點自己的淺見。

Angular.js

首先Angular的背後是Google（難道這就是官網被牆的原因？），所以社區基礎是不用擔心的，整個生態也已經是非常的完整了，從最基本的Tutorial到StackOverflow的問題數到框架本身的剖析都有非常非常多，所以從這個角度看起來Angular應該算是上手比較容易的。

不過Angular目前的問題看起來也很明顯

1. 性能

同樣是TODOMVC的Sample，Angular完全載入用了1.1s（WebPagetest - Visual Comparison）。目前我用到的基於Angular的就是Kibana，不得不說，確實挺慢的。。

2. Angular 2.0

Angular的2.0幾乎是一個推翻重做的框架，估計不會有1.X的upgrade方案。所以如果現在新開始的項目採用Angular的話，會是一個很尷尬的時機。同樣，如此大的改動似乎也反面印證了1.X並不是那麼好。這篇文章推薦去看看Why you should not use AngularJs

React.js

React很大的特點就是「輕」，再加上VDOM這個很好的idea讓React非常非常快（在上面那個測試裡面0.3s左右就載入完畢）。另外React和Angular一個很大的不同就是React採用的是one-way data flow。

React的缺點嘛，大概就是現在還太新了很難說將來有沒有大的API變化，目前在大的穩定的項目上採用React的，我也就只知道有Yahoo的Email。所以現在很少有批評React的聲音也許不是他真的就沒有坑，而是那些坑還沒有被踩出來而已。

還有就是React本身只是一個V而已，所以如果是大型項目想要一套完整的框架的話，也許還需要引入Flux和routing相關的東西。React的routing我沒有研究過，但是Flux的話已經有出現一些批評的聲音了。

總結

Angular是真正的大而全的framework，他有自己一套思路，基本你follow這個思路往裡面填代碼就OK。

React是一個簡短有力的library，他只負責解決你某個單一的「痛點」。

對於 Angular 沒有在項目中使用過, 只用過同為 MVVM 的 Vue.

我花了很多時間在 React 上, 可以看下邊兩個網站相關的內容

React 中文微博: http://weibo.com/reactchina

React 中文論壇 https://react-china.org/

Angular 和 React 相同的是 Model Driven View 的套路, 自動維護 View, 減少手工狀態維護.

把兩者都當作是對 Backbone MVP 模式的改進的話, 上邊這一點差不多的.

不同的地方是 React 採用的方案有點像函數式的做法, Component, Immutable data 等等

更著重於將 DOM 封裝可以相互組合的 Component, 並且將 DOM 操作抽象為狀態的改變.

這樣抽象之後, 學習和編寫複雜應用的成本降下來很多

React 的問題主要在它實現功能近似與 jQuery 的 DOM 操作和事件監聽,

要寫完整的應用需要 MVC, 對 React 來說就是後來發布的 Flux 模型,

而 Flux 並不是完整的一個框架, 只是 Facebook 發布的一套架構體系

所以要寫完整的大應用估計還有不少坑要淌過去.. 在這方面 Angular 東西多多了.

react不是框架，可以在這裡看到他的介紹。 React | Why did we build React?

所以這兩者不適合在框架這個層面比較。

angular 是MV* 框架, react是用來構建可重複使用的UI組件的，可以看成是個提供工具的library。

react 可以和 angular 的 directive做比較。這樣比較的話， react是比angular directive 在組建UI上更powerful的。

angular 是最適合CRUD的SPA 單頁面的應用程序。和 angularUI 一起使用就可以搭建還不錯的web app.

要真正理解react和angular 還要對比使用才可見一斑。可以參見這個博客, 這個博主把react tutorial裡面的一個例子用angular重新寫出來了

Facebook』s New React JavaScript Library Tutorial Rewritten in AngularJS

這個angular 寫的源代碼在這裡 Edit fiddle - JSFiddle

原來的tutorial 用 react 寫在這裡在這裡，

React | Tutorial

這個tutorial 的源代碼在這裡 petehunt/react-tutorial 路 GitHub

我覺得兩者比較區別還是非常明顯的， angular 從 MV* 這個角度看很清晰。我沒使用過react, 所以可能對他的好處看不太出來。就這個例子來講，我會直接用angular, 不會考慮使用 react. 希望有用過react的業界其他人士補充一下。

題目太大了。

做界面，其實是在和狀態打交道。你點擊一個按鈕，出現一個下拉菜單，這裡界面的狀態從下拉菜單隱藏變到了下拉菜單顯示，你可以用 { dropdown: true/false } 來表示這個狀態。前面這個對象在 angular 裡面就是 $scope，在 react 裡面就是 this.state。這裡是兩者相思的地方，維護背後的狀態，界面能自動更新。而 react 的好處在於，它夠簡單直觀。所有的狀態改變都只有唯一一個入口 this.setState()，angular 就太複雜，我搞不清狀態是在哪改變了，也不知道它背後都用了哪些黑魔法。

如果做應用系統，angular的生態環境已經成熟 yeoman bower gulp可以很快的把架子搭起來

如果做互聯網前端，reactjs的模塊化 + vdom + 搜索友好可能就更合適

前兩個月剛剛完成一個angular的項目，感觸就是angular能夠讓程序員真正專註於業務邏輯，對js能力要求也不高（基本上只需要寫業務邏輯，實在用不上那些高級的js技巧和知識呀），而且因為對html侵入不大，非常易於和designer協作。

====2015/06追加=========

AngularJS 有沒有缺點？MVVM 框架中有比它更好的嗎？ - 小豬的回答

React isn"t an MVC framework.

reactjs和angularjs在某種程度上可以看出fb和google兩家公司的文化

facebook喜歡獨立，小巧，快速，創新。

拋開flux,react route不談，reactjs作為view本身非常獨立，不僅可以在瀏覽器上用，還可以在server端結合nodejs做模板。

除了獨立，reactjs還很靈活小巧，用起來像拼lego的積木，一個component接著另一個component。

在性能方面，由於運用了virtual dom技術，reactjs只在調用setstate的時候會更新dom，而且還是先更新virtual dom，然後和實際dom比較，最後再更新實際dom。這個過程比起angularjs, knockoutjs的bind方式來說，一是更新dom的次數少，二是更新dom的內容少，速度肯定是快了的。另外reactjs用了jsx，這個相當於半個新語言了。

google發展全面，組織結構清晰，分工明確，業務擴展雖緩慢，但是發展良好。

angularjs是一個m-v-whateever framework。framework的一個特點就是很全面，除了m-v-whatever面面俱到，它還自帶了很多$開頭的service，$http, $route, $q(defer),$cookie等等，基本上只要你在做web開發用過的東西，它都有一個。

angularjs的架構清晰，分工明確，model，view，controller誰在什麼時候做什麼事情說的很清楚，整個框架充滿了DI的思路，耦合性非常低，對象都是被inject的，也就是說每個對象都可以輕易被替換而不影響其他對象。

此外，angularjs的擴展性不錯，但是略微有點笨拙，你可以自定義directive，當然如果嫌麻煩，只封裝到controller+html很多時候也夠了。

至於應用場景

根據上述總結，我個人覺得企業項目，或者說業務比較正規的用angularjs比較好。對於那種傾向於比較好玩的，有趣的，有創意的項目用reactjs比較好。

企業文化這東西還是很重要的，這兩個東西一直做下去，reactjs會越來越像fb，angularjs會越來越像google。

更新一下：還是redux 好用。backbone已經被我淘汰，因為太hacking

react + backbone, 個人感覺非常靈活，debug也變得更容易，速度也夠快。angular學習曲線其實比較陡，你覺得有時間折騰就搞吧，個人更喜歡react的便捷

就像 Bernardo Smaniotto在他的博客Don"t blame the framework: my experience with AngularJS and ReactJS | Cheesecake Labs里描述的，他一開始使用的是reactjs，後面去接手angularjs項目感到十分地不自在。但是慢慢地也習慣了angularjs的開發模式。同樣地我們看到很多一開始學習angularjs的程序員也不習慣reactjs那一套開發模式，先要學會reactjs中的jsx語法還要加上路由處理，再來一套Flux來控制數據流。

我們帶有先入為主的觀點，覺得自己框架有的東西別的框架沒有就是缺點。其實只要花一兩個星期，就能熟悉angularjs框架，或者reactjs以及圍繞它的flux架構。並且順利地用他們進行開發。我覺得這兩個框架並沒有說各自擅長的場景，你更喜歡哪一個就撿起來學習，用到開發中去就行了。等有時間再去研究一下另外的框架。

最後貼一下阮老師的一篇微博，angularjs和reactjs只是設計理念不一樣，但是它們都代表了現代web開發的先進理念。

angular 就是爬過一座山後發現山後是個坑。

其實react只能算一個生態圈，像react鼓吹的virtual dom個人認為就是然並卵，手機瀏覽器性能在那，即便很簡單的切換都有卡頓，還指望在dom上有什麼性能突破嗎？

像fb的canvas可能是解決之道，但現在並沒有太多寫完的組件，而且貌似對於用戶很喜歡在網頁上copy這個需求也沒有好的實現方式，可以說這條路任重而道遠。

1. 2013年末的時候玩得 Angularjs，當時折騰了一個星期。它引入了一堆的Concept，亂七八糟。Mental Model 過於複雜。

我的感受是： what the fuck!!!

這東西真的不是google故意放出來坑其他公司的嘛？前端已經這麼亂了，還來這麼一套。

這兩天由於要做一個Web客戶端的項目，又看了一下Angular，發現這個社區基本沒有長進。Core Team 基本都玩 Angular 2去了吧。Angular 1的設計算是徹底失敗了。不知為什麼會忽悠到這麼多關注度。可能Angular引入的這麼多concept，對於入門級的前端童鞋來說，不明覺厲？

2. 由於受到 Angularjs 的影響，對於Reactjs 我也一直存懷疑態度，以至於都懶得去了解。因為這兩天在調研，所以就順帶看了下。配合 react-route 和 flux 架構，輔以webpack，感覺就是： Awesome!! 非常Nice 的API，比 Angular 那一堆的 $*** 強太多了。

做同樣一個事情，使用 Angular，我用了將近一周的時間，才能勉強開動，看了好久文檔，還是寫不好directive，不斷要翻文檔。

React只花了兩個小時，已經可以用JSX寫大部分的組件了，暢快無比。

其實我想說為什麼這麼多只用過某一個的還來強答這個問題

跪舔vue

用過A 第一天接觸R

看了R官網的Tutorial 和將R的Tutorial 用A改寫的Demo

感覺是

A讀起來更直觀直接看html就知道頁面大概長啥樣

R前前後後過一遍才看明白會生成怎樣的Html (或者把應用跑起來，在瀏覽器裡面看)

再從編碼過程來想

如果用A 拿到設計圖就可以直接用html 寫出頁面再做動態效果表單的話雙向綁定很爽啊

如果用B 是不是要先思考將頁面分成各個組件然後每個組件要寫一段代碼來create 最後render 有點暈但是當組件足夠用的時候 (例如像Bootstrap裡面各個組件都能直接用的時候) 頁面之間復用起來是不是就能很快了

還需要多實踐一下R的思路可能也不錯入門中。。

AngularJS 1.X 推倒重來，AngularJS 2.x 不是要重寫遊戲規則

React是目標是UI組件，通常可以和其它框架組合使用，目前並不適合單獨做一個完整的框架，想了解React在開發中實現什麼樣的角色，可以看看這個實際的簡單編程例子：代碼介紹：臉譜的框架React基礎使用介紹

React這種虛擬DOM的實現，性能肯定優於Angular，而開發大項目或者比較正規的項目，建議還是使用Angular，終歸比較簡單實用，React社區的活躍度會推進開發，但它的思想並不適合純粹的前端開發者(雖然如今的前端逐漸脫離切圖仔的身份)。我是Angular用戶，對React沒有項目實戰，但我覺得對於移動端，React比Angular更有潛力，而且FaceBook比Google更看重JS，所以完全可以選擇React，issue已經完全可以幫助你解決常規的問題了

試試Vue.js,結合了兩者的優點。5分鐘上手，既可以雙向綁定，也可以組件化。大愛！