天天看點

前端開發架構簡介:angular 和 react什麼是angularjsreactjs和angularjs元件實作元件組合為什麼用react

作者:vienwu

react 是 facebook 推出一個用來建構使用者界面的js庫。官方介紹的三大特性如下:

把react隻當作一個ui元件就好,等同于傳統mvc中的view。

react在程式設計模型和傳統dom之間添加了一層,稱之為虛拟dom。好處非常多,性能更好,可以在node環境下完成渲染(解決seo問題),可以更好的用于開發native apps。

反應式的單向資料綁定,比傳統資料綁定更簡單,簡單的使用js事件觸發改變元件狀态也可以實作雙向綁定的效果。

angularjs是google推出的一個前端js架構,面世已有幾年時間,非常成熟,目前已經有非常多的第三方子產品,基本上可以解決前端工程領域的各方面的問題。網上的資料也非常多,這裡就不做過多介紹。

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寫起來更友善更容易了解就好了,具體用什麼取決于你自己。

第一個元件,hello系列,先看react的實作

看一看angular正常的方式:

template.html

controller

再看一看用angular式元件,使用directive

html:

react的元件組合非常簡單,使用<code>React.createElement</code>方法即可。

例如給上面定義的<code>HelloMessage</code>的外層添加一個<code>div</code>,可以這樣寫:

angular也很簡單,直接寫html即可

react對dom的封裝都在React.DOM命名空間下,而coffeescipt支援解構指派文法,是以用coffee的寫法也可以媲美jsx的文法,例如:

雖然目前react非常之火爆,但說實話,我也不知道在現在環境中用react有什麼意義。

在使用angularjs開發幾個項目之後,如果需要轉向react,隻有以下幾點可能會吸引我:

足夠好的性能;

跨平台開發的統一體驗。這個還得等react-android出來後才知道;

相容其他js庫,在現有項目中就可以使用。

而對于angularjs,我認為目前angularjs已經足夠好用了,除了以下幾個顯著的問題:

性能問題,目前angularjs在移動端的性能确實不夠,因為它實在太大了。這個問題是最緻命的。

隻能在angular的架構下開發,第三方庫要相容angular都需要做一些工作。

對于angularjs其他所謂的缺點,其實大多可以解決,隻是難易程度不同,例如SEO/建構等都可以解決。

上手難易程度來說,angularjs确實比react難很多,但這和一個工具是否好用沒有關系,例如正則。

網上看到大家都在鼓吹react如何如何,又有很多人抛棄了angular投向react的懷抱。說實話有點吹的太過了。

react隻是讓元件式開發和複用更加簡單好用,外加逆天的性能,僅此而已。

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

原文連結:http://ivweb.io/topic/556ae97673956de01fad07ed