vue和react渲染有什么不同之處

這篇文章主要介紹了vue和react渲染有什么不同之處，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

區(qū)別：1、React是通過JSX渲染模板；而Vue是通過一種拓展的HTML語法進(jìn)行渲染。2、Vue在渲染過程中，會(huì)跟蹤每一個(gè)組件的依賴關(guān)系，不需要重新渲染整個(gè)組件樹；而React在應(yīng)用的狀態(tài)被改變時(shí)，全部子組件都會(huì)重新渲染。

vue和react渲染的區(qū)別

1、模板渲染方式的不同

在表層上，模板的語法不同，React是通過JSX渲染模板。而Vue是通過一種拓展的HTML語法進(jìn)行渲染，但其實(shí)這只是表面現(xiàn)象，畢竟React并不必須依賴JSX。

在深層上，模板的原理不同，這才是他們的本質(zhì)區(qū)別：React是在組件JS代碼中，通過原生JS實(shí)現(xiàn)模板中的常見語法，比如插值，條件，循環(huán)等，都是通過JS語法實(shí)現(xiàn)的，更加純粹更加原生。而Vue是在和組件JS代碼分離的單獨(dú)的模板中，通過指令來實(shí)現(xiàn)的，比如條件語句就需要 v-if 來實(shí)現(xiàn)對這一點(diǎn)，這樣的做法顯得有些獨(dú)特，會(huì)把HTML弄得很亂。

舉個(gè)例子，說明React的好處：react中render函數(shù)是支持閉包特性的，所以我們import的組件在render中可以直接調(diào)用。但是在Vue中，由于模板中使用的數(shù)據(jù)都必須掛在 this 上進(jìn)行一次中轉(zhuǎn)，所以我們import 一個(gè)組件完了之后，還需要在 components 中再聲明下，這樣顯然是很奇怪但又不得不這樣的做法。

2、渲染過程不同

Vue可以更快地計(jì)算出Virtual DOM的差異，這是由于它在渲染過程中，會(huì)跟蹤每一個(gè)組件的依賴關(guān)系，不需要重新渲染整個(gè)組件樹。

React在應(yīng)用的狀態(tài)被改變時(shí)，全部子組件都會(huì)重新渲染。通過shouldComponentUpdate這個(gè)生命周期方法可以進(jìn)行控制，但Vue將此視為默認(rèn)的優(yōu)化。

如果應(yīng)用中交互復(fù)雜，需要處理大量的UI變化，那么使用Virtual DOM是一個(gè)好主意。如果更新元素并不頻繁，那么Virtual DOM并不一定適用，性能很可能還不如直接操控DOM。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享vue和react渲染有什么不同之處內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!