微信小程序关于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)

作者：Jowney
链接：https://www.jianshu.com/p/e81d29b01fbe
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

二、如何使用

使用情况有两种：
第一种：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.lengthfor (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是干什么的，知道怎么用就可以了。

作者：Jowney
链接：https://www.jianshu.com/p/e81d29b01fbe