关注
vue,react中在执行列表渲染时都会要求给每个组件添加上key这个属性。
要解释key的作用,就需要先介绍一下虚拟DOM的Diff算法。
vue和react都实现了一套虚拟DOM,使得可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。
vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设:
1. 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构。
2. 同一层级的一组节点,他们可以通过唯一的id进行区分。
基于以上这两点假设,使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。
当页面的数据发生变化时,Diff算法只会比较同一层级的节点:如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点,不会再比较这个节点以后的子节点了。如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新。当某一层有很多相同的节点时,也就是列表节点时,Diff算法的更新过程默认情况下也是遵循以上原则。
使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
所以key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。
查看原帖
2 评论
相关推荐
投递快手等公司10个岗位 >
点赞 评论 收藏
转发
牛客热帖
- 1... 美团后端日常实习面经9279
- 2... 【奖】这个夏天🍉,和牛牛一起打卡刷题~8861
- 3... 25暑期实习的心态变化 & 拥抱变化8443
- 4... 拼多多笔试 0526 24届算法5950
- 5... 【收集向】延毕了,影响工作吗?5106
- 6... 27届JAVA后端4797
- 7... 用友技术笔试-友新星实习项目-Java-01卷4428
- 8... 仰卧起坐了几个月才找到一个实习,但还是不满意。想着就这样吧,就约朋友一起去逛宜家,到了出发前两天觉得单独去太尴尬了,临时说要不要再喊一个朋友一起去,好玩一点。到了当天几乎是全程发呆,自闭。打车的时候她两手挽手在聊天,我感觉无所适从就蹲到边上的阴凉处了,一直想着要怎么遁了,感觉真的好尴尬啊。朋友看到了,突然问我一句你为什么要逃🥲,不是,怎么还有读心术啊。因为到了宜家已经中午十二点多了,就先排队打饭。我就继续站着发呆,朋友看到了就挥挥手,说一句hello?我一时有点懵,不知道这个时候是不是要回一句sever hello完成tls握手,还是要继续发呆假装服务器宕机了。吃饭的时候,聊天就我一直聊我找实习的事情,朋友不知道回我啥,就是给我夹菜😥,但我的菜好像都是一大块的,我不知道咋给她夹,就没夹。回去的时候我说了一句烧烤的事情,她问我要不要一起去吃烧烤,走到一半突然下起暴雨。我有伞但是不敢打开,谁懂谁懂谁懂。我们在路口等红绿灯,因为伞很小,我就往她那边靠,她发现之后问我有没有淋到,让我别淋坏了,然后把伞往我这边推。吃饭的时候她说本来想给我拍张照片发朋友圈的,因为我恰好看到她了,她就没好意思拍😂,我不知道说啥,过了一会问她,为什么她总是能这么开心,积极向上,感觉总是有无穷无尽的活力与能量,我感觉我怎么都开心不起来,所以我也不怎么发朋友圈,因为都是些负能量的事情,很多都是发了一会之后就仅自己可见了。因为我俩校区不一样,我一个人在等回去的车然后给家里人打了个电话,聊了聊家里情况只感到窒息,坐到椅子上蒙着眼睛一直哭,以前这些事情会让我感到开心,但现在不知道为什么很难开心起来了。第二天和我朋友去吃火锅,他们听完之后说了句乐土哥,你是不是养胃了?我想真是的,java毁了我4379
- 9... 回首向来萧瑟处,也无风雨也无晴4354
- 10... 鹅的暑期实习和毕业生提前实习的心态分享3858
正在热议
# 和牛牛一起刷题打卡 #
3741次浏览 371人参与
# 机械制造薪资爆料 #
339810次浏览 4036人参与
# 牛客帮帮团来啦!有问必答 #
973650次浏览 14924人参与
# 2022毕业生求职现身说法 #
19872次浏览 302人参与
# 你的简历改到第几版了 #
322449次浏览 4840人参与
# 通信硬件薪资爆料 #
240659次浏览 2270人参与
# 腾讯工作体验 #
145589次浏览 1403人参与
# 如何写一份好简历 #
299182次浏览 4315人参与
# 晒一晒我的offer #
3640903次浏览 56848人参与
# 产品人专业大盘点 #
14969次浏览 119人参与
# 金融银行面经 #
11496次浏览 187人参与
# 在国企工作的人,躺平了吗? #
105025次浏览 1330人参与
# 你觉得机械有必要实习吗 #
9914次浏览 130人参与
# 2023届毁约公司名单 #
97845次浏览 413人参与
# 运营人的第一份offer应该如何选 #
38177次浏览 664人参与
# 数据人的面试交流地 #
200755次浏览 4179人参与
# 23届的你们都什么时候入职? #
91140次浏览 778人参与
# 为什么国企只招应届生 #
55325次浏览 401人参与
# 浅聊一下我实习的辛苦费 #
92658次浏览 910人参与
# 2022毕业的你对23届的寄语 #
16119次浏览 346人参与