Angular - React之爭
Angular和React無疑是目前最受追捧的兩個前端框架，谷歌也發現Angular1.x不足的地方，開始開發2.0版本，臉書發現React的組件化和虛擬DOM非常好，也同時投資React Native。
00.先比較Angular1.x與React
這兩個沒什么可比性，Angular着重數據綁定和前端MVC，以及不同模塊的依賴注入。React着重於組件化和性能。之前做項目用的Angular，數據綁定很爽，但是作為新手學習曲線確實很陡峭，寫個指令不知道scope飛哪里去了，用Angular-UI又要去翻牆查各種聲明方式，總之踩了很多坑。某一天看到React，確實有種眼前一亮的感覺，因為時間不多，當時也就沒深入了解了。React給人一種小清新的感覺，Virtual DOM的思路比Angular的$digest循環明顯好一點，然而Angular火的早，參考的東西很多，這兩者各有優劣吧。長期來看React會比Angular更好，畢竟谷歌已經把重點放在Angular2.x上面了，有些放棄1.x的感覺。
01.再比較Angular2.0與React Native
筆者走馬觀花的看了這兩個框架，發現兩者有很多共同點。比如都選擇了ES6的語法，用一個class來聲明組件，比如都着眼於組件化，再比如都抽象出渲染模塊，能在不同平台復用。而兩者不同的地方是：
Angular2比React Native的語法更優雅，更像是聲明式的語法。命令式走向聲明式無疑是一門語言進步的標志，好比蓋一棟房子，命令式像是找土，找磚窯，一塊一塊燒，聲明式好比打電話給磚廠，“明天XX點送1000塊磚過來”，React Native的一些語法相比於Angular2顯得更帶有命令式的意味，比如getInitialState，這是一個View設置初始狀態和初始化數據的API，這相比與Angular2使用class的構造器語法顯得有些不優雅了。
具體的例子比較一下：
import {Component} from "angular2/core"; import {bootstrap} from "angular2/platform/browser"; @Component({ selector:"ez-card", properties:["name","country"], template : `<div class='ez-card'> My name is <b>{{name}}</b>,
I am from <b>{{country}}</b>.</div>` }) class EzCard{ constructor(){ this.name = "Mike"; this.country = "Sweden"; } }
var React = require('react-native'); var { AppRegistry, Image, ListView, StyleSheet, Text, View, } = React; React.createClass({ getInitialState: function() { return { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), loaded: false, }; }, render : function(){ return ( <ListView dataSource={this.state.dataSource} renderRow={this.renderMovie} style={styles.listView} />
} } });
上面兩段代碼是從一些教程上摘下來的部分片段，純ES6語法的Angular2看起來明顯更清爽一點，而且Angular2看樣子是要實現Write Once，Run Anywhere：
而React的重點是Web應用，React Native注重原生平台的底層調用，Learn Once，Write Anywhere是否會造成冗余的開發也有待考量，但原生接口調用以及組件化的開發方式一定會比目前hybrid app的模式更加靠譜，性能更好，可維護性更高。
10.總結
組件化和聲明式的開發一定會成為主流，ES6也會慢慢普及，React以及React Native已經獲得了不錯的聲譽，Angular1.x已經功成名就，Angular2蓄勢待發，如果Angular2能在短時間范圍內實現IOS和安卓的渲染應該會與React Native、現存的很多hybrid app競爭並且得到一席之地的。