欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue和react項(xiàng)目中key的作用示例詳解

 更新時間：2023年08月07日 10:59:41   作者：劉鵬瑜  
這篇文章主要為大家介紹了vue和react項(xiàng)目中key的作用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

vue react對比新舊虛擬節(jié)點(diǎn)

vue和react都是采用diff算法來對比新舊虛擬節(jié)點(diǎn)，從而更新節(jié)點(diǎn)。

在交叉對比中，當(dāng)新節(jié)點(diǎn)跟舊節(jié)點(diǎn)頭尾交叉對比沒有結(jié)果時，會根據(jù)新節(jié)點(diǎn)的key去對比舊節(jié)點(diǎn)數(shù)組中的key，從而找到相應(yīng)的舊節(jié)點(diǎn)（這里對應(yīng)的是一個key=>index的map映射）。

如果沒有找到就認(rèn)為是一個新增節(jié)點(diǎn)。而如果沒有key，那么就會采用遍歷查找的方式去找到對應(yīng)的舊節(jié)點(diǎn)，一種一個map映射，另一種是遍歷查找。相比而言，map映射速度更快。

vue部分源碼如下

//vue項(xiàng)目 src/core/vdom/patch.js -448行
//oldCh是一個舊虛擬節(jié)點(diǎn)數(shù)組
if(isUndef(oldKeyToIdx)){
    oldKeyToIdx = createKeyToOldIdx(oldCh,oldStartIdx,oldEndIdx)
}
if(isDef(newStartVnode.key)){
    //map方式獲取
    idxInOld = oldKeyToIdx[newStartVnode.key]
}else {
    //遍歷方式獲取
    idxInOld = findIdxInOld(newStartVnode,oldCh,oldStartIdx,oldEndIdx)
}

創(chuàng)建map函數(shù)

function createKeyToOldIdx(children,beginIdx,endIdx){
    let i,key
    const map = {}
    for(i = beginIdx;i<=endIdx;i++){
        key = children[i].key
        if(isDef(key)) map[key] = i    
    }
    return map
}

遍歷尋找

//sameVnode 是對比新舊節(jié)點(diǎn)是否相同的函數(shù)
function findIdxInOld(node,oldCh,start,end){
    for(let i = start;i<end;i++){
        const c = oldCh[i]
        if(isDef(c) && sameVnode(node,c)) return i    
    }
}

上面的結(jié)論是基于沒有key的情況diff速度會更快。確實(shí)，這種觀點(diǎn)沒有錯。沒有綁定key的情況下，并且在遍歷模版簡單的情況下，會導(dǎo)致虛擬新舊節(jié)點(diǎn)對比更快，節(jié)點(diǎn)也會復(fù)用。而這種復(fù)用是就地復(fù)用，一種鴨子辯型的復(fù)用。以下為簡單的例子：

<div id="app">
    <div v-for="i in dataList">{{ i }}</div>
</div>
var vm = new Vue({
    el:'#app',
    data:{
        dataList:[1,2,3,4,5]    
    }
})

以上的例子，v-for的內(nèi)容會生成以下的dom節(jié)點(diǎn)數(shù)組，我們給每一個節(jié)點(diǎn)標(biāo)記一個身份id：

[
    '<div>1</div>',//id:A
    '<div>2</div>',//id:B
    '<div>3</div>',//id:C
    '<div>4</div>',//id:D
    '<div>5</div>',//id:E
]

改變dataList數(shù)據(jù)，進(jìn)行數(shù)據(jù)位置替換，對比改變后的數(shù)據(jù)

vm.dataList = [4,1,3,5,2]//數(shù)據(jù)位置替換
//沒有key的情況，節(jié)點(diǎn)位置不變，但是節(jié)點(diǎn)innerText內(nèi)容更新了
[
    '<div>4</div>',//id:A
    '<div>1</div>',//id:B
    '<div>3</div>',//id:C
    '<div>5</div>',//id:D
    '<div>2</div>',//id:E
]
//有key的情況，dom節(jié)點(diǎn)位置進(jìn)行了交換，但是內(nèi)容沒有更新
// <div v-for="i in dataList" :key='i'>{{ i }}</div>
[
    '<div>4</div>',//id:D
    '<div>1</div>',//id:A
    '<div>3</div>',//id:C
    '<div>5</div>',//id:E
    '<div>2</div>',//id:B
]

增刪dataList列表項(xiàng)

vm.dataList = [3,4,5,6,7] //數(shù)據(jù)進(jìn)行增刪
// 1、沒有key的情況，節(jié)點(diǎn)位置不變，內(nèi)容也更新了
[
    '<div>3</div>',//id:A
    '<div>4</div>',//id:B
    '<div>5</div>',//id:C
    '<div>6</div>',//id:D
    '<div>7</div>',//id:E
]
// 2、有key的情況，節(jié)點(diǎn)刪除了A B節(jié)點(diǎn)，新增了F G節(jié)點(diǎn)
// <div v-for="i in dataLIST" :key='i'>{{ i }}</div>
[
    '<div>3</div>',//id:C
    '<div>4</div>',//id:D
    '<div>5</div>',//id:E
    '<div>6</div>',//id:F
    '<div>7</div>',//id:G
]

從以上來看，不帶有key，并且使用簡單的模版，可以更有效的復(fù)用節(jié)點(diǎn)，diff速度也是不帶key更加快速的，因?yàn)閹в衚ey在增刪節(jié)點(diǎn)上有耗時。這就是vue文檔所說的默認(rèn)模式。但是這個并不是key作用，而是沒有key的情況下可以對節(jié)點(diǎn)就地復(fù)用，提高性能。

這種模式會帶來一些隱藏的副作用，比如可能不會產(chǎn)生過度效果，或者在某些節(jié)點(diǎn)有綁定數(shù)據(jù)（表單）狀態(tài)，會出現(xiàn)狀態(tài)錯位。vue文檔也說明了這個模式是高效的，但是只是適用于不依賴子組件狀態(tài)或臨時dom狀態(tài)（例如：表單輸入值）的列表渲染輸出

但是key的作用是什么？

key是給每個vnode的唯一id，可以依靠key，更快的拿到oldVnode中對應(yīng)的vnode節(jié)點(diǎn)。

1、更準(zhǔn)確

因?yàn)閹ey就不是就地復(fù)用了，在sameNode函數(shù)a.key === b.key對比中可以避免就地服用的情況。所以會更加準(zhǔn)確。

2、更快

利用key的唯一性生成map對象來獲取對應(yīng)節(jié)點(diǎn)，比遍歷方式更快。

以上就是vue和react項(xiàng)目中key的作用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue react項(xiàng)目key作用的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論