React與Vue有什麼不同？

第一次翻譯文章，挑了一篇簡單的，而且是從國外人的眼中看點React和Vue的區別。原文地址：How Is React Different from Vue?

話不多說，下面開始正文：

最近我發表了一篇文章關於最牛前端框架的用法。這兩個框架分別是有統治地位的React和爆髮式增長的Vue。如果當前趨勢繼續下去，到明年這個時候，Vue將超越Angular作為前端第二框架。

過去3年我都在使用React搭建一個客戶服務公司的網站。大多數時候，客戶指定告訴我們他們想要使用React。然後，似乎只是時間的問題，Vue即將也會是討論中的一大部分。下面的觀點是我理解兩個框架後的不同的闡述，因此我可以給客戶更好的建議。

雖然我在工作中使用了三年的React並且享受它，我也將嘗試在下面的觀點中儘可能保持平衡，儘管有些知識的差距會在Vue中不經意地出現。

從最近開始

我將開始我的論點。React和Vue相當的像，但我即將簡短地討論它們一些關鍵的不同。這些理解來自於尤雨溪，Vue的作者，使用React作為它的靈感。它們的熱議比後面兩個框架討論的要多，Angular和Ember。從Vue的文檔中，我們看到兩者之間（共通點）：

• 虛擬DOM
• 提供響應式和可組合性的視圖組件
• 在重點放在核心庫，關注像路由和全局狀態的管理的處理來自於第三方庫

來自最終產品的立場，我不知道客戶（或者產品使用者）將能夠討論更多的不同，如果他們的app使用Vue或者React搭建。它們表現力相似並且他們都具備開發大項目或者小項目的能力。

如果你想要通過各種平台發送內容，web 和 移動端，舉個例子，React因為有優秀的React Native而有優勢。我的同事也使用React構建嵌入式電視應用程序，這可能是另一個React使用平台的例子。Vue把Weex作為原生手機開發的選擇，因此它可能將要解決你的問題。

React也有一個巨大的生態，可以幫助它快速增長。如果你的app需要一個關鍵的特點或者形態，React社區的有些人可能已經解決了這個問題。實際上，你可能找到幾種解決方法。

客戶們關注的另一個問題，我公司與客戶合作能夠找到熟悉他們所投資的框架的開發人員。React在這方面也有優勢，儘管目前看來社這樣的。

其他的不同主要來自於開發者的喜好。他們涉及到一些權衡，我沒有看到清晰正確或者錯誤的答案。我將在下章討論這些。

概要:

如果你的team已經熟悉React了，切換使用Vue是沒有優勢的（下面的警告）。如果你的團隊一次構建前後端應用或者來自於Backbone或者AngularJS的遷移，你應該關注Vue，儘管React保留我上面提及的優勢。其他因素取決於我將在下面討論的開發人員偏好。

不同之處

在React和Vue之間最好的比較可以從查閱Vue的文檔（非常好），Vue相當好的解決了這個問題。它相當的有用，因為文檔來自於尤雨溪和Dan Abramov（React團隊的成員）和合作。它也能作為一個我有任何偏見的一個平衡點。

性能

Vue和React在性能上是相似的。Vue的文檔上說它有微小的優勢在眾多案例中，然而，最近的基準顯示React16優於Vue2.5。在優化性能時有一些差異...

在react中，當組件狀態改變時，它會觸發整個子組件數重新渲染，以·根組件作為渲染基點。為了避免不必要的子組件重新渲染，你需要使用PureComponent或者實現 shouldComponentUpdate，只要你可以。

在Vue中，一個組件在渲染期間依賴於自動追蹤，因此系統知道提前預判哪一個組件需要渲染當組件狀態發生改變時。每個組件可以被認為具有自動為你實現shouldComponentUpdate，沒有嵌套的組件注意事項。

總的來說，這不需要開發人員對整個性能進行優化，而是允許他們更專註於構建應用程序本身。

Templating vs JSX

另一個大的不同來自於Vue使用templates與React的JSX的比較。許多開發者不喜歡templating語言。vue回應...

有些人爭論你需要學習一個額外的DSL（Domain-Specific Language，特定領域的語言）去能寫模板，我們相信這種差異至多是膚淺的。首先，JSX不明白用戶不想要學習任何其他東西，它早扁平的JavaScript中增加了語法，因此熟悉JavaScript的人可以很容易地學習，但是說它基本上是免費的，這是誤導性的。類似地，模板只是簡單的HTML之上的附加語法，因此對於那些已經熟悉HTML的人來說學習成本非常低。關於DSL我們還能夠幫助用戶寫更少的代碼做的更多（例如 v-on 修飾符）。相同的任務可能包含更多的代碼當使用普通的JSX或渲染函數時。

我關注的是你在JSX使用mix和一個模板語言，你的應用有更多的複雜性，它更加容易從一個組件到下一個組件，當你堅持一個範例來避免上下文切換的開銷。但是明智的人不同意這種觀點。

CSS

Vue處理CSS的方式相當不錯。 Vue文檔首先指出，CSS-in-JS是一種非常受歡迎的React範圍CSS方法。 然後它繼續說...

如果您是CSS-in-JS的粉絲，許多流行的CSS-in-JS庫支持Vue（例如，style-components-vue和vue-emotion）。 React和Vue之間的主要區別在於，Vue中的默認樣式是通過單個文件組件中比較熟悉的樣式標籤。

包含CSS的單文件組件對我來說看起來不錯。 以下是文檔中示例組件的屏幕截圖。 注意底部的<style>標籤。

通過在組件文件中包含該標籤，您可以獲得組件範圍的CSS和語法高亮顯示。 實現React的CSS-in-JS解決方案也更簡單一些。

生態

如前所述，React的生態是比Vue的大的。這有益於使用React，但是它也使讓新手感覺壓倒性的。Vue留給社區的很少，取代的是讓重要的庫保持同步：

Vue用於狀態管理和路由（以及其他問題）的配套庫全部得到官方支持，並與核心庫保持同步。 反而選擇把這些問題留給社區，創造一個更加分散的生態系統。 儘管如此，React的生態系統比Vue更為豐富。

狀態管理

對於我來說，這是一個很重要的區別。在React中一個比較大的內容就是函數式編程。如果你是用改過現在流行的Redux狀態管理庫，你大部分的開發時間都是在寫函數式的內容。

這僅僅是一些東西但近幾年卻在巨大的JavaScript社區有很大的影響力。React沒有發明函數式編程，它是相當老的一個概念了。但是它使自己流行於近代的編程語言中。它是一個很有用的方式幫助我寫更好的代碼。

另一個函數式編程的特點是不可變性。最近一次的演講解釋為什麼不可變性是重要的參考，想法是控制所謂的「副作用」，並使管理應用程序狀態更容易和更可預測。

現在，React它自己不完全是一個函數式的庫在理解上。Mobx是一個流行的React狀態管理庫，它有可變的狀態。通過Vue的文檔：

MobX在React社區非常流行，它實際上使用了與Vue幾乎相同的反應性系統。 在一定程度上，React + MobX工作流可以被認為是一個更加詳細的Vue，所以如果你使用這個組合併且很享受，那麼跳進Vue可能是下一個邏輯步驟。

Mobx加React基本上是一個增大版的Vue？ — Evan You

對於Vue，另外一個流行的狀態管理選擇是Vuex。引用來自一篇文章比較Redux和Vuex的話，下面比較的不同可以友好的給予啟發：

與Redux類似，Vuex也受到Flux的啟發。 然而，與Redux不同的是，Vuex改變了狀態，而不是使狀態不可變，並像Redux的「reducer」函數一樣完全替代它。

這允許Vue.js在狀態改變時自動知道哪些指令需要重新渲染。 Vuex不用專門的減速器來分解狀態邏輯，而是可以用稱為模塊的存儲來組織它的狀態邏輯。

儘管這是一個公正的技術爭論，來自於去多開發者的主要觀點。如果在函數式編程開發對你很重要，React將可能對你有更多的吸引（這其中可能有例外，使用Mobx）。如果不是，Vue可能更有吸引力。

其他的觀點

來自於Dan Abramov，最近一系列的tweets，為了回復一個tweet關於比較React不支撐Vue，我覺得值得分享。Dan是React的成員，並且他有稍微的傾向在他的評論中，但他們幾乎不提出觀點討論React和Vue的不同：

儘管您的需求越來越複雜，React專註於使您的代碼易於理解。 不要簡單的例子越短越好

??

— Dan Abramov

我在最後引用尤雨溪的話。它來自於Vivian Cromwell的採訪。問題是關於Vue和其他框架有怎樣的不同：

如果你喜歡這篇文章，訂閱我的每周新聞。我提供最好的JavaScript文章來自於Web，每周四推送給讀者。

期待下次，開心編碼...