react和vue區(qū)別

react和vue區(qū)別

兩者本質(zhì)的區(qū)別：模板和組件化的區(qū)別 Vue本質(zhì)是 MVVM 框架，由 MVC 發(fā)展而來; React是前端 組件化 框架，由后端組件化發(fā)展而來; Vue使用 模板 React使用 JSX React本身就是 組件化 Vue是在 MVVM 上擴(kuò)展的 共同點(diǎn)： 都支持組件化，都是 數(shù)據(jù)驅(qū)動(dòng)視圖 監(jiān)聽數(shù)據(jù)變化的實(shí)現(xiàn)原理不同： 數(shù)據(jù)流的不同: 高階組件本質(zhì)就是高階函數(shù)，React的組件是一個(gè)純粹的函數(shù)，所以高階函數(shù)對(duì)React來說非常簡(jiǎn)單。 Vue中組件是一個(gè)被包裝的函數(shù)，并不簡(jiǎn)單的就是我們定義組件的時(shí)候傳入的對(duì)象或者函數(shù)。

組件通信的區(qū)別： 渲染模版的不同： Vuex和Redux的區(qū)別: diff算法不同: 事件機(jī)制不同: 數(shù)據(jù)是否可變： react 整體是 函數(shù)式 的思想，把組件設(shè)計(jì)成 純組件 ，狀態(tài)和邏輯通過 參數(shù) 傳入，所以在 react 中，是 單向數(shù)據(jù)流 ，推崇結(jié)合 immutable 來實(shí)現(xiàn) 數(shù)據(jù)不可變 。

react在 setState 之后會(huì)重新走 渲染 的流程，如果 shouldComponentUpdate 返回的是 true ，就繼續(xù)渲染，如果返回了 false ，就不會(huì)重新渲染 vue 的思想是 響應(yīng)式 的，也就是基于是 數(shù)據(jù)可變 的，通過對(duì)每一個(gè)屬性建立 Watcher 來監(jiān)聽，當(dāng)屬性變化的時(shí)候，響應(yīng)式的更新對(duì)應(yīng)的虛擬 dom vue: react: react 的性能優(yōu)化需要 手動(dòng) 去做，而 vue 的性能優(yōu)化是 自動(dòng) 的，但是 vue 的 響應(yīng)式機(jī)制 也有問題，就是當(dāng) state 特別多的時(shí)候， Watcher 也會(huì)很多，會(huì)導(dǎo)致 卡頓 ，所以大型應(yīng)用（ 狀態(tài)特別多 的）一般用 react ，更加可控 通過js來操作一切，還是用各自的處理方式: reac t的思路是 all in js ，通過 js 來生成 html ，所以設(shè)計(jì)了 jsx ，還有通過 js 來操作 css vue 是把 html，css，js 組合到一起，用 各自 的處理方式， vue 有單文件組件，可以把 html、css、js 寫到一個(gè)文件中， html 提供了 模板引擎 來處理。 類式的組件寫法，還是聲明式的寫法: react是 類式 的寫法，api很少 vue是 聲明式 的寫法，通過傳入各種 options ， api 和 參數(shù) 都很多。所以 react 結(jié)合 typescript 更容易一起寫，vue稍微復(fù)雜。vue3支持class類式的寫法了 react整體的思路就是 函數(shù)式 ，所以推崇 純組件，數(shù)據(jù)不可變，單向數(shù)據(jù)流 ，當(dāng)然需要雙向的地方也可以做到，比如結(jié)合redux-form，而vue是基于 可變數(shù)據(jù) 的，支持 雙向綁定 。

react組件的擴(kuò)展一般是通過高階組件，而vue組件會(huì)使用mixin。vue內(nèi)置了很多功能，而react做的很少，很多都是由社區(qū)來完成的， vue追求的是開發(fā)的簡(jiǎn)單 ，而 react更在乎方式是否正確 。

react和vue的區(qū)別

1.創(chuàng)建者等
react是Facebook公司創(chuàng)建的js框架，并創(chuàng)新了新的語法，JSX（html in javascript），而vue相對(duì)來說更容易學(xué)習(xí)，且使用模板系統(tǒng)，Reat與Vue只有框架的骨架，其他的功能如路由、狀態(tài)管理等是框架分離的組件。
2.關(guān)于虛擬dom
改變真實(shí)的DOM狀態(tài)遠(yuǎn)比改變一個(gè)JavaScript對(duì)象的花銷要大得多。

·
Virtual DOM是一個(gè)映射真實(shí)DOM的JavaScript對(duì)象，如果需要改變?nèi)魏卧氐臓顟B(tài)，那么是先在Virtual DOM上進(jìn)行改變，而不是直接改變真實(shí)的DOM。

當(dāng)有變化產(chǎn)生時(shí)，一個(gè)新的Virtual DOM對(duì)象會(huì)被創(chuàng)建并計(jì)算新舊Virtual DOM之間的差別。之后這些差別會(huì)應(yīng)用在真實(shí)的DOM上。
vue：渲染過程中是跟蹤每一個(gè)組件的依賴，即更改了哪個(gè)組件渲染哪個(gè)。
react：會(huì)重新渲染全部子組件。

vue和react的區(qū)別之我見

react和vue都是做組件化的，整體的功能都類似，但是他們的設(shè)計(jì)思路是有很多不同的。使用react和vue，主要是理解他們的設(shè)計(jì)思路的不同。

react整體是函數(shù)式的思想，把組件設(shè)計(jì)成純組件，狀態(tài)和邏輯通過參數(shù)傳入，所以在react中，是單向數(shù)據(jù)流，推崇結(jié)合immutable來實(shí)現(xiàn)數(shù)據(jù)不可變。

react在setState之后會(huì)重新走渲染的流程，如果shouldComponentUpdate返回的是true，就繼續(xù)渲染，如果返回了false，就不會(huì)重新渲染，PureComponent就是重寫了shouldComponentUpdate，然后在里面作了props和state的淺層對(duì)比。 而vue的思想是響應(yīng)式的，也就是基于是數(shù)據(jù)可變的，通過對(duì)每一個(gè)屬性建立Watcher來監(jiān)聽，當(dāng)屬性變化的時(shí)候，響應(yīng)式的更新對(duì)應(yīng)的虛擬dom。 總之，react的性能優(yōu)化需要手動(dòng)去做，而vue的性能優(yōu)化是自動(dòng)的，但是vue的響應(yīng)式機(jī)制也有問題，就是當(dāng)state特別多的時(shí)候，Watcher也會(huì)很多，會(huì)導(dǎo)致卡頓，所以大型應(yīng)用（狀態(tài)特別多的）一般用react，更加可控。 react的思路是all in js，通過js來生成html，所以設(shè)計(jì)了jsx，還有通過js來操作css，社區(qū)的styled-component、jss等， vue是把html，css，js組合到一起，用各自的處理方式，vue有單文件組件，可以把html、css、js寫到一個(gè)文件中，html提供了模板引擎來處理。

react是類式的寫法，api很少， 而vue是聲明式的寫法，通過傳入各種options，api和參數(shù)都很多。所以react結(jié)合typescript更容易一起寫，vue稍微復(fù)雜。 react可以通過高階組件（Higher Order Components–HOC）來擴(kuò)展，而vue需要通過mixins來擴(kuò)展 一個(gè)react高階組件的例子：react做的事情很少，很多都交給社區(qū)去做，vue很多東西都是內(nèi)置的，寫起來確實(shí)方便一些， 比如 redux的combineReducer就對(duì)應(yīng)vuex的modules， 比如reselect就對(duì)應(yīng)vuex的getter和vue組件的computed， vuex的mutation是直接改變的原始數(shù)據(jù)，而redux的reducer是返回一個(gè)全新的state，所以redux結(jié)合immutable來優(yōu)化性能，vue不需要。

上面主要梳理了react和vue的4點(diǎn)不同： （其中第3點(diǎn)在vue3.0支持類式寫法之后就可以去掉了） react整體的思路就是函數(shù)式，所以推崇純組件，數(shù)據(jù)不可變，單向數(shù)據(jù)流，當(dāng)然需要雙向的地方也可以做到，比如結(jié)合redux-form，而vue是基于可變數(shù)據(jù)的，支持雙向綁定。react組件的擴(kuò)展一般是通過高階組件，而vue組件會(huì)使用mixin。vue內(nèi)置了很多功能，而react做的百科很少，很多都是由社區(qū)來完成的，vue追求的是開發(fā)的簡(jiǎn)單，而react更在乎方式是否正確。