談?wù)刅ue和React的區(qū)別【沖擊30K專欄01】

最近剛好換了工作，把最近面試被面的問題，以及現(xiàn)在大多數(shù)出現(xiàn)的面試題以一個專題的形式一次性總結(jié)，一天一題，現(xiàn)在總共匯總了150道題，如果這些題都能答出來人人都能沖擊30k，每道題目答案沒有多余扯皮的部分，就是單純的答案。

今天的題目：談?wù)刅ue和React的區(qū)別？

1.數(shù)據(jù)流的不同

• 組件與DOM之間可以通過 v-model 雙向綁定（雙向數(shù)據(jù)流）
• React單向數(shù)據(jù)響應(yīng)，需要手動setState

2.監(jiān)聽數(shù)據(jù)變化的實現(xiàn)原理不同

• Vue通過 getter/setter
• React默認是通過比較引用的方式（diff）進行的

3.代碼的復(fù)用

• Vue是才有公共組件或者mixin的方式實現(xiàn)代碼的復(fù)用
• React是通過 HoC (高階組件）實現(xiàn)代碼的復(fù)用

4.組件通信的區(qū)別

• Vue是通過props、on、children、EventBus、vuex、$root等方式實現(xiàn)組件通信
• React可以通過props向子組件傳遞數(shù)據(jù)或者回調(diào)或者context實現(xiàn)組件通信

5.模板渲染方式的不同

Vue是通過一種拓展的HTML語法進行渲染（其實Vue也是可以使用JSX） Vue是在和組件JS代碼分離的單獨的模板中，通過指令來實現(xiàn)的，比如條件語句就需要 v-if 來實現(xiàn)

• React 是通過JSX渲染模板

React是在組件JS代碼中，通過原生JS實現(xiàn)模板中的常見語法，比如插值，條件，循環(huán)等，都是通過JS語法實現(xiàn)的

6.diff算法不同

• vue比對節(jié)點，當節(jié)點元素類型相同，但是className不同，認為是不同類型元素，刪除重建，而react會認為是同類型節(jié)點，只是修改節(jié)點屬性

• vue的列表比對，采用從兩端到中間的比對方式，而react則采用從左到右依次比對的方式。當一個集合，只是把最后一個節(jié)點移動到了第一個，react會把前面的節(jié)點依次移動，而vue只會把最后一個節(jié)點移動到第一個?？傮w上，vue的對比方式更高效。

7.Vuex 和 Redux 的區(qū)別

• Vuex 更加靈活一些，組件中既可以 dispatch action 也可以 commit updates，而 Redux 中只能進行 dispatch，并不能直接調(diào)用 reducer 進行修改
• Redux 使用的是不可變數(shù)據(jù)，而Vuex的數(shù)據(jù)是可變的。Redux每次都是用新的state替換舊的state，而Vuex是直接修改
• Redux 在檢測數(shù)據(jù)變化的時候，是通過 diff 的方式比較差異的，而Vuex其實和Vue的原理一樣，是通過 getter/setter來比較的

8.數(shù)據(jù)聲明和使用的方式不同

• vue中的數(shù)據(jù)由data屬性在Vue對象中進行管理，react中的數(shù)據(jù)由state屬性管理；
• vue通過slot插槽進行嵌套傳遞，react通過“props.children”的方式將標簽內(nèi)的部分傳遞給子組件。

說明

每天一到面試題，人人都能沖擊30k+，點擊↓關(guān)注【鬼哥】我

當前進度【#001題】，如果你能點贊分享、鬼哥騎自行車也是開心的

參考資料

• https://cnblogs.com/mengff/p/12828825.html
• https://zhuanlan.zhihu.com/p/43494278
• https://m.php.cn/article/464234.html
• https://segmentfault.com/a/1190000019208626