React仍是Vue？

原文連接：React or Vue: Which Javascript UI Library Should You Be Using? | Codementor
做者：Anthony Gore
譯者：sunny
轉載需提早聯繫譯者，未經容許不得轉載。
本文首發於前端指南

2016年，React鞏固了它JavaScript web框架之王的地位。在這一年裏，Web和原生APP的庫都迅速發展，同時與Angular相比，也具備明顯優點。

與此同時，2016年對於Vue而言，也是很重要的一年。Vue2的發佈給JavaScript社區帶來了巨大的衝擊，在Github上得到了25000個star。

不能否認，React和Vue的範圍十分相似：它們都是輕量級的組件庫，都用於構建用戶界面，專一於視圖層。二者均可以在簡單項目中，也可使用工具將它們擴展爲複雜的應用程序。

所以，不少web開發人員都想知道，到底應該選擇哪個？一個明顯優於另外一個？有什麼須要注意的利弊嗎？仍是說，二者基本相同？

兩個框架，兩個倡導者

在本文中，我想完全地公正地比較二者以前的區別。惟一的問題就是：我是Vue的愛好者，必然會有一些偏見。我常常在個人項目中使用Vue，還發布了一些在線教程，即Ultimate Vue.js Developers course

爲了擺脫我偏見的影響，我找到了個人朋友Alexis Mangin，他是一名優秀的JavaScript開發者，也是React的愛好者。他沉浸在React中，常常在Web和移動APP開發中使用React。

Alexis曾經問我：「爲何你這麼喜歡Vue，歷來不用React？」。因爲我不太瞭解React，我很難回答這個問題。因此，我決定，一塊兒坐下來，展現咱們選擇的庫，看看它們究竟能提供什麼東西。

通過激烈的討論和互相學習，咱們得出瞭如下6個結論。

若是你喜歡使用模板（ 或須要一些其中的選項）構建應用程序，那麼請選擇Vue

將標記放在HTML文件中是Vue應用程序的默認選項。與Angular相似，大括號用於數據綁定表達式，指令（特殊的HTML屬性）用於向模板添加功能。下面是一個簡單的Vue程序例子。它能夠輸出一條消息，有一個按鈕能夠動態反轉消息：

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

相比之下，React應用程序避開模板，要求開放人員在JavaScript中建立DOM，一般用JSX輔助，下面是用React來實現一樣的功能：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello React.js!'
    };
  }
  reverseMessage() {
    this.setState({ 
      message: this.state.message.split('').reverse().join('') 
    });
  }
  render() {
    return (
      <div>
        <p>{this.state.message}</p>
        <button onClick={() => this.reverseMessage()}>
          Reverse Message
        </button>
      </div>
    )
  }
}
ReactDOM.render(App, document.getElementById('app'));

對於學習標準的web初級開發者而言，模板更容易理解。可是也有不少經驗豐富的開發人員樂意使用模板，由於模板能夠更好地分離佈局和功能，同時也能夠選擇向Pug這樣的預處理器。

可是，使用模板須要學習全部的HTML擴展語法，渲染函數只須要了解標準的HTML和JavaScript

若是你喜歡簡單的能正常工做的，那麼請選擇Vue

一個簡單的Vue項目能夠不須要解析，直接在瀏覽器中運行，這容許Vue能夠像jQuery同樣在項目中引用。

雖然在技術上使用React也是可行的，可是典型的React代碼更傾向於像classes和non-mulating 數組方法這樣的JSX和ES6的特性。可是Vue在簡潔設計方面更爲深刻。咱們來比較二者如何處理應用程序的數據（即「狀態」）。

在React中State是不能夠直接改變的，須要調用setState接口：

this.setState({ 
    message: this.state.message.split('').reverse().join('') 
});

當前和以前的狀態差別讓React知道何時在DOM中從新渲染以及渲染什麼，所以不可變的狀態是很是必要的。

相比之下，數據能夠在Vue中突變。相同的數據屬性在Vue中發生變化更爲簡單。

// Note that data properties are available as properties of 
// the Vue instance
this.message = this.message.split('').reverse().join('');

在你得出Vue渲染系統比React渲染低效的結論以前，讓咱們來看看Vue中的狀態管理：當你向狀態添加新對象時，Vue會遍歷它的全部屬性而且轉換爲getter和setter。Vue系統會持續追蹤狀態而且在狀態發生變化時，自動從新渲染DOM。

使人印象深入的是，Vue中的狀態改變動爲簡潔的同時，從新渲染系統的效率其實比React更好。

Vue的反應系統確實有值得注意的事項。例如：它不能檢測到屬性的添加、刪除以及特定數組的變化。在這種狀況下，可使用Vue API中相似React的set方法。

若是你但願你的程序更小更快，那麼請選擇Vue

React和Vue都將構建一個虛擬DOM，而且在應用程序狀態更改時同步更新實際的DOM。二者都有本身的優化方法。Vue核心開發人員提供了一個基準測試，展現了Vue的渲染系統比React的更快。在這個測試中，10000個項目的列表被渲染了100次。下面的表格展現了比較的結果。

從實際角度而言，這種基準只與邊緣狀況有關。大多數應用程序不須要常常進行這種操做，所以不能將其視爲比較的一個重要因素。

雖然頁面的大小與項目相關，Vue又佔據了優點。目前發佈的Vue庫只有25.6KB。

要用React實現相似的功能，你須要使用React DOM（37.4KB）和React with Addons庫（11.4KB），總共爲48.8KB，幾乎是Vue的兩倍。爲了公平起見，你可使用React得到更多的API，可是不會有雙倍的功能。

若是你想要構建大型應用程序，那麼請選擇React

用Vue和React來實現簡單的應用程序，就像本文開頭所說的同樣，大部分開發者會偏向於Vue。這是由於基於模板的應用程序乍看更容易理解，而且可以更快啓動。

可是這些初始的好處會致使大型程序進展緩慢。模板很容易出現運行時錯誤，難以測試，也不容易重構或分解。

相比之下，JavaScript製做的模板能夠被組織成可分解的組件，DRY code也更容易重用和測試。

Vue也具備組件系統和渲染功能。可是React的渲染系統配置性更高，而且具備淺渲染的特性，與React的測試程序結合時，能夠提供更多可測試和可維護的代碼。

同時，React不可變的代碼並不簡單，當透明度和可測試性相當重要時，它會發揮更大的做用。

若是你想要一個同時適用於web和原生APP的庫，那麼請選擇React

React Native是用JavaScript建立原生APP的庫。它與React相同，只是將web組件換成了原生組件。若是你學習了React.js，那麼你很快就能夠學會React Native，反之亦然。

import React, { Component } from 'react'; 
import { AppRegistry, Text, View } from 'react-native';  
class HelloWorld extends Component {   
  render() {     
    return (       
      <View>         
        <Text>Hello, React Native!</Text>
      </View>
    );   
  }
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

重要的是，開發人員能夠構建一個web或者原生APP，他們不須要不一樣的知識體系和工具。若是您打算開發web和移動APP，React會給你帶來巨大沖擊。

阿里巴巴的Weex是另外一個跨平臺UI項目。目前，它認爲Vue提供了靈感，而且使用了不少相同的語法，並計劃徹底集成Vue。可是，這個計劃的時間表和細節還沒有清晰。

因爲Vue將HTML模板做爲其設計的核心部分，也沒有將客戶端渲染做爲當前的特性，所以很難看到原生的Vue像React.js或React Native同樣緊密。

若是你想要最大的生態系統，那麼請選擇React

毫無疑問，React目前是最受歡迎的庫，NPM下載量每個月約2.5M，Vue每個月的下載量爲225k。

人氣帶來的好處不止一點半點。這意味有更多的文章、教程和Stack Overflow回答可以幫助。也意味着在項目中有更多的工具和附加組件可用，同時節省了開發人員本身構建全部模塊的時間。

二者都是開源的，可是React誕生自Facebook，受益於它。開發者和熱愛React的公司均可以保障React一直被維護。

相比之下，Evan You一我的建立了Vue，同時他也是Vue惟一的全職維護人員。Vue獲得了一些企業的贊助，可是還達不到Facebook或是Google的規模。

爲了使得Vue團隊更爲可信，它的小體積和獨立性目前並不被當作劣勢。Vue有規律的發佈週期，使人印象深入的是，Vue在Github上只有54個公開的問題，3456個關閉的問題，而React有530個開放問題，3447個關閉的問題。

若是你已經選擇了其中的一個，那麼也不須要換了

總而言之，咱們發現，Vue的優點是：

• 模板或渲染的靈活選項

• 語法以及項目設置的簡單

• 渲染速度更快，體積更小

React的優點是：

• 更大的規模、更多的使用者、更好的可測試性

• Web和原生APP

• 能提供更多支持和工具的更大的生態系統

然而，React和Vue都是優秀的UI庫，而且具備更多的類似之處。它們都有的優點是：

• 使用虛擬DOM快速渲染

• 輕量級

• 響應式組件

• 服務端渲染

• 輕鬆集成的的路由、捆綁和狀態管理

• 強大的支持和社區

若是你認爲咱們漏掉了一些東西，歡迎在評論中說明。Happy developing！