你真的了解react列表渲染中的key属性吗？

React渲染流程(简略版)：生成虚拟节点 => (diff算法比对) 渲染页面

1、生成虚拟节点 + 渲染结果(Key可以看作每个列表渲染中dom元素的唯一名字)

<p>a</p> => name:a

<p>b</p> => name:b

<p>c</p> => name:c

2、改变数组 为["c","b","a"]

1）生成虚拟节点

<p>c</p> => name:c

<p>b</p> => name:b

<p>a</p> => name:a

2） 在生成虚拟节点后、渲染页面之前,react内置diff算法(为了简化dom操作，提高性能)首先会根据name做对比，看需要做删除|创建还是交换位置操作

第一次的渲染结果与第二次生成的虚拟节点进行对比过程分析（key为item）：

从第一位开始，对比之前name=c与现在的name=c的dom元素发现内容一致位置不同，为了节省性能直接交换二者位置；第二位，name=b与发现内容和位置都一致，不做改变；第三位与第一种情况相同也只是交换位置

key为index的情况之前的操作与key为item情况一致，我们来看diff对比时

第一次的渲染结果与第二次生成的虚拟节点进行对比过程分析（key为index）：

<p>a</p> => name:0      =>       <p>c</p> => name:0

<p>b</p> => name:1      =>       <p>b</p> => name:1

<p>c</p> => name:2      =>       <p>a</p> => name:2

变化规则如上图显示，第一次比较时，发现第一次渲染的name=0的dom与第二次生成的name=0的虚拟dom内容不一致，那么react就会删除第一渲染的name=0的dom元素,重新创建并渲染第二次生成的虚拟dom；第二次比较name=2,发现内容位置都一致,不变；第三次比较情况与第一次一致，内容不一致,删除、创建。

结论

细心的人可能已经发现之所以造成上述问题的原因,就是index无法唯一标识某一个虚拟节点，只与遍历的顺序有关，但item不同它可以唯一标识它对应的虚拟节点，无论遍历的顺序如何都不会影响。

我们都知道js操作dom在性能方面上讲是非常昂贵的，因此我们应该避免使用index或者其他无法唯一标识某个dom元素的数据作为key的属性值，