微信小程序: wx:key详解

文章2019-08-1250 人已阅来源:网络

一、代码演示

未使用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是干什么的,知道怎么用就可以了。