React 和 Vue 的區別

博主面了幾家公司，看簡歷上寫著使用Vue.js框架，就會問，你能說一說 vue 和 react的區別嗎 ？react 聽過，沒用過，所以就只能尷尬的說不怎么了解react。這不，最近剛學了react (不斷爬坑中)，同時看了些博客文章，當一回搬運工，如有錯誤，請指出 ～

簡單的自我介紹一下

React是由Facebook創建的JavaScript UI框架，它的誕生改變了JavaScript世界，最大的一個改變就是React推廣了Virtual DOM， 并且創造了新的語法 - JSX，JSX 允許在JavaScript中寫html代碼。

Vue是由尤大大開發的一個MVVM框架，它采用的是模板系統而不是JSX。

安利一波

Virtual DOM

一聽可能有點懵逼 ？我也很懵逼。所以我們來看看別人怎么說的 ：Vue.js(2.0版本)與React的其中最大一個相似之處，就是他們都使用了一種叫'Virtual DOM'的東西。所謂的Virtual DOM基本上說就是它名字的意思：虛擬DOM，DOM樹的虛擬表現。

Virtual DOM 是一個映射真實DOM的JavaScript對象，如果我們要改變任何元素的狀態，那么是先在Virtual DOM 上先進行改變，而不是直接地去修改真實的DOM。比如在Vue中，我們將原來的節點改成這樣 :// 原DOM<div class='box'><p class='label'><span>{{ label }}</span></p></div>// 修改的DOM<div class='box'><p class='label'><span>{{ label }}</span><span>{{ username }}</span></p></div>我們往p節點中新增了一個span節點，于是我們一個新的Virtual DOM對象會被創建。然后新的Virtual DOM 和舊的Virtual DOM比較，通過diff算法，算出差異，然后這些差異就會被應用在真實的DOM上

Vue 很“ 囂張 ”，它宣稱可以更快地計算出Virtual DOM的差異，這是由于它在渲染過程中，由于vue會跟蹤每一個組件的依賴收集，通過setter / getter 以及一些函數的劫持，能夠精確地知道變化，并在編譯過程標記了static靜態節點，在接下來新的Virtual DOM 并且和原來舊的 Virtual DOM進行比較時候，跳過static靜態節點。所以不需要重新渲染整個組件樹。

React默認是通過比較引用的方式進行，當某個組件的狀態發生變化時，它會以該組件為根，重新渲染整個組件子樹。如果想避免不必要的子組件重新渲染，你需要在所有可能的地方使用PureComponent，或者手動實現shouldComponentUpdate方法。但是Vue中，你可以認定它是默認的優化。

構建工具

React 采用 Create-React-App， Vue 采用的是Vue-Cli，這兩個工具非常的好用啊，大兄弟，都能為你創建一個好環境，不過Create-Reacr-App會逼迫你使用webpack和Babel，而Vue-cli可以按需創建不同的模板，使用起來更加靈活一點

數據流

（這里借用一波言川老鐵的圖，下邊會貼出鏈接）

很直觀的，我們可以看到，在Vue2.x中，只能parent -> Child <-> DOM的形式，而React只能單向傳遞，React一直提倡的是單向數據流，數據主要從父節點傳遞到子節點（通過props）。如果頂層（父級）的某個props改變了，React會重渲染所有的子節點。我們只能通過setState來改變狀態。

模板渲染方式不同

前面說了，Vue和React的模板有所區別，React是通過JSX來渲染模板，而Vue是通過擴展的HTML來進行模板的渲染。React通過原生JS實現模板中的常見語法，比如說條件啊、循環啊、三元運算符啊等，都是通過JS語法實現。而Vue是在和組件代碼分離的單獨模板中，通過指令v-if、v-for等實現。

這里react比較好點，比如我們要引用一個組件，react直接import 引入，然后可以直接在render中調用了，但是！！vue需要import之后，還要在components里去聲明，才能用，好氣哦 ～

Vuex 和 Redux

在Vue中，我們是通過Vuex進行狀態管理，而在React中，我們是通過Redux進行狀態管理。但是這兩者在使用上還是有區別的。

在vuex中，我們可以通過在main.js中，引入 store文件夾，并把store掛載到new Vue實例中，這樣我們可以直接通過$store靈活使用。

• 你可以通過dispatch和commit進行更新數據，通過this.$store.state.xx讀取數據
• 或者你可以通過mapState / mapActions 進行vuex的操作

而在React中，我們需要每一個組件都引入connect，目的就是把props和dispatch連接起來。

另外！！！我們vuex可以直接dispatch action也可以commit update，但是redux只能通過dispatch，然后在reducer里，接收到action，通過判斷action的type，從而進行對應的操作，redux不能直接調用reducer進行修改！！

Redux使用的是不可變的數據，而Vuex的數據是可變的，Redux每次修改更新數據，其實就是用新的數據替換舊的數據，而Vuex是直接修改原數據Redux 在檢測數據變化的時候，是通過 diff 的方式比較差異的，而Vuex其實和Vue的原理一樣，是通過 getter/setter來比較的，因為在vue實例的時候，進行了依賴收集。

不差上下？

反正我覺得他們兩個都好，skr，skr，如果你想做一個小型項目就用vue，想做大型項目就用react，我是不知道怎樣算小型，怎樣算大型，我隨心所欲，想用哪個就用哪個，我不會告訴你，我都是做的個人小項目 ～

---

相關鏈接

言川 - 關于Vue和React區別的一些筆記: https://github.com/lihongxun945/myblog/issues/21

Vue 官網 - 對比其他框架: https://cn.vuejs.org/v2/guide/comparison.html

眾成翻譯 - Vue vs React: Javascript 框架之戰 : https://www.zcfy.cc/article/vue-vs-react-battle-of-the-javascript-frameworks-3310.html?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com

個人博客: http://blog.pengdaokuan.cn:4001

總結

以上是生活随笔為你收集整理的今天的考核题目: 你知道React和Vue的区别吗? skr，skr的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。