【5年以上前端】Vue 和 React 的區(qū)別看這里 - 知乎

vue和react的區(qū)別_vue react-CSDN博客

Vue 和 React 有什么不同？_vue和react區(qū)別-CSDN博客?

1、相同點(diǎn)：

① 都使用了虛擬 DOM；

② 組件化開發(fā)；

③ 都是單向數(shù)據(jù)流（父子組件之間，不建議子修改父?jìng)飨聛淼臄?shù)據(jù)）；

④ 都支持服務(wù)端渲染

2、不同點(diǎn)：

①?響應(yīng)式原理不同

Vue 采用雙向數(shù)據(jù)綁定的響應(yīng)式原理，實(shí)現(xiàn)了數(shù)據(jù)更新自動(dòng)更新視圖；

Vue2 響應(yīng)式的特點(diǎn)就是依賴收集。數(shù)據(jù)變化的時(shí)候自動(dòng)派發(fā)更新。

初始化時(shí)通過 Object.defineProperty 遞歸劫持 data 所有屬性添加 getter / setter ，觸發(fā) getter 的時(shí)候進(jìn)行依賴收集，修改時(shí)觸發(fā) setter 自動(dòng)派發(fā)更新找到引用組件重新渲染。

Vue3 響應(yīng)式使用原生 Proxy 重構(gòu)了響應(yīng)式。

一是 proxy 不存在響應(yīng)式存在的缺陷，二是性能更好，不僅支持更多的數(shù)據(jù)結(jié)構(gòu)，而且不用一開始遞歸劫持對(duì)象屬性，而是代理第一層對(duì)象本身。運(yùn)行時(shí)才遞歸，用到才代理。

用 effect 副作用來代替 Vue2 里的 watcher ，用一個(gè)依賴管理中心 trackMap 來統(tǒng)一管理依賴代替 Vue2 中的 Dep ，這樣也不需要維護(hù)特別多的依賴關(guān)系，性能上取得很大進(jìn)步。

React 單向數(shù)據(jù)流，需要手動(dòng) setState 來更新視圖；

相比 Vue 的自動(dòng)化， React 則是基于狀態(tài)，單向數(shù)據(jù)流，數(shù)據(jù)不可變，需要手動(dòng) setstate 來更新，而且當(dāng)數(shù)據(jù)改變時(shí)會(huì)以組件根為目錄，默認(rèn)全部重新渲染整個(gè)組件樹，只能額外用
pureComponent / shouldComponentUpdate / useMemo / useallback 等方法來進(jìn)行控制，更新粒度更大一些

②?Diff 算法

?Vue2、Vue3 和 React 中 Diff 算法的區(qū)別_小草莓蹦蹦跳的博客-CSDN博客

Vue2 是同層比較新老 vnode ，新的不存在老的存在就刪除，新的存在老的不存在就創(chuàng)建，子節(jié)點(diǎn)采用雙指針頭對(duì)尾兩端對(duì)比的方式，全量 diff，然后移動(dòng)節(jié)點(diǎn)時(shí)通過 splice 進(jìn)行數(shù)組操作

Vue3 是采用 Map 數(shù)據(jù)結(jié)構(gòu)以及動(dòng)靜結(jié)合的方式，在編譯階段提前標(biāo)記靜態(tài)節(jié)點(diǎn)， Diff 過程中直接跳過有靜態(tài)標(biāo)記的節(jié)點(diǎn)，并目子節(jié)點(diǎn)對(duì)比會(huì)使用一個(gè) source 數(shù)組來記錄節(jié)點(diǎn)位置及最長遞增子序列算法優(yōu)化了對(duì)比流程，快 Diff ，需要外理的邊際條件會(huì)更少

React 是遞歸同層比較，標(biāo)識(shí)差異點(diǎn)保存到 Diff 隊(duì)列保存，得到 patch 樹，再統(tǒng)一操作批量更新 DOM 。 Diff 總共就是移動(dòng)、刪除、增加三個(gè)操作，如果結(jié)構(gòu)發(fā)生改變就直接卸載重新創(chuàng)建，如果沒有則將節(jié)點(diǎn)在新集合中的位置和老集合中的 lastIndex 進(jìn)行比較是否需要移動(dòng)，如果遍歷過程中發(fā)現(xiàn)新集合沒有，但老集合有就刪除

③ 模板語法不同：React 的JSX，Vue 的 template；

Vue 使用基于 HTML 的模板語法，可以將模板直接染成 DOM 元素。

React則采用 JSX 語法，通過 JSX 語法直接描述 UI 組件的結(jié)構(gòu)和樣式，再通過 React 的渲染函數(shù)將其轉(zhuǎn)化為真實(shí)的DOM元素。

④?狀態(tài)管理不同：React 的 Redux、mobx；Vue 的 Vuex、pinia

Vue 提供了 Vuex、pinia 狀態(tài)管理庫，使得狀態(tài)管理變得簡單和易于維護(hù)。

React 則提供了 Redux、mobx 等狀態(tài)管理工具，讓狀態(tài)管理更加靈活和可控。

個(gè)人感受方面來說的話，

React?官方只關(guān)注底層，上層應(yīng)用解決方案都交給社區(qū)，所以?React?生態(tài)體系豐富，社區(qū)強(qiáng)，而且每次更新改動(dòng)小等；

而?Vue?是由官方主導(dǎo)開發(fā)和維護(hù)，生態(tài)沒那么豐富，雖然上手比?React?簡單一些，但每次更新堪稱破土重來，改的倒是瀟灑得很，這就注定我們學(xué)習(xí)成本大大增加，并不能做到學(xué)習(xí)一次就可以一直使用這個(gè)框架，1.0 改版 2.0 需要重新學(xué)習(xí)一遍，2.0 改版 3.0 又要學(xué)習(xí)一遍，甚至 3.0 到 3.2 都要重學(xué)一部分。

像是需要記的?API，React?就那么幾個(gè)，剩下的自己去寫就行了，Vue?雖然在代碼維護(hù)上有一定優(yōu)勢(shì)，可是它的?API?就多得多了，而且還分版本，比如?Vue2?有過濾器，Vue3?卻沒了，不僅要多記很多?API?和自定義指令，還需要對(duì)自己所學(xué)的?API?根據(jù)版本進(jìn)行選擇使用，感覺不怎么嚴(yán)謹(jǐn)

⑤?生命周期不同

Vue 的生命周期包含了8個(gè)鉤子函數(shù)，比較細(xì)致且易于理解和掌握。

React 的生命周期包含了10個(gè)鉤子函數(shù)，其中有些鉤子函數(shù)是過時(shí)的，也有一些新的鉤子函數(shù)被引入。?

⑥ 組件通信不同

Vue使用 props 和事件的方式進(jìn)行父子組件之間的通信，同時(shí)也支持 Vuex 進(jìn)行組件間通信。

React則主要通過 props 和回調(diào)函數(shù)的方式進(jìn)行父子組件之間的通信，同時(shí)也支持 Redux 進(jìn)行跨組件通信。