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">n <p>{{ message }}</p>n <button v-on:click="reverseMessage">Reverse Message</button>n</div>nnnew Vue({n el: #app,n data: {n message: Hello Vue.js!n },n methods: {n reverseMessage: function () {n this.message = this.message.split().reverse().join();n }n }n});n

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

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

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

但是，使用模板需要學習所有的HTML擴展語法，渲染函數只需要了解標準的HTML和JavaScript

如果你希望簡單易上手，那麼請選擇Vue

一個簡單的Vue項目可以不需要解析，直接在瀏覽器中運行，這允許Vue可以像jQuery一樣在項目中引用。

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

在React中State是不可以直接改變的，需要調用setState介面：

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

當前和之前的狀態差異讓React知道什麼時候在DOM中重新渲染以及渲染什麼，因此不可變的狀態是非常必要的。

相比之下，數據可以在Vue中突變。相同的數據屬性在Vue中發生變化更為簡單。

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

在你得出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; nimport { AppRegistry, Text, View } from react-native; nclass HelloWorld extends Component { n render() { n return ( n <View> n <Text>Hello, React Native!</Text>n </View>n ); n }n}nAppRegistry.registerComponent(HelloWorld, () => HelloWorld);n

重要的是，開發人員可以構建一個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！