在微信小程序wxml页面的数据循环时看到了wx:key属性,
wx:for属性很好理解,就相当于volist{name='zz' id='xx'}中的id或者foreach($data as $v=>$k)中的$v,
在每一次循环中做一维数组之用。
然后也没看到wx:key的具体作用到什么地方,就有点迷。
网上科普了一下,其是否有效取决于当前页面的数据形式。
如果是纯静态页面,即页面加载完成后数据不会发生修改,则可有可无。
如果是会动态改变的页面,即页面加载完成后,通过类似上拉或者下拉触发刷新的方法导致页面数据添加或者减少,wx:key就会产生作用。
wk:key |
组件识别 |
渲染情况 |
状态情况 |
for效率 |
有 |
各组件可识别 |
渲染时仅改变组件顺序 |
保持组件之前原来状态 |
效率高 |
无 |
组件无法识别 |
渲染时重新创建各组件 |
重置组件的初始状态 |
效率低 |
即有wx:key的话,小程序对页面数据的处理仅仅是重新排列顺序,而不会将所有数据重新渲染,这就减少了冗余的加载。
而没有wx:key的话,导致页面数据无法识别,小程序会在渲染新数据时重新创建各组件。
又在网上翻了翻,现在大概知道其作用了,
wx:key的最主要的一个作用就是给小程序的diff算法提供标识支持,
即有wx:key的情况下小程序对于数据的追加是采取的一个拼接的方法,而不是将所有数据都拉出并重新渲染,原数据保持不变。
以下是一个实例的假设,
wxml在页面加载的时候加载了20条数据,然后通过页面下拉或者上拉的方法触发追加30条数据,小程序是在js对应方法里通过setData( data: xx.xx.xx)方法将 对应数据 拼接重置到对应变量中,这时页面数据会同步更新。
在这个更新的过程中,如果循环数据中有wx:key的话,只会以追加的方法添加新数据,而原来在页面上已经加载的数据是不会再次被渲染的。
如果没有wx:key的话,内置的diff算法就无法辨识 页面已存在数据 和 变量更新后变量数据 中重复数据的位置,所以页面所有元素会被重新渲染,这样会给性能和一些其他方面增加负担。