首页 > 其他 > 详细

react/vue列表组件中key的作用

时间:2021-03-08 14:05:40      阅读:23      评论:0      收藏:0      [点我收藏+]

1. 没有key的情况diff速度会更快,在遍历模板简单的情况下有利于就地复用

不写key时,有利于节点的就地复用,但是不利于页面的过度,可能会存在状态错位(如表单组件绑定数据存在状态)

 

2.利用key的唯一性生成map对象来获取对应节点,比遍历方式更快。(从这个角度看,map会比遍历更快。)

vue和react都是采用diff算法来对比新旧虚拟节点,从而更新节点。在vue的diff函数中(建议先了解一下diff算法过程)。
在交叉对比中,当新节点跟旧节点头尾交叉对比没有结果时,会根据新节点的key去对比旧节点数组中的key,从而找到相应旧节点(这里对应的是一个key => index 的map映射)。如果没找到就认为是一个新增节点。而如果没有key,那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射,另一种是遍历查找。相比而言。map映射的速度更快

 

总结:

1)避免就地复用带来的状态错位

2)由于key的唯一性,优先通过keyMap查找需要的节点,从而优化了diff运算

react/vue列表组件中key的作用

原文:https://www.cnblogs.com/qlongbg/p/14498454.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!