作者：vienwu
react是facebook推出一個用來構建用戶界面的js庫。官方介紹的三大特性如下：
just the ui
把react只當作一個ui組件就好，等同於傳統mvc中的view。
virtual dom
react在編程模型和傳統dom之間添加了一層，稱之為虛擬dom。好處非常多，性能更好，可以在node環境下完成渲染（解決seo問題），可以更好的用於開發native apps。
data flow
反應式的單向數據綁定，比傳統數據綁定更簡單，簡單的使用js事件觸發改變組件狀態也可以實現雙向綁定的效果。
什么是angularjs
angularjs是google推出的一個前端js框架，面世已有幾年時間，非常成熟，目前已經有非常多的第三方模塊，基本上可以解決前端工程領域的各方面的問題。網上的資料也非常多，這里就不做過多介紹。
reactjs和angularjs
reactjs是非常純粹的組件式開發，所有的頁面元素均由各大小組件組合而成。再插上虛擬dom的翅膀，實現了一處代碼多平台執行的效果，關鍵是這貨性能還不錯。但是呢，除了組件以外，這貨其他什么功能也沒有，你需要重新造出所有的缺失的輪子或者選擇第三方的輪子。
angularjs則是一個完整的框架，意味着不需要太多的工作，就可以使用於大部分的業務場景。
簡單好用的module和依賴注入系統，controller中定義的數據和事件，service實現不同組件之間共享數據，filter處理篩選數據，forms支持表單和復雜的表單驗證，簡單的動畫模塊animations，強大的directive實現指令和指令的嵌套，可以很輕松的實現reactjs的組件及組件組合功能。ui組件有bootstrap for angular，路由有ui-router，還有promise模塊$q，還有原生的$resource模塊直接支持標准的restful接口，集成的單元測試，等等，哇哇，功能好多的樣子，又到但是的環節，話說很多初學者會被很多angularjs的名詞折磨的暈頭轉向。。。
如果要拿reactjs來開發應用，你還需要做很多額外的工作。而如果使用angularjs的話，就可以直接開始工作了。
兩者之間其實無法直接拿來比較，畢竟react只是view的解決方案，而angularjs是包含mv*的完整框架。
拋開跨平台和性能因素，就功能而言，angularjs已經包含了reactjs的功能，只需要一個自定義directive加controller就可以輕松實現組件效果。
如果是一個大型項目，使用angularjs無疑更可靠。強大的功能帶來一定的學習成本，但這一切都是值得的。
而使用react的話，你首先需要考慮一個問題，數據怎么管理？用哪個mvc庫？接下來還有一堆問題等着你。
如果只是一個小型項目，那就看心情吧。
再單獨說下關於數據的問題，react還搞出了一個叫做flux的概念。簡單看了一下react的flux模型，這不就是個觀察者模式嘛。而angular至少支持了三種數據共享方式，包括service，事件，rootScope直接添加一個object，可以分別適應各種不同的場景。
我們來看看react和angular實現組件的方式有什么不一樣。。
組件實現
很多人包括我剛看到jsx時會想一個問題，我靠，這貨是什么玩意？
js已經有了coffeescript、typescript等，以后還有es6，難道還要學一個這玩意？
還好，除了jsx外，我們也可以直接用js甚至coffee來編寫，雖然麻煩了點。
你只要記住，在react的世界，jsx的語法比js寫起來更方便更容易理解就好了，具體用什么取決於你自己。
注1：為了便於沒有jsx基礎的jser理解，本文所有react示例均使用編譯后的js代碼。
注2：用coffee寫更爽。
第一個組件，hello系列，先看react的實現
var HelloMessage = React.createClass({displayName: "HelloMessage", render: function() { return React.createElement("div", null, "Hello ", this.props.name); } }); React.render( React.createElement(HelloMessage, {name: "John"}), document.getElementById('container') ); 看一看angular正常的方式：
template.html
<div>Hello {{name}} </div> controller
var app = angular.module('app'); app.controller('testController',["$scope",function($scope){ $scope.name = 'John'; }]); 再看一看用angular式組件，使用directive
var app = angular.module('app'); app.directive('myComponent',function(){ return { link:function(scope,element,attrs){ var name = attrs.name; element.text('Hello ' + name); } } }); html:
<myComponent name="John"></myComponent> 組件組合
react的組件組合非常簡單，使用React.createElement方法即可。
例如給上面定義的HelloMessage的外層添加一個div，可以這樣寫：
var HelloMessageWithDiv = React.createClass({ displayName:'HelloMessageWithDiv', render:function(){ return React.createElement( 'div', null, React.createElement(HelloMessage, {name: "John"}) ); } }); angular也很簡單，直接寫html即可
<div><myComponent name="John"></myComponent></div> react對dom的封裝都在React.DOM命名空間下，而coffeescipt支持解構賦值語法，所以用coffee的寫法也可以媲美jsx的語法，例如：
{div,h1,h2,h3,h4,input,span} = React.DOM
React.render(
div null,'head.', div null,'nav', ul null, li null,'li1' li null,'li2' div null,'container', h1 null,'title' div null,'content' h2 null,'h2' ,document.getElementById 'container' ) 為什么用react
雖然目前react非常之火爆，但說實話，我也不知道在現在環境中用react有什么意義。
在使用angularjs開發幾個項目之后，如果需要轉向react，只有以下幾點可能會吸引我：
- 足夠好的性能
- 跨平台開發的統一體驗。這個還得等react-android出來后才知道。
- 兼容其他js庫，在現有項目中就可以使用
而對於angularjs，我認為目前angularjs已經足夠好用了，除了以下幾個顯著的問題：
- 性能問題，目前angularjs在移動端的性能確實不夠，因為它實在太大了。這個問題是最致命的。
- 只能在angular的框架下開發，第三方庫要兼容angular都需要做一些工作。
對於angularjs其他所謂的缺點，其實大多可以解決，只是難易程度不同，例如SEO/構建等都可以解決。
上手難易程度來說，angularjs確實比react難很多，但這和一個工具是否好用沒有關系，例如正則。
網上看到大家都在鼓吹react如何如何，又有很多人拋棄了angular投向react的懷抱。說實話有點吹的太過了。
react只是讓組件式開發和復用更加簡單好用，外加逆天的性能，僅此而已。
最后，到底應該用什么，看你的心情吧，我要趕去改bug了。。
相關閱讀
React展示組件與容器組件（英譯）
如何搭建高質量、高效率的前端工程體系--頁面結構繼承
騰訊雲主機介紹
此文已由作者授權騰訊雲技術社區發布，轉載請注明文章出處，獲取更多雲計算技術干貨，可請前往騰訊雲技術社區
原文鏈接：https://www.qcloud.com/community/article/772822001489391693
歡迎大家關注騰訊雲技術社區-博客園官方主頁，我們將持續在博客園為大家推薦技術精品文章哦~