写React/Vue项目时为什么要在列表组件中写key,其作用是什么

vue和react都是采用diff算法来对比新旧虚拟节点,从而更新节点
那么在vue的diff函数中在交叉对比中,当新节点跟旧节点 头尾交叉对比 没有结果时,会根据新节点的key去对比旧节点数组中key,从而找到相对应的节点。如果没有找到就认为是一个新增节点。而如果没有key,那么就会采用遍历方式去查找对应的旧节点。
在没有绑定key的情况下,并且在遍历模板简单的情况下,会导致虚拟新旧节点对比更快,节点也会复用,而这种复用就是 “”就地复用“”
作用:
1.在有key的情况下更加的准确性。因为带有key就不是 “”就地复用“”了,在一些函数,比如samNode函数对比中就可以避免 就地复用的情况,所以会快些
2.更快,利用key的唯一性生成map对象来获取相对应的节点,比遍历方式更快

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值