react key比较,是diff算法中的一种情况
首先diff算法能计算出更新的差异,减少更新dom的频次
diff分为三种情况
1、tree比较
只会比较同一层级的dom,跨层级的不会比较,跨层级更新,直接销毁重建
2、component比较
先比较组件类型,
类型相同,进入compondshouldupdate里进一步比较
类型不同,销毁,重新创建
3、同一级的dom比较,分为三种操作,插入,删除,和移动
如果删除了一个节点,前后的虚拟dom结构如下
删除前
删除item2 后
对应的操作是把item2标记为删除,然后从旧的dom中删除item2,再移动item3到item2的位置
现在分析key为index的情况
前后删除如下
删除item2 后
由于key值变了,item2会被标记移除掉,item3的key变成了1,会和原来item2比较,发现key相同,组件类型也相同的话就不更新了,里面的文本节点如果使用了更新的数据也会更新的
具体的操作如下
删除前
删除节点3后
节点三的input框没有更新
结论:如果只是展示话,key设置成index没问题的
如果涉及到数据的更新变化应该时候用唯一的id来判断是否更新,设置成index的话,key会变化,造成更新不了
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。