今天的考核題目: 你知道React和Vue的區別嗎? skr，skr

彭道寬發表於2018-08-01

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，我是不知道怎樣算小型，怎樣算大型，我隨心所欲，想用哪個就用哪個，我不會告訴你，我都是做的個人小專案～