面試題：談?wù)刅ue和React的區(qū)別？
在我之前寫的 localStorage與Vuex的區(qū)別 這篇文章中講過關(guān)于這個類型的題目，其中分析過描述區(qū)別，就是求同存異的過程。那接下來我用同樣的思路來解這道題目。
首先找到 Vue 和 React 的共性，它們被用于解決什么問題， 然后再挖掘各自獨(dú)特的個性、設(shè)計原理以及未來的趨勢等。
共同點(diǎn)
Vue和React存在著很多的共同點(diǎn)：
數(shù)據(jù)驅(qū)動視圖 組件化 都使用 Virtual DOM
1. 數(shù)據(jù)驅(qū)動視圖
在jquery時代，我們需要頻繁的操作DOM來實(shí)現(xiàn)頁面效果與交互；而Vue和React 解決了這一痛點(diǎn)，采用數(shù)據(jù)驅(qū)動視圖方式，隱藏操作DOM的頻繁操作。所以我們在開發(fā)時，只需要關(guān)注數(shù)據(jù)變化即可，但是二者實(shí)現(xiàn)方式不盡相同。
2. 組件化
React與Vue都遵循組件化思想，它們把注意力放在UI層，將頁面分成一些細(xì)塊，這些塊就是組件，組件之間的組合嵌套就形成最后的網(wǎng)頁界面。
所以在開發(fā)時都有相同的套路，比如都有父子組件傳遞， 都有數(shù)據(jù)狀態(tài)管理、前端路由、插槽等。
3. Virtual DOM
Vue與React都使用了 Virtual DOM + Diff算法， 不管是Vue的Template模板+options api 寫法， 還是React的Class或者Function寫法,最后都是生成render函數(shù)，而render函數(shù)執(zhí)行返回VNode(虛擬DOM的數(shù)據(jù)結(jié)構(gòu)，本質(zhì)上是棵樹)。
當(dāng)每一次UI更新時，總會根據(jù)render重新生成最新的VNode，然后跟以前緩存起來老的VNode進(jìn)行比對，再使用Diff算法（框架核心）去真正更新真實(shí)DOM（虛擬DOM是JS對象結(jié)構(gòu)，同樣在JS引擎中，而真實(shí)DOM在瀏覽器渲染引擎中，所以操作虛擬DOM比操作真實(shí)DOM開銷要小的多）
Vue和React通用流程：
不同點(diǎn)
Vue和React兩者雖然都是用于構(gòu)建用戶界面的框架，但是也有很大的差異，首先二者核心的思想就不同。
1. 核心思想不同
Vue早期開發(fā)就尤雨溪大佬，所以定位就是盡可能的降低前端開發(fā)的門檻，讓更多的人能夠更快地上手開發(fā)。這就有了vue的主要特點(diǎn)：靈活易用的漸進(jìn)式框架，進(jìn)行數(shù)據(jù)攔截/代理，它對偵測數(shù)據(jù)的變化更敏感、更精確。
React 從一開始的定位就是提出 UI 開發(fā)的新思路。背靠大公司Facebook 的React，從開始起就不缺關(guān)注和用戶，而且React想要做的是用更好的方式去顛覆前端開發(fā)方式。所以React推崇函數(shù)式編程（純組件），數(shù)據(jù)不可變以及單向數(shù)據(jù)流,當(dāng)然需要雙向的地方也可以手動實(shí)現(xiàn)， 比如借助onChange和setState來實(shí)現(xiàn)。
由于兩者核心思想的不同，所以導(dǎo)致Vue和React在后續(xù)設(shè)計產(chǎn)生了許多的差異。
2. 組件寫法差異
React推薦的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都寫進(jìn) JavaScript 中,即 all in js; Vue 推薦的做法是 template 的單文件組件格式(簡單易懂，從傳統(tǒng)前端轉(zhuǎn)過來易于理解),即 html,css,JS 寫在同一個文件(vue也支持JSX寫法)
這個差異一定程度上也是由于二者核心思想不同而導(dǎo)致的。
3. diff算法不同
傳統(tǒng)Diff算法是循環(huán)遞歸每一個節(jié)點(diǎn)：
如上圖所示，從左側(cè)a節(jié)點(diǎn)依次進(jìn)行對比：a->d、a->e、a->b、a->a、a->c, 剩下的其他節(jié)點(diǎn)也是與右側(cè)樹每個節(jié)點(diǎn)進(jìn)行對比。
將兩顆樹中所有的節(jié)點(diǎn)一一對比需要
O(n2)的復(fù)雜度，在對比過程中發(fā)現(xiàn)舊節(jié)點(diǎn)在新的樹中未找到，那么就需要把舊節(jié)點(diǎn)刪除，刪除一棵樹的一個節(jié)點(diǎn)(找到一個合適的節(jié)點(diǎn)放到被刪除的位置)的時間復(fù)雜度為O(n),同理添加新節(jié)點(diǎn)的復(fù)雜度也是O(n),合起來diff兩個樹的復(fù)雜度就是O(n3)
傳統(tǒng)Diff算法復(fù)雜度太高， vue2.x加入了 Virtual Dom和react擁有相同的diff優(yōu)化原則（將算法復(fù)雜度降為O(n)）。
兩者流程思路上是類似的：
不同的組件產(chǎn)生不同的 DOM 結(jié)構(gòu)。當(dāng)type不相同時，對應(yīng)DOM操作就是直接銷毀老的DOM，創(chuàng)建新的DOM。 同一層次的一組子節(jié)點(diǎn)，可以通過唯一的 key 區(qū)分。
網(wǎng)絡(luò)上看到一張圖挺形象的圖：
但是在源碼實(shí)現(xiàn)上又完全不同：
React的Diff算法核心實(shí)現(xiàn)
react首先對新集合進(jìn)行遍歷， for( name in nextChildren)。通過唯一key來判斷老集合中是否存在相同的節(jié)點(diǎn)。如果沒有的話創(chuàng)建 如果有的話， if (preChild === nextChild )會將節(jié)點(diǎn)在新集合中的位置和在老集合中l(wèi)astIndex進(jìn)行比較 如果 if (child._mountIndex < lastIndex)進(jìn)行移動操作，否則不進(jìn)行移動操作。如果遍歷的過程中，發(fā)現(xiàn)在新集合中沒有，但在老集合中有的節(jié)點(diǎn)，會進(jìn)行刪除操作
Vue的Diff算法核心實(shí)現(xiàn)
updateChildren是vue diff的核心, 過程可以概括為：
舊children和新children各有兩個頭尾的變量StartIdx和EndIdx，它們的2個變量相互比較，一共有4種比較方式。如果4種比較都沒匹配，如果設(shè)置了key，就會用key進(jìn)行比較，在比較的過程中，變量會往中間靠，一旦 StartIdx>EndIdx表明舊children和新children至少有一個已經(jīng)遍歷完了，就會結(jié)束比較。
可以用下圖來描述在一次比較過程中四個步驟：
Vue2的核心Diff算法采用了雙端比較的算法，同時從新舊children的兩端開始進(jìn)行比較，借助key值找到可復(fù)用的節(jié)點(diǎn)，再進(jìn)行相關(guān)操作。相比React的Diff算法，同樣情況下可以減少移動節(jié)點(diǎn)次數(shù)，減少不必要的性能損耗，更加的優(yōu)雅。
4. 響應(yīng)式原理不同
Vue
Vue依賴收集，自動優(yōu)化，數(shù)據(jù)可變。 Vue遞歸監(jiān)聽data的所有屬性,直接修改。 當(dāng)數(shù)據(jù)改變時，自動找到引用組件重新渲染。
React
React基于狀態(tài)機(jī)，手動優(yōu)化，數(shù)據(jù)不可變，需要setState驅(qū)動新的state替換老的state。當(dāng)數(shù)據(jù)改變時，以組件為根目錄，默認(rèn)全部重新渲染, 所以 React 中會需要 shouldComponentUpdate 這個生命周期函數(shù)方法來進(jìn)行控制
5. 其他不同點(diǎn)
除了上面的四個點(diǎn)外，細(xì)數(shù)還有很多不同點(diǎn)的， 比如api的差異也挺大的，Vue為了更加簡單易用，引入了指令、filter等概念以及大量的option API,比如 watch、computed等都是非常好用的。
而React的API比較少， 如果你的JavaScript基礎(chǔ)比較好，上手也是比較容易的
當(dāng)然如果你看過二者的源碼，也可以說說二者源碼的不同點(diǎn)。這里拋出它們的源碼編譯過程圖，方便你更好的閱讀源碼。
Vue源碼編譯過程圖：
React源碼編譯過程圖：
以上就是關(guān)于Vue和React的區(qū)別講解， 當(dāng)面試官問到這個問題時，重點(diǎn)在于分析思路， 抓住要點(diǎn)去擴(kuò)展。最后我們還可以談?wù)勎磥戆l(fā)展趨勢，其實(shí)隨著Vue3的更新，和React在使用上相似度越來越高， 其實(shí)對于開發(fā)者來說挺好的， 上手一個框架后再學(xué)另一個，學(xué)習(xí)成本就會有所降低。
推薦閱讀