前端開發框架簡介:angular和react

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，只有如下幾點可能會吸引我：

1. 足夠好的性能
2. 跨平臺開發的統一體驗。這個還得等react-android出來後才知道。
3. 兼容其餘js庫，在現有項目中就可使用

而對於angularjs，我認爲目前angularjs已經足夠好用了，除了如下幾個顯著的問題：

1. 性能問題，目前angularjs在移動端的性能確實不夠，由於它實在太大了。這個問題是最致命的。
2. 只能在angular的框架下開發，第三方庫要兼容angular都須要作一些工做。

對於angularjs其餘所謂的缺點，其實大多能夠解決，只是難易程度不一樣，例如SEO/構建等均可以解決。
上手難易程度來講，angularjs確實比react難不少，但這和一個工具是否好用沒有關係，例如正則。

網上看到你們都在鼓吹react如何如何，又有不少人拋棄了angular投向react的懷抱。說實話有點吹的太過了。
react只是讓組件式開發和複用更加簡單好用，外加逆天的性能，僅此而已。

最後，到底應該用什麼，看你的心情吧，我要趕去改bug了。。