看react文档,说在渲染列表的时候,key不建议使用index,之前用vue的时候没太注意,刚开始我以为只有react才有这个问题,没想到测试之后vue也是一样的问题,看来这是虚拟DOM的通病啊,因此记录一番。

问题描述

这是是react文档中举出的例子,十分巧妙的举出了用index作key的问题,大致就是渲染的列表中有input元素,它在Diff操作的前后是没有变化的:

vue/react列表渲染key的选用问题 gif vue/react列表渲染key的选用问题

prepend是从列表的头部插入元素,append是从列表的尾部插入元素。插入元素之后,在input中输入内容,然后点击sort,sort是按照每个列表的id进行排序的,但是我们发现,点击后,内容确实排序了,但是input框似乎没有动,因为里面的内容还是原封不动的。

这是为啥呢?我们先来看下渲染前后的DOM结构:

上图左边是sort前,右边是sort后,渲染前后我们可以看到id并没有发生变化,都是0,1,2,这样对于input来说,首先内容没有变化,然后id也没有变化,因此就没有变化了。

正确的做法是用id作为key:

同样,我们看渲染前后的DOM结构:

上图左边是sort前,右边是sort后,我们可以发现,有两组的id发生了变化,2->1,1->2,这两个发生了调整,因此就将这两组的内容交换了,因此内部的input也跟着交换了。所以得到的结果是正确的。

vue也存在这个问题

我开始以为只有react才存在这个问题,但是我用vue试了下,也存在这个问题:

因此这个不是vue/react的问题,整个虚拟DOM都是这样,因此在我们用的是key为index的时候,需要额外注意这种问题。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字