wx:key作用的自我理解和记录

在微信小程序wxml页面的数据循环时看到了wx:key属性，

wx:for属性很好理解，就相当于volist{name='zz' id='xx'}中的id或者foreach（$data as $v=>$k）中的$v，

在每一次循环中做一维数组之用。

然后也没看到wx:key的具体作用到什么地方，就有点迷。

网上科普了一下，其是否有效取决于当前页面的数据形式。

如果是纯静态页面，即页面加载完成后数据不会发生修改，则可有可无。

如果是会动态改变的页面，即页面加载完成后，通过类似上拉或者下拉触发刷新的方法导致页面数据添加或者减少，wx:key就会产生作用。

即有wx:key的话，小程序对页面数据的处理仅仅是重新排列顺序，而不会将所有数据重新渲染，这就减少了冗余的加载。

而没有wx:key的话，导致页面数据无法识别，小程序会在渲染新数据时重新创建各组件。

又在网上翻了翻，现在大概知道其作用了，

wx:key的最主要的一个作用就是给小程序的diff算法提供标识支持，

即有wx:key的情况下小程序对于数据的追加是采取的一个拼接的方法，而不是将所有数据都拉出并重新渲染，原数据保持不变。

以下是一个实例的假设，

wxml在页面加载的时候加载了20条数据，然后通过页面下拉或者上拉的方法触发追加30条数据，小程序是在js对应方法里通过setData( data: xx.xx.xx)方法将  对应数据   拼接重置到对应变量中，这时页面数据会同步更新。

在这个更新的过程中，如果循环数据中有wx:key的话，只会以追加的方法添加新数据，而原来在页面上已经加载的数据是不会再次被渲染的。  

如果没有wx:key的话，内置的diff算法就无法辨识   页面已存在数据   和  变量更新后变量数据   中重复数据的位置，所以页面所有元素会被重新渲染，这样会给性能和一些其他方面增加负担。