Vue與React比較

文叔叔發表於2018-09-06
VueReact

之前用到了Vue進行開發，後來用了React，然後總是被問到為什麼用React？總是說得有點模稜兩可,下面總結了一下，希望得到補充與指正

相同點

React 和 Vue 有許多相似之處，它們都有：

  • 使用 Virtual DOM，有自己的diff渲染演算法
  • 提供了響應式 (Reactive) 和元件化 (Composable) 的檢視元件。
  • 將注意力集中保持在核心庫，而將其他功能如路由和全域性狀態管理交給相關的庫。

1. 執行時效能比較

React 和 Vue 都是非常快的，所以速度並不是在它們之中做選擇的決定性因素。對於具體的資料表現，

Vue與React比較

Vue與React比較

Vue與React比較
可以看看第三方 benchmark，它專注於渲染/更新非常簡單的元件樹的真實效能。

1.1 生命週期

Vue的生命週期

Vue與React比較

React的生命週期

Vue與React比較

在 React 應用中，當某個元件的狀態發生變化時，它會以該元件為根，重新渲染整個元件子樹。

如要避免不必要的子元件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手動實現 shouldComponentUpdate 方法。同時你可能會需要使用不可變的資料結構來使得你的元件更容易被優化。

然而，使用 PureComponent 和 shouldComponentUpdate 時，需要保證該元件的整個子樹的渲染輸出都是由該元件的 props 所決定的。如果不符合這個情況，那麼此類優化就會導致難以察覺的渲染結果不一致。這使得 React 中的元件優化伴隨著相當的心智負擔。

在 Vue 應用中，元件的依賴是在渲染過程中自動追蹤的，所以系統能精確知曉哪個元件確實需要被重渲染。你可以理解為每一個元件都已經自動獲得了 shouldComponentUpdate，並且沒有上述的子樹問題限制。

 Vue 的這個特點使得開發者不再需要考慮此類優化，從而能夠更好地專注於應用本身。當然，對於大型應用來說，基於這一點，還是推薦使用React，畢竟可以自己決定哪些props或者state變化才進行reRender
複製程式碼

1.2 狀態管理 vs 物件屬性

React在state狀態管理儲存資料的，不能修改資料，修改資料在Setstate中 setState是非同步的，如果需要馬上利用結果，需要在setState傳入回撥，具體可以看看 React中setState幾個現象---先知道再理解

在Vue中，state物件並不是必須的，資料由data屬性在Vue物件中進行管理

2. HTML & CSS

在 React 中，一切都是 JavaScript。不僅僅是 HTML 可以用 JSX 來表達，現在的潮流也越來越多地將 CSS 也納入到 JavaScript 中來處理。這類方案有其優點，但也存在一些不是每個開發者都能接受的取捨。Vue 的整體思想是擁抱經典的 Web 技術，並在其上進行擴充套件。

2.1 JSX vs Templates

在 React 中，所有的元件的渲染功能都依靠 JSX。 使用 JSX 的渲染函式有下面這些優勢：

  • 你可以使用完整的程式語言 JavaScript 功能來構建你的檢視頁面。比如你可以使用臨時變數、JS 自帶的流程控制、以及直接引用當前 JS 作用域中的值等等。

  • 開發工具對 JSX 的支援相比於現有可用的其他 Vue 模板還是比較先進的 (比如，linting、型別檢查、編輯器的自動完成)。

雖然Vue也可以使用JSX，但基本都使用模版語法，這也帶來了一些特有的優勢：

  • 對於很多習慣了 HTML 的開發者來說，模板比起 JSX 讀寫起來更自然。這裡當然有主觀偏好的成分，但如果這種區別會導致開發效率的提升，那麼它就有客觀的價值存在。

  • 基於 HTML 的模板使得將已有的應用逐步遷移到 Vue 更為容易。

個人覺得，使用Vue的模版語法開發起來更加便捷快速。可以把元件區分為兩類：一類是偏檢視表現的 (presentational)，一類則是偏邏輯的 (logical)。我們推薦在前者中使用模板，在後者中使用 JSX 或渲染函式。這兩類元件的比例會根據應用型別的不同有所變化，但整體來說我們發現表現類的元件遠遠多於邏輯類元件。
複製程式碼

2.2 元件作用域內的 CSS

對於Vue 來說,

設定樣式的預設方法是單檔案元件裡類似 style 的標籤。 單檔案元件讓你可以在同一個檔案裡完全控制 CSS，將其作為元件程式碼的一部分。

<style scoped>
  .container{
      display:flex;
  }
</style>
複製程式碼

這個可選 scoped 屬性會自動新增一個唯一的屬性 (比如 data-v-8123) 為元件內 CSS 指定作用域。

對於React來說,

語法不太一樣，React設定class是用className欄位，而設定css是使用物件的形式，當然，一般還是引入外部的css(經過編譯的sass或者less檔案)比較合適。

規模

Vue 和 React 都提供了強大的路由來應對大型應用。React 社群在狀態管理方面非常有創新精神 (比如 Flux、Redux)，而這些狀態管理模式甚至 Redux 本身也可以非常容易的整合在 Vue 應用中。實際上，Vue 更進一步地採用了這種模式 (Vuex)，更加深入整合 Vue 的狀態管理解決方案 Vuex 相信能為你帶來更好的開發體驗。

兩者另一個重要差異是，Vue 的路由庫和狀態管理庫都是由官方維護支援且與核心庫同步更新的。React 則是選擇把這些問題交給社群維護，因此建立了一個更分散的生態系統。但相對的，React 的生態系統相比 Vue 更加繁榮。

個人觀點

  1. React對比Vue來說，Vue的學習成本更低，更容易入手，模版語法開發起來個人覺得會比React的Jsx更快。

  2. 由於React是需要setState更新狀態以及利用shouldComponentUpdate來控制是否reRender，當應用比較龐大的時候，這一點的優化比較重要。推薦大應用使用React。

相關文章