微信小程序 wx:key

微信小程序 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 的值以兩種形式提供

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

二、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，並不會致使警告