wx:key作用的自我理解和記錄
在微信小程式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演算法就無法辨識 頁面已存在資料 和 變數更新後變數資料 中重複資料的位置,所以頁面所有元素會被重新渲染,這樣會給效能和一些其他方面增加負擔。