React 仍是 Vue: 你應該選擇哪個Web前端框架？

時間 2019-11-12

標籤 react 仍是 vue 應該選擇哪個 web 前端框架欄目 React 简体版

原文原文鏈接

學仍是要學的，用的多了，也就有更多的認識了，開發中遇到選擇的時候也就簡單起來了。javascript

本文做者也作了總結：html

若是你喜歡用（或但願可以用）模板搭建應用，請使用Vue
若是你喜歡簡單和「能用就行」的東西，請使用Vue
若是你的應用須要儘量的小和快，請使用Vue
若是你計劃構建一個大型應用程序，請使用React
若是你想要一個同時適用於Web端和原生App的框架，請選擇React
若是你想要最大的生態圈，請使用React
若是你已經對其中一個用得滿意了，就沒有必要換了前端

原文連接：React 仍是 Vue: 你應該選擇哪個Web前端框架？vue

2016年，React在Web端和移動端都實現了迅速的成長，穩穩地領先於其主要競爭對手Augular，鞏固了其做爲前端框架之王的地位。java

可是Vue在這一年裏的表現也可謂一樣的耀眼。Vue.js 2.0 的發佈在整個JavaScript社區都引發了巨大反響，這一點僅從它在Github中漲了25,000顆star，就足以獲得證實。react

不得不說React和Vue的使用範圍是類似的：都是基於組件化的輕量級框架，都專一於構建用戶界面的視圖層；都既能夠用於簡單的項目，也適用於使用前沿技術的大規模複雜項目。web

所以，不少Web開發者都不免糾結到底要從中選擇哪個框架。這二者中可否分出個高下好壞？或者它們各自有哪些優缺點是須要咱們注意的？仍是說它們實際上差很少，用誰都同樣？react-native

兩種框架，兩個擁護者

在這篇文章中我想用盡量公平，全面的對比來回答這些疑問。可是問題來了：我是個徹徹底底的Vue迷弟，確定會偏向它。今年我在項目中大量地使用了Vue，在Medium上安利它的好處，甚至還在Udemy開設了一門關於Vue的入門課程。數組

爲了平衡一下，我邀請了個人朋友Alexis Mangin一塊兒參與討論。他是一名優秀的Javascript開發者，且是React的鐵粉。與我類似的是，他也頻繁地在各類項目中（包括Web端和移動端項目）使用着React。瀏覽器

有一天他問我說：「爲何你這麼喜歡用Vue，而不是React？」，當時因爲我不太瞭解React，因此很難給出一個很好的回答。因而我向他提議，咱們找一天帶上各自的筆記本電腦，一塊兒探討咱們各自喜好的框架的好處。

Anthony（左）和 Alexis（右）在泰國清邁的Bull and Bear咖啡館裏比較React和Vue

通過大量地討論和互相學習，咱們得出瞭如下六個關鍵點：

若是你喜歡用（或但願可以用）模板搭建應用，請使用Vue

Vue應用的默認選項是把markup放入HTML文件中。數據綁定表達式使用的是與Angular類似的雙大括號（moustache）語法，而指令（特殊的HTML屬性）則用於向模板中添加功能。

下面是一個簡單的Vue應用示例。它會展現一條消息（message），和一個用來動態反轉這條消息的按鈕：

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

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

React應用則與之相反，不使用模板，而是要求開發者藉助JSX在JavaScript中建立DOM。下面是用React實現的相同的應用：

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

// JS (pre-transpilation)
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擴展語法，而渲染函數（render function）只要求會使用標準的HTML和JavaScript。並且比起模板，渲染函數更易於調試和測試。可是，你並不該該所以就錯過Vue，由於在Vue2.0中已經提供了使用模板或者渲染函數的選項。

若是你喜歡簡單和「能用就行」的東西，請使用Vue

一個簡單的Vue項目能不須要轉譯直接使用在瀏覽器中，這使得在項目中使用Vue能夠像使用jQuery同樣容易。固然這對於React來講在技術上也是可行的，但典型的React代碼是更多地依賴於JSX和諸如class等ES6特性的。而Vue的簡單則是更深層地源於其設計的。讓咱們來比較一下這兩個框架是如何處理應用數據的（即「state」）：

React裏的狀態（state）是不可變（immutable）的，所以你不能直接地改變它，而是要用setState API方法：

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

React是經過比較當前狀態和前一個狀態的區別來決定什麼時候及如何從新渲染DOM的內容，所以須要使用不可變的狀態。

而與此相反的是，Vue中的數據是可變的（mutated），因此一樣的數據變量能夠用簡潔得多的方式修改：

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

讓咱們來看看Vue中是如何對狀態進行管理的：當你向狀態中添加一個新對象時，Vue將遍歷其中的全部屬性而且將它們轉換爲getter，setter方法。因而Vue的響應系統開始保持對該狀態的跟蹤，當該狀態的內容發生變化的時候就會自動從新渲染DOM。使人佩服的是，Vue中改變狀態的操做不只更加簡潔，並且它的從新渲染系統實際上比React的更快更高效。

不過Vue的響應系統仍是有些坑的，好比它沒法檢測屬性的添加和刪除，以及某些數組更改。這時候就要用Vue API中的相似於React的set方法的措施來解決。

若是你的應用須要儘量的小和快，請使用Vue

當應用程序的狀態改變時，React和Vue都會構建一個虛擬DOM並同步到真實DOM中。二者都有它們各自的優化這個過程的方式。

Vue的核心開發者提供了一個benchmark測試，來代表Vue的渲染系統比React的更快，具體基準的設定以及同其餘框架的比較詳見vuejs.org。測試方法是將含有10000個項目的列表渲染100次，結果以下圖。

從實用的角度來看，這種benchmark只跟邊緣狀況有關，而大部分應用程序中不會常常進行這種操做，因此這不該該被視做一個重要的比較點。可是，頁面大小則是與全部項目有關的，這方面Vue又一次優於React，它目前的版本壓縮後只有25.6KB。要用React實現一樣的功能，你須要React DOM（37.4KB）和React with Addon庫（11.4KB），共計44.8KB，幾乎是Vue的兩倍大。雖然從React你的確會獲得更豐富的API，但雙倍的體積並不能帶來雙倍的功能。

若是你計劃構建一個大型應用程序，請使用React

像文章開頭那樣，用Vue和React實現的簡單應用程序來比較二者，可能會讓一個開發者從一開始就更傾向於Vue。這是由於基於模板的應用程序乍看上去更易理解，並且能很快地寫好並跑起來。可是這些最初的便利會引入技術債並阻礙應用擴展到更大的規模。模板容易出現難以注意到的運行時錯誤，同時也不易於測試，重構和分解。

相比之下，Javascript模板能夠組織成通過良好分解，且使用DRY（don't repeat yourself - 避免重複代碼）原則的代碼的組件，於是具備更強的可重用性和可測試性。Vue也有組件系統和渲染函數，但React的渲染系統可配置性更強，幷包含如shallow rendering這樣的特性，可結合React的測試工具一塊兒使用，從而大爲提升代碼的可測試性及可維護性。

雖然React的不可變（immutable）應用狀態寫起來可能不夠Vue簡潔，但它在大型應用中仍會大放異彩，由於透明度和可測試性此時變得相當重要。

若是你想要一個同時適用於Web端和原生App的框架，請選擇React

React Native是一個用於經過Javascript構建移動端原生應用程序的庫。它與React.js相同，只是不使用Web組件，而是使用原生組件。若是你學過React.js，很快就能上手React Native，反之亦然。

// JS
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應用和移動端原生應用。若是你想同時作Web端開發和移動端開發，學習React對你來講是至關划算的。

阿里的Weex也是一個跨平臺UI項目，目前它以Vue爲靈感，使用了許多相同的語法，並計劃將來實現徹底集成Vue，不過集成的時間和具體細節還未肯定。因爲Vue的設計中將HTML模板做爲其核心部分之一，而且現有特性不支持自定義渲染，所以以Vue.js目前的形態來講，很難看到Weex與之的關係將能像React和React Native同樣緊密。

若是你想要最大的生態圈，請使用React

毫無疑問，React目前比Vue要受歡迎許多——它在NPM上每月的下載量約爲250萬次，而Vue只有22.5萬次。

人氣帶來的好處不只是表面上的名聲，還意味着更多相關的技術文章，教程和更多Stack Overflow上的解答和幫助；以及有着更多的工具和插件能夠在項目中使用，開發者不用從零開始，能夠省不少力氣。

這兩個框架都是開源的，可是React誕生於Facebook，自帶給力的資助，它的開發者和Facebook都承諾會持續維護React。而Vue則是由獨立開發者尤雨溪創造，目前也只有他一名全職維護者。雖然也有一些公司資助Vue，可是規模和Facebook和Google沒得比。

不過因爲Vue的團隊的努力，它的小規模和獨立性並無成爲劣勢。Vue有着固定的發佈週期，甚至更使人稱道的是，Github上Vue只有54個待解決問題（open issue），已關閉問題（closed issue）則有3456個；與之相比，React的已關閉問題數目相差很少（3447個），待解決問題卻有多達530個。