微信小程序 wx:key

在實際開發過程中遇到 warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance.

官方解釋：

wx:key

如果列表中項目的位置會動態改變或者有新的項目添加到列表中，並且希望列表中的項目保持自己的特征和狀態（如 <input/> 中的輸入內容，<switch/> 的選中狀態），需要使用 wx:key 來指定列表中項目的唯一的標識符。

網上資料：

wx:key 的值以兩種形式提供

1、wx:key="property" 其中property是代表在 for 循環的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數字，且不能動態改變。類似於字典的key值

2、wx:key="*this"， 保留關鍵字 *this 代表在 for 循環中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數字，如：

當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組

件保持自身的狀態，並且提高列表渲染時的效率。 

不添加wx:key情況：

<block wx:for-items="{{userInfoList}}" >，會出現warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance. 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。推薦array 的 每一個item都添加一個唯一識別的property來管理，這樣就可以去掉warning，如果使用保留關鍵字，好像會出現顯示的item都是最后一個的

<block wx:for-items="{{userInfoList}}" wx:key="userInfoListId">

• 如果不加 wx:key, 在 setData 之后，如果 array 內的數據如果發生改變，會重新創建前端的渲染對象
• 加上 wx:key，重新渲染時，只是將對應的對象重新排序。未發生變化的對象，不會重新創建

 

參考官方的解釋

當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，並且提高列表渲染時的效率。

需要驗證的問題

 

加上 wx:key 之后，會根據給定的 key 進行排序么？

寫個簡單的測試頁面

<block wx:for="{{languages}}" wx:for-item="language" wx:key="id">
  <text class="log-item">{{ language.id }} . {{ language.name }}</text>
</block>

data: {
  languages: [
    {id: 1, name: 'php'},
    {id: 4, name: 'javascript'},
    {id: 3, name: 'golang'},
    {id: 2, name: 'python'},
    {id: 5, name: 'java'},
  ],
},

從測試結果來看，並不會影響到排序。

key 重名時是否會報錯

data: {
  languages: [
    {id: 1, name: 'php'},
    {id: 4, name: 'javascript'},
    {id: 3, name: 'golang'},
    {id: 2, name: 'python'},
    {id: 5, name: 'java'},
  ],
},

click: function () {
	let language = {id: 5, name: 'kotlin'}
	let languages = this.data.languages
	languages.push(language)

	this.setData({
		languages: languages
	})
}

微信小程序開發工具只會報一個警告，並不會導致程序崩潰

VM6265:2 Do not set same key {5} in wx:key

比較奇怪的是，這個警告只有在重新渲染時才會報，如果初始化時就使用同樣的 key，並不會導致警告