微信小程序： wx:key详解

Posted 2022-01-31 北方的刀郎

微信小程序： 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），需要是列表中唯一的字符串或者或者数字，且不会发生改变。例如：

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