面試官：談?wù)刅ue和React的區(qū)別？

在我之前寫(xiě)的 localStorage與Vuex的區(qū)別 這篇文章中講過(guò)關(guān)于這個(gè)類(lèi)型的題目，其中分析過(guò)描述區(qū)別，就是求同存異的過(guò)程。那接下來(lái)我用同樣的思路來(lái)解這道題目。

首先找到 Vue 和 React 的共性，它們被用于解決什么問(wèn)題， 然后再挖掘各自獨(dú)特的個(gè)性、設(shè)計(jì)原理以及未來(lái)的趨勢(shì)等。

共同點(diǎn)

Vue和React存在著很多的共同點(diǎn)：

• 數(shù)據(jù)驅(qū)動(dòng)視圖
• 組件化
• 都使用 Virtual DOM

1. 數(shù)據(jù)驅(qū)動(dòng)視圖

在jquery時(shí)代，我們需要頻繁的操作DOM來(lái)實(shí)現(xiàn)頁(yè)面效果與交互；而Vue和React 解決了這一痛點(diǎn)，采用數(shù)據(jù)驅(qū)動(dòng)視圖方式，隱藏操作DOM的頻繁操作。所以我們?cè)陂_(kāi)發(fā)時(shí)，只需要關(guān)注數(shù)據(jù)變化即可，但是二者實(shí)現(xiàn)方式不盡相同。

2. 組件化

React與Vue都遵循組件化思想，它們把注意力放在UI層，將頁(yè)面分成一些細(xì)塊，這些塊就是組件，組件之間的組合嵌套就形成最后的網(wǎng)頁(yè)界面。

所以在開(kāi)發(fā)時(shí)都有相同的套路，比如都有父子組件傳遞， 都有數(shù)據(jù)狀態(tài)管理、前端路由、插槽等。

3. Virtual DOM

Vue與React都使用了 Virtual DOM + Diff算法， 不管是Vue的Template模板+options api 寫(xiě)法， 還是React的Class或者Function寫(xiě)法,最后都是生成render函數(shù)，而render函數(shù)執(zhí)行返回VNode(虛擬DOM的數(shù)據(jù)結(jié)構(gòu)，本質(zhì)上是棵樹(shù))。

當(dāng)每一次UI更新時(shí)，總會(huì)根據(jù)render重新生成最新的VNode，然后跟以前緩存起來(lái)老的VNode進(jìn)行比對(duì)，再使用Diff算法（框架核心）去真正更新真實(shí)DOM（虛擬DOM是JS對(duì)象結(jié)構(gòu)，同樣在JS引擎中，而真實(shí)DOM在瀏覽器渲染引擎中，所以操作虛擬DOM比操作真實(shí)DOM開(kāi)銷(xiāo)要小的多）

Vue和React通用流程：

不同點(diǎn)

Vue和React兩者雖然都是用于構(gòu)建用戶(hù)界面的框架，但是也有很大的差異，首先二者核心的思想就不同。

1. 核心思想不同

Vue早期開(kāi)發(fā)就尤雨溪大佬，所以定位就是盡可能的降低前端開(kāi)發(fā)的門(mén)檻，讓更多的人能夠更快地上手開(kāi)發(fā)。這就有了vue的主要特點(diǎn)：靈活易用的漸進(jìn)式框架，進(jìn)行數(shù)據(jù)攔截/代理，它對(duì)偵測(cè)數(shù)據(jù)的變化更敏感、更精確。

React 從一開(kāi)始的定位就是提出 UI 開(kāi)發(fā)的新思路。背靠大公司Facebook 的React，從開(kāi)始起就不缺關(guān)注和用戶(hù)，而且React想要做的是用更好的方式去顛覆前端開(kāi)發(fā)方式。所以React推崇函數(shù)式編程（純組件），數(shù)據(jù)不可變以及單向數(shù)據(jù)流,當(dāng)然需要雙向的地方也可以手動(dòng)實(shí)現(xiàn)， 比如借助onChange和setState來(lái)實(shí)現(xiàn)。

由于兩者核心思想的不同，所以導(dǎo)致Vue和React在后續(xù)設(shè)計(jì)產(chǎn)生了許多的差異。

2. 組件寫(xiě)法差異

React推薦的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都寫(xiě)進(jìn) JavaScript 中,即 all in js; Vue 推薦的做法是 template 的單文件組件格式(簡(jiǎn)單易懂，從傳統(tǒng)前端轉(zhuǎn)過(guò)來(lái)易于理解),即 html,css,JS 寫(xiě)在同一個(gè)文件(vue也支持JSX寫(xiě)法)

這個(gè)差異一定程度上也是由于二者核心思想不同而導(dǎo)致的。

3. diff算法不同

傳統(tǒng)Diff算法是循環(huán)遞歸每一個(gè)節(jié)點(diǎn)：

如上圖所示，從左側(cè)a節(jié)點(diǎn)依次進(jìn)行對(duì)比：a->d、a->e、a->b、a->a、a->c, 剩下的其他節(jié)點(diǎn)也是與右側(cè)樹(shù)每個(gè)節(jié)點(diǎn)進(jìn)行對(duì)比。

將兩顆樹(shù)中所有的節(jié)點(diǎn)一一對(duì)比需要O(n2)的復(fù)雜度，在對(duì)比過(guò)程中發(fā)現(xiàn)舊節(jié)點(diǎn)在新的樹(shù)中未找到，那么就需要把舊節(jié)點(diǎn)刪除，刪除一棵樹(shù)的一個(gè)節(jié)點(diǎn)(找到一個(gè)合適的節(jié)點(diǎn)放到被刪除的位置)的時(shí)間復(fù)雜度為O(n),同理添加新節(jié)點(diǎn)的復(fù)雜度也是O(n),合起來(lái)diff兩個(gè)樹(shù)的復(fù)雜度就是O(n3)

傳統(tǒng)Diff算法復(fù)雜度太高， vue2.x加入了 Virtual Dom和react擁有相同的diff優(yōu)化原則（將算法復(fù)雜度降為O(n)）。

兩者流程思路上是類(lèi)似的：

• 不同的組件產(chǎn)生不同的 DOM 結(jié)構(gòu)。當(dāng)type不相同時(shí)，對(duì)應(yīng)DOM操作就是直接銷(xiāo)毀老的DOM，創(chuàng)建新的DOM。
• 同一層次的一組子節(jié)點(diǎn)，可以通過(guò)唯一的 key 區(qū)分。

網(wǎng)絡(luò)上看到一張圖挺形象的圖：

但是在源碼實(shí)現(xiàn)上又完全不同：

React的Diff算法核心實(shí)現(xiàn)

1. react首先對(duì)新集合進(jìn)行遍歷，for( name in nextChildren)。
2. 通過(guò)唯一key來(lái)判斷老集合中是否存在相同的節(jié)點(diǎn)。如果沒(méi)有的話(huà)創(chuàng)建
3. 如果有的話(huà)，if (preChild === nextChild )
• 會(huì)將節(jié)點(diǎn)在新集合中的位置和在老集合中l(wèi)astIndex進(jìn)行比較
• 如果if (child._mountIndex < lastIndex) 進(jìn)行移動(dòng)操作，否則不進(jìn)行移動(dòng)操作。
4. 如果遍歷的過(guò)程中，發(fā)現(xiàn)在新集合中沒(méi)有，但在老集合中有的節(jié)點(diǎn)，會(huì)進(jìn)行刪除操作

Vue的Diff算法核心實(shí)現(xiàn)

updateChildren是vue diff的核心, 過(guò)程可以概括為：

• 舊children和新children各有兩個(gè)頭尾的變量StartIdx和EndIdx，它們的2個(gè)變量相互比較，一共有4種比較方式。
• 如果4種比較都沒(méi)匹配，如果設(shè)置了key，就會(huì)用key進(jìn)行比較，在比較的過(guò)程中，變量會(huì)往中間靠，一旦StartIdx>EndIdx表明舊children和新children至少有一個(gè)已經(jīng)遍歷完了，就會(huì)結(jié)束比較。

可以用下圖來(lái)描述在一次比較過(guò)程中四個(gè)步驟：

Vue2的核心Diff算法采用了雙端比較的算法，同時(shí)從新舊children的兩端開(kāi)始進(jìn)行比較，借助key值找到可復(fù)用的節(jié)點(diǎn)，再進(jìn)行相關(guān)操作。相比React的Diff算法，同樣情況下可以減少移動(dòng)節(jié)點(diǎn)次數(shù)，減少不必要的性能損耗，更加的優(yōu)雅。

4. 響應(yīng)式原理不同

Vue

• Vue依賴(lài)收集，自動(dòng)優(yōu)化，數(shù)據(jù)可變。
• Vue遞歸監(jiān)聽(tīng)data的所有屬性,直接修改。
• 當(dāng)數(shù)據(jù)改變時(shí)，自動(dòng)找到引用組件重新渲染。

React

React基于狀態(tài)機(jī)，手動(dòng)優(yōu)化，數(shù)據(jù)不可變，需要setState驅(qū)動(dòng)新的state替換老的state。當(dāng)數(shù)據(jù)改變時(shí)，以組件為根目錄，默認(rèn)全部重新渲染, 所以 React 中會(huì)需要 shouldComponentUpdate 這個(gè)生命周期函數(shù)方法來(lái)進(jìn)行控制

5. 其他不同點(diǎn)

除了上面的四個(gè)點(diǎn)外，細(xì)數(shù)還有很多不同點(diǎn)的， 比如api的差異也挺大的，Vue為了更加簡(jiǎn)單易用，引入了指令、filter等概念以及大量的option API,比如 watch、computed等都是非常好用的。

而React的API比較少， 如果你的JavaScript基礎(chǔ)比較好，上手也是比較容易的

當(dāng)然如果你看過(guò)二者的源碼，也可以說(shuō)說(shuō)二者源碼的不同點(diǎn)。這里拋出它們的源碼編譯過(guò)程圖，方便你更好的閱讀源碼。

Vue源碼編譯過(guò)程圖：

React源碼編譯過(guò)程圖：

以上就是關(guān)于Vue和React的區(qū)別講解， 當(dāng)面試官問(wèn)到這個(gè)問(wèn)題時(shí)，重點(diǎn)在于分析思路， 抓住要點(diǎn)去擴(kuò)展。最后我們還可以談?wù)勎磥?lái)發(fā)展趨勢(shì)，其實(shí)隨著Vue3的更新，和React在使用上相似度越來(lái)越高， 其實(shí)對(duì)于開(kāi)發(fā)者來(lái)說(shuō)挺好的， 上手一個(gè)框架后再學(xué)另一個(gè)，學(xué)習(xí)成本就會(huì)有所降低。

面試題：你了解瀏覽器的事件循環(huán)嗎？

面試題：實(shí)際開(kāi)發(fā)中都做過(guò)哪些性能優(yōu)化？

上面這兩道題你更想知道哪一個(gè)的分析呢？或者你有更好的面試題？歡迎留言，可能下一個(gè)問(wèn)題就是想了解的