React還是Vue：你該如何選擇？

React和Vue的適用范圍無疑是很相似的：同樣是基于組件的輕量級框架，同樣專注于用戶界面的視圖層。同樣可以用在簡單的項目中，也同樣可以使用全家桶擴展為復雜的應用程序。

2016年React鞏固了它作為前端框架之王的地位，這一年中可以看到它在Web端和移動端的快速成長，同時穩(wěn)穩(wěn)領先于它的主要競爭對手Angular。

但是2016對Vue來說也是同樣令人印象深刻的一年，它發(fā)布了Vue 2.0版本并且在JavaScript社區(qū)引起了巨大反響，GitHub上多出的25000顆star就是***的證明。

React和Vue的適用范圍無疑是很相似的：同樣是基于組件的輕量級框架，同樣專注于用戶界面的視圖層。同樣可以用在簡單的項目中，也同樣可以使用全家桶擴展為復雜的應用程序。

因為，很多Web開發(fā)者想知道他們應該使用哪個框架。是其中一個明顯優(yōu)于另一個？還是他們有各自的優(yōu)點和坑？或者他們基本就是一個樣？

兩個框架 兩個擁護者

在本文中，我想用一次公平，徹底的對比來回答上面的疑問。但是唯一的問題是我是一個Vue粉絲，完全不夠客觀。今年我在項目中重度使用Vue，在Medium上大加贊賞，甚至還發(fā)布了Udemy課程

為了平衡我的偏見，我叫上了我的朋友Alexis Mangin，他是一個很牛的JavaScript開發(fā)者，同時也是一個React鐵粉。他同樣沉浸于React中，經(jīng)常在Web端和移動端的項目中使用。

有一天Alexis問我：“為什么你這么中意Vue，而不是React呢？”那時候我不太了解React， 沒辦法給出一個好的答案。所以我出了一個主意，找一天時間，帶上筆記本電腦，互相介紹一下彼此做出選擇的原因。

經(jīng)過大量的討論和和互相學習后，我們找到了6個關鍵點。

如果你喜歡用模板搭建應用（或者有這個想法），請選擇Vue

Vue應用的默認選項是把markup放在HTML文件中。數(shù)據(jù)綁定表達式采用的是和Angular相似的mustache語法，而指令（特殊的HTML屬性）用來向模板添加功能。

下面的示例是一個簡單的Vue應用。它會展示message和一個用來reverse message的按鈕：

<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應用不使用模板，它要求開發(fā)者借助JSX在JavaScript中創(chuàng)建DOM。下面是用React實現(xiàn)的同樣的應用。

<div id="app"></div> 

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開發(fā)方式的新開發(fā)者，模板更容易理解。但是一些資深開發(fā)者也喜歡模板，因為模板可以更好的把布局和功能分割開來，還可以使用Pug之類的模板引擎。

但是使用模板的代價是不得不學習所有的HTML擴展語法，而渲染函數(shù)只需要會標準的HTML和JavaScript。而且比起模板，渲染函數(shù)更加容易調試和測試。當然你不應該因為這方面的原因錯過Vue，因為在Vue2.0中提供了使用模板或者渲染函數(shù)的選項。

如果你喜歡簡單和“能用就行”的東西，請選擇Vue

一個簡單的Vue項目可以不需要轉譯直接運行在瀏覽器中，所以使用Vue可以像使用jQuery一樣簡單。當然這對于React來說在技術上也是可行的，但是典型的React代碼是重度依賴于JSX和諸如class之類的ES6特性的。

Vue的簡單在程序設計的時候體現(xiàn)更深，讓我們來比較一下兩個框架是怎樣處理應用數(shù)據(jù)的（也就是state）。

React中的state是不可變（immutable）的，所以不能直接改變，需要使用API中的setState方法：

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

React中是通過比較當前state和前一個state來決定何時在DOM中進行重渲染以及渲染的內容，因此需要不可變（immutable）的state。

Vue中的數(shù)據(jù)是可變（mutated）的，所以同樣的操作看起來更加簡潔。

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

讓我們來看看Vue中是如何進行狀態(tài)管理的。當向state添加一個新對象的時候，Vue將遍歷其中的所有屬性并且轉換為getter，setter方法，現(xiàn)在Vue的響應系統(tǒng)開始保持對state的跟蹤了，當state中的內容發(fā)生變化的時候就會自動重新渲染DOM。令人稱道的是，Vue中改變state的狀態(tài)的操作不僅更加簡潔，而且它的重新渲染系統(tǒng)也比React 的更快更有效率。

Vue的響應系統(tǒng)還有有些坑的，例如：它不能檢測屬性的添加和刪除和某些數(shù)組更改。這時候就要用到Vue API中的類似于React的set方法來解決。

如果你想要你的應用盡可能的小和快，請選擇Vue

當應用程序的狀態(tài)改變時，React和Vue都將構建一個虛擬DOM并同步到真實DOM中。 兩者都有各自的方法優(yōu)化這個過程。

Vue核心開發(fā)者提供了一個benchmark測試，可以看出Vue的渲染系統(tǒng)比React的更快。測試方法是10000個項目的列表渲染100次，結果如下圖。

從實用的觀點來看，這種benchmark只和邊緣情況有關，大部分應用程序中不會經(jīng)常進行這種操作，所以這不應該被視為一個重要的比較點。但是，頁面大小是與所有項目有關的，這方面Vue再次領先，它目前的版本壓縮后只有25.6KB。React要實現(xiàn)同樣的功能，你需要React DOM（37.4KB）和React with Addon庫（11.4KB），共計44.8KB，幾乎是Vue的兩倍大。雙倍的體積并不能帶來雙倍的功能。

如果你打算構建一個大型應用程序，請選擇React

像文章開頭那種同時用Vue和React實現(xiàn)的簡單應用程序，可能會讓一個開發(fā)者潛意識中更加傾向于Vue。這是因為基于模板的應用程序***眼看上去更加好理解，而且能很快跑起來。但是這些好處引入的技術債會阻礙應用擴展到更大的規(guī)模。模板容易出現(xiàn)很難注意到的運行時錯誤，同時也很難去測試，重構和分解。

相比之下，Javascript模板可以組織成具有很好的分解性和干（DRY）代碼的組件，干代碼的可重用性和可測試性更好。Vue也有組件系統(tǒng)和渲染函數(shù)，但是React的渲染系統(tǒng)可配置性更強，還有諸如淺（shallow）渲染的特性，和React的測試工具結合起來使用，使代碼的可測試性和可維護性更好。

與此同時，React的immutable應用狀態(tài)可能寫起來不夠簡潔，但它在大型應用中意義非凡，因為透明度和可測試性在大型項目中變得至關重要。

如果你想要一個同時適用于Web端和原生APP的框架，請選擇React

React Native是一個使用Javascript構建移動端原生應用程序（iOS，Android）的庫。 它與React.js相同，只是不使用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); 

它的意義在于，開發(fā)者只需要一套知識和工具就能開發(fā)Web應用和移動端原生應用。如果你想同時做Web端開發(fā)和移動端開發(fā)，React為你準備了一份大禮。

阿里的Weex也是一個跨平臺UI項目，目前它以Vue為靈感，使用了許多相同的語法，同時計劃在未來完全集成Vue，然而集成的時間和細節(jié)還不清楚。因為Vue將HTML模板作為它設計的核心部分，并且現(xiàn)有特性不支持自定義渲染，因此很難看出目前的Vue.js的跨平臺能力能像React和React Native一樣強大。

如果你想要***的生態(tài)系統(tǒng)，請選擇React

毫無疑問，React是目前***的前端框架。它在NPM上每個月的下載量超過了250萬次，相比之下，Vue是22.5萬次。

人氣不僅僅是一個膚淺的數(shù)字，這意味著更多的文章，教程和更多Stack Overflow的解答，還意味有著更多的工具和插件可以在項目中使用，讓開發(fā)者不再孤立無援。

這兩個框架都是開源的，但是React誕生于Facebook，有Facebook背書，它的開發(fā)者和Facebook都承諾會持續(xù)維護React。相比之下，Vue是獨立開發(fā)者尤雨溪的作品。尤雨溪目前在全職維護Vue，也有一些公司資助Vue，但是規(guī)模和Facebook和Google沒得比。不過請對Vue的團隊放心，它的小規(guī)模和獨立性并沒有成為劣勢，Vue有著固定的發(fā)布周期，甚至更令人稱道的是，Github上Vue只有54個open issue，3456個closed issue，作為對比，React有多達530個open issue，3447個closed issue。

如果你已經(jīng)用其中一個用的很爽，就別變了。

總結一下，我們發(fā)現(xiàn)的，Vue的優(yōu)勢是：

模板和渲染函數(shù)的彈性選擇簡單的語法和項目配置更快的渲染速度和更小的體積
React的優(yōu)勢是：

更適合大型應用和更好的可測試性Web端和移動端原生APP通吃更大的生態(tài)系統(tǒng)，更多的支持和好用的工具。
然而，React和Vue都是很優(yōu)秀的框架，它們之間的相似之處多過不同之處，并且大部分的優(yōu)秀功能是相通的：

用虛擬DOM實現(xiàn)快速渲染輕量級響應式組件服務端渲染集成路由工具，打包工具，狀態(tài)管理工具的難度低優(yōu)秀的支持和社區(qū)。