您好,登錄后才能下訂單哦!
小編給大家分享一下vue與react有什么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
react 誕生于2011年( FaxJS),
2013 年 7 月 3 日 v0.3.0
2016 年 3 月 30 日 v0.14.8
2016 年 4 月 9 日 v15.0.0
2017 年 9 月 27 日 v16.0.0,fiber正式誕生
2019 年 react 16.8發(fā)布 正式支持 hooks語法。
2020 年 10 月 22 日 v17
解決問題:
React
用來解決什么問題,官方網(wǎng)站上這樣說道: We build React to solve one problem:building large applications with data that changes over time.
發(fā)端于2013年的個人項目,但如今已然成為世界三大前端框架之一,在中國大陸更是前端首選。(面試官問:為什么你學(xué)習(xí)用vue?答:因為愛國!)
2013年,在Google
工作的尤雨溪,受到Angular
的啟發(fā),從中提取自己所喜歡的部分,開發(fā)出了一款輕量框架,最初命名為Seed
。
同年12月,這粒種子發(fā)芽了,更名為Vue
(因為是個視圖層庫,而 vue 是 view
的法語),版本號是0.6.0。
2014.01.24,Vue正式對外發(fā)布,版本號是0.8.0。
發(fā)布于2014.02.25的0.9.0,有了自己的代號:Animatrix
,這個名字來自動畫版的《駭客帝國》,此后,重要的版本都會有自己的代號。
0.12.0發(fā)布于2015.06.13,代號Dragon Ball
(龍珠),這一年,Vue迎來了大爆發(fā),Laravel
社區(qū)(一款流行的 PHP 框架的社區(qū))首次使用 Vue,Vue
在JS社區(qū)也打響了知名度。
1.0.0 Evangelion
(新世紀(jì)福音戰(zhàn)士)是Vue
歷史上的第一個里程碑。同年,vue-router
(2015-08-18)、vuex(2015-11-28)、vue-cli
(2015-12-27)相繼發(fā)布,標(biāo)志著 Vue
從一個視圖層庫發(fā)展為一個漸進(jìn)式框架。很多前端同學(xué)也是從這個版本開始成為Vue的用戶(vue1純純的響應(yīng)式)。
2016年10月1日 2.0.0 Ghost in the Shell
(攻殼機(jī)動隊)是第二個重要的里程碑,它吸收了React
的Virtual Dom
方案,還支持服務(wù)端渲染。
2019年2月4日 在2.6發(fā)布之前的很長一段時間,Vue
核心團(tuán)隊都在忙著vue-cli3.0
的開發(fā),積攢了不少需求,發(fā)布了vue2
倒數(shù)第二個的版本(2020年發(fā)布)
2020年09月18日 帶著成為任何人都可以快速學(xué)習(xí)、易于接近的框架的使命vue3
它來了,同年還推出了新時代打包工具vite(未來可能會取代webpack
)
vue群眾基礎(chǔ)圖 如下圖:
react
整體上是函數(shù)式的思想,組件使用jsx語法,all in js
,將html
與css全都融入javaScript
,jsx語法相對來說更加靈活。
vue的整體思想仍然是擁抱經(jīng)典的html
(結(jié)構(gòu))+css(表現(xiàn))+js(行為)的形式,vue鼓勵開發(fā)者使用template
模板,并提供指令供開發(fā)者使用如v-if
、v-show
、v-for等指令,因此在開發(fā)vue應(yīng)用的時候會有一種在寫經(jīng)典web應(yīng)用(結(jié)構(gòu)、表現(xiàn)、行為分離)的感覺。
一些老生常談的 數(shù)據(jù)管理(props
、data vs state
)、組件寫法、生命周期異同這里就不比較了。
1、react
與vue在列表加key的問題上最終目的是一致的:更準(zhǔn)確、更快地拿到oldVnode
中對應(yīng)的vnode節(jié)點,提高性能。但是它們實現(xiàn)的算法卻有一定的差異。
React在渲染數(shù)組時如果子組件沒有提供key,會默認(rèn)將循環(huán)的index作為key來用作第一次渲染。 源碼本質(zhì)上就是暴力比較法:由于單鏈表fiber無法使用雙指針?biāo)惴?,所以無法對算法使用雙指針優(yōu)化??傮w上經(jīng)歷兩輪遍歷,第一輪遍歷:處理更新的節(jié)點。第二輪遍歷:處理剩下的不屬于更新的節(jié)點。
為了降低算法復(fù)雜度,React的diff會預(yù)設(shè)限制:
只對同級元素進(jìn)行Diff。如果一個DOM節(jié)點在前后兩次更新中跨越了層級,那么React不會嘗試復(fù)用他。
兩個不同類型的元素會產(chǎn)生出不同的樹。如果元素由div變?yōu)閜,React
會銷毀div及其子孫節(jié)點,并新建p及其子孫節(jié)點。
先判斷key再判斷type,兩者相同則為同一節(jié)點。更新>新增/刪除
vue
在diff性能方面要強(qiáng)于react,當(dāng)我認(rèn)真閱讀了源碼與書籍后,佩服至極, 力扣算法題--最長遞增子序列 舉個例子吧:以數(shù)組[2, 11, 6, 8, 1]為例:最終輸出的結(jié)果為[0, 2, 3],表示最強(qiáng)增長序列的索引分別是0,2,3;對應(yīng)的值是2,6,8。換句話說,在這個數(shù)組中最長連續(xù)增長的值就是數(shù)組中的2,6,8三個元素。
那么vue3費了這么大的力氣,使用這個方法的目的是什么呢? Vue2在DOM-Diff
過程中,優(yōu)先處理特殊場景的情況,即頭頭比對,頭尾比對,尾頭比對等。
而Vue3在DOM-Diff
過程中,根據(jù) newIndexToOldIndexMap
新老節(jié)點索引列表找到最長穩(wěn)定序列,通過最長增長子序列的算法比對,找出新舊節(jié)點中不需要移動的節(jié)點,原地復(fù)用,僅對需要移動或已經(jīng)patch
(新增刪除節(jié)點等操作)節(jié)點進(jìn)行操作,最大限度地提升替換效率,相比于Vue2版本是質(zhì)的提升!
在react中如果某個組件的狀態(tài)發(fā)生改變,react會把此組件以及此組件的所有后代組件重新渲染,不過重新渲染并不代表會全部丟棄上一次的渲染結(jié)果,react
還是會通過diff
去比較兩次的虛擬dom最后patch
到真實的dom上。雖然如此,如果組件樹過大,diff其實還是會有一部分的開銷。react
內(nèi)部通過 fiber
優(yōu)化 diff算法,外部建議開發(fā)者使用 shouldComponentUpdate pureComponent
來規(guī)避問題。
vue2的響應(yīng)式是Object.defineProperty實現(xiàn)的,并且重寫getter``setter等一系列操作實現(xiàn)觀察者模式,一旦數(shù)據(jù)發(fā)生變化,不會像react一樣去比較整顆組件樹,而是去更新數(shù)據(jù)狀態(tài)變化了的組件實例。
old 15.x-16
new 16+
其他:componentDidCatch
React
生命周期的命名一直都是非常語義化(小聲bb:真是又臭又長又難記)
雙方都做出了大規(guī)模的改動,雖然源碼不同,但設(shè)計思想以及代碼簡易程度來看,確實都在進(jìn)步。
原先繁瑣的 compomentDidUpdate
生命周期 =》 useEffect
,雖然不完全相同,但在大多數(shù)場景中,從開發(fā)者層面看待,我們更多是關(guān)心props
或者state中的數(shù)據(jù)變化之后,會產(chǎn)生了什么后果(副作用),省去了開發(fā)者自己比較前后值的過程。(這應(yīng)該是react借鑒vue watch
)
vue3
組合式api借鑒了react hooks
中的部分思想,不得不說,青出于藍(lán)而勝于藍(lán),再加上框架自己也做出了很多優(yōu)化工作,在性能上是react比不上的。
function() { useEffect(()=>{ // 當(dāng)demo發(fā)生變化時觸發(fā) console.log(demo) },[demo]) return ( <div>react</div> ) }
import {reactive, watchEffect} from 'vue' export default { setup() { const state = reactive({ count: 0, name: 'zs' }) watchEffect(() => { console.log(state.count) console.log(state.name) }) return { state } } }
由于初始化時源碼內(nèi)部的響應(yīng)式機(jī)制的緣故,新APIwatchEffect
甚至都不需要監(jiān)聽是誰發(fā)生了變化就可以觸發(fā)副作用,因為監(jiān)聽的這個過程,全程都是vue3
源碼中的 Proxy
完成的。
不僅如此 vue3
更是推出了更貼近原生js的語法,點贊?。。。。。?/p>
<script setup> import { reactive, ref} from "vue"; // 漸進(jìn)式更新:ref api let val = ref(""); let todos = reactive([ { id: 0, title: "吃飯", done: false, }, { id: 1, title: "睡覺", done: false, }, ]); function addTodo() { todos.push({ id: todos.length, title: val.value, done: false, }); val.value = ""; } </script>
其實到這里,vue
技術(shù)棧的同學(xué)一定暗自得意,蹦出一句vue yes
! 可惜這么好的庫也有存在的問題,vue2響應(yīng)式Object.defineProperty
無法監(jiān)聽數(shù)組下標(biāo)和對象后新增的屬性值變化已是老生常談,vue3采用了 Proxy Api
解決這些問題的同時,也帶來了新的問題,如reactive
只能傳對象(react useState
簡單復(fù)雜值都可以),而官方推薦的ref卻需要通過 .value才能獲取值,這著實讓社區(qū)炸鍋,為此vue團(tuán)隊迫于壓力不得不推出 toRefs
(感興趣的同學(xué)可以了解一下,之前線下我和藝寶探討過)。
vue
中使用 v-on
(簡寫為:) 指令監(jiān)聽 DOM 事件,并在觸發(fā)時運行一些 JavaScript
代碼。通常使用v-on接收一個需要調(diào)用的方法名稱。
<div @click="helloShanghai">welcome</div> <div @click="helloShanghai('hello')">welcome</div>
訪問原生DOM事件,可以將$event
顯式傳入method
中
<div @click="helloShanghai('hello', $event)">welcome</div>
普通元素 addEventListener
,組件$on
React
元素的事件處理和 DOM 元素的很相似,但是有一點語法上的不同:
React
事件的命名采用小駝峰式,而不是純小寫。
使用 JSX 語法時你需要傳入一個函數(shù)作為事件處理函數(shù),而不是一個字符串。
<div onClick={this.handleClick}>Click me</div> <div onClick={this.handleClick.bind(this)}>Click me</div> <div onClick={()=>{this.handleClick()})}>Click me</div> <div onClick={this.handleClick()}>Click me</div><!-- 錯誤寫法>
react16將合成事件掛載到 document
上,17版本后為root
根元素。
Vue
鼓勵寫近似常規(guī)HTML
的模板。寫起來很接近標(biāo)準(zhǔn) HTML元素,只是多了一些屬性。 React推薦你所有的模板通用JavaScript
的語法擴(kuò)展——JSX書寫。
React ==> Create React APP Vue ==> vue-cli
當(dāng)然還有其他的一些比較,諸如vue的插槽(slot)與react的props.children
。 生命周期:getDerivedStateFormProps
、getSnapshotBeforeUpdate
我的看法:
1、react在中后臺項目中由于在處理復(fù)雜的業(yè)務(wù)邏輯或組件的復(fù)用問題比vue優(yōu)雅而被人認(rèn)可,但也更需要團(tuán)隊技術(shù)整體比較給力,領(lǐng)頭大佬的設(shè)計與把關(guān)能力要更優(yōu)秀,因此開發(fā)成本更大。 2、
vue
更友好更易上手的寫法著稱,更友好的api更親民的設(shè)計讓開發(fā)成本與效率大大提升。 3、另一方面,vue因為規(guī)定了很多api,規(guī)范了開發(fā)者,同時也一定程度上限制了開發(fā)者的發(fā)散思維;而react
因為更少的a pi提高了開發(fā)者的創(chuàng)造力,同時也因為每個react
開發(fā)者對react
有不同的理解而產(chǎn)生不同的代碼風(fēng)格。 4、vue與react在發(fā)展長河中越發(fā)成熟,深思熟慮后覺得兩者不管在移動端或大型中后臺都是非常可行的,關(guān)于框架好壞的問題,其實更應(yīng)該思考的是公司團(tuán)隊想要用什么技術(shù)棧、自己喜歡與擅長什么技術(shù)棧等。
以上是“vue與react有什么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。