微信小程序: wx:key详解

一、代码演示

未使用wk:key的源码：

//<!--pages/mypage/mypage.wxml-->（wxml页面结构文件）
<switch wx:for = "{{numberArray}}"  style='display : block;'>{{item}}</switch>


// pages/mypage/mypage.js（js脚本文件）
Page({

/**
* 页面的初始数据
*/
data: {
    numberArray: [2, 2, 3, 4]
},

addToFront: function(e) {

},
addNumberToFront: function(e) {
    this.data.numberArray = [this.data.numberArray.length + 1].concat(this.data.numberArray)
    this.setData({
    numberArray: this.data.numberArray
    })
}

})

编译后警告如下：在使用wx:for的时候你应该使用wx:key属性，这样可以提升效率。

VM1672:3  Now you can provide attr "wx:key" for a "wx:for" to improve performance.
6 | </block>
7 | 
> 8 | <switch wx:for = "{{numberArray}}"  style='display : block;'>{{item}}</switch>
    |  ^
9 | <button bindtap='addNumberToFront'>Add to The Front</button>

官方解释：当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

我的理解： 在不使用wx:key的情况下, 如果 array 内的数据发生改变，则会重新创建每个Item对象然后渲染列表（费时费力）
在使用wx:key的情况下，如果array中的数据发生改变，只是将对应的对象重新排序。未发生变化的对象，不会重新创建(Very good)

二、如何使用

使用情况有两种：

第一种：wk:key="字符串"，代表在for循环的array中的item的某个property，该property的值（不是property哦！）需要是列表中唯一的字符串或者或者数字，且不会发生改变。例如：

objectArray: [{
    id: 5,
    name: "Tom"
    }, {
    id: 4,
    name: "Jan"
    }, {
    id: 3,
    name: "Mike"
    }, {
    id: 2,
    name: "Kangkang"
    }, {
    id: 1,
    name: "Meria"
    }, {
    id: 0,
    name: "Luna"
}],

在该objectArray中能有唯一性的应该是id，所以应该写成wx:key="id"

代码如下

<!--pages/mypage/mypage.wxml-->
<block>
<switch wx:for="{{objectArray}}" wx:key="id" style="display : block;">{{item.id}}</switch>
<button bindtap="randomSort">随机交换数据</button>
</block>

// pages/mypage/mypage.js
Page({

/**
* 页面的初始数据
*/
data: {
    objectArray: [{
    id: 5,
    name: "Tome"
    }, {
    id: 4,
    name: "Jan"
    }, {
    id: 3,
    name: "Mike"
    }, {
    id: 2,
    name: "Kangkang"
    }, {
    id: 1,
    name: "Meria"
    }, {
    id: 0,
    name: "Luna"
    }]
},
randomSort: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; i++) {
    const x = Math.floor(Math.random() * length)
    const y = Math.floor(Math.random() * length)
    const tmp = this.data.objectArray[x]
    this.data.objectArray[x] = this.data.objectArray[y]
    this.data.objectArray[y] = tmp
    }
    this.setData({
    objectArray : this.data.objectArray
    })
}
}

})

第二种：wk:key="*this",代表在for循环中的item自身，这种表示需要item本身就是一个唯一的字符串或者数字。（偷懒不举例子了）

三、最后

1. 如果不提供wx:key，控制台会输出警告，如果明确知道该列表是静态的，可以选择忽视它。
2. 我试了一下key的值如果重复的话，程序并不会出现什么异常，但是控制台会输出警告提示你key值重复了。还有第一次渲染的时候就有重复的key值，控制台不会输出警告。
3. 就目前来看只要理解wx：key是干什么的，知道怎么用就可以了。