微信小程序： wx:key详解

向右看齐 2023-07-06 13:13 2阅读 0赞

## 一、代码演示 ##

未使用wk：key的源码：

//（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"**  
代码如下

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

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