react key比较,是diff算法中的一种情况
首先diff算法能计算出更新的差异,减少更新dom的频次
diff分为三种情况
1、tree比较
只会比较同一层级的dom,跨层级的不会比较,跨层级更新,直接销毁重建
2、component比较
先比较组件类型,
类型相同,进入compondshouldupdate里进一步比较
类型不同,销毁,重新创建
3、同一级的dom比较,分为三种操作,插入,删除,和移动
如果删除了一个节点,前后的虚拟dom结构如下
删除前
image.png
删除item2 后
image.png
对应的操作是把item2标记为删除,然后从旧的dom中删除item2,再移动item3到item2的位置

现在分析key为index的情况
前后删除如下
image.png
删除item2 后
image.png
由于key值变了,item2会被标记移除掉,item3的key变成了1,会和原来item2比较,发现key相同,组件类型也相同的话就不更新了,里面的文本节点如果使用了更新的数据也会更新的
具体的操作如下
删除前
image.png
删除节点3后
image.png
节点三的input框没有更新
结论:如果只是展示话,key设置成index没问题的
如果涉及到数据的更新变化应该时候用唯一的id来判断是否更新,设置成index的话,key会变化,造成更新不了


杨龙飞
45 声望2 粉丝

喜欢思考,喜欢前端,喜欢交友,喜欢玩