Wechat applet: wx:key details

1, Code demonstration

Source code without wk: key:

//<!-- pages/mypage/mypage. Wxml -- > (wxml page structure file)
<switch wx:for = "{{numberArray}}"  style='display : block;'>{{item}}</switch>


// pages/mypage/mypage.js (js script file)
Page({

  /**
   * Initial data of the 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
    })
  }

})

The warning after compilation is as follows: when using "wx:for", you should use the "wx: key" attribute, which can improve efficiency.

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>

Official explanation: when the data change triggers the rendering layer to re render, the components with key s will be corrected. The framework will ensure that they are reordered rather than re created, so as to ensure that the components maintain their own state and improve the efficiency of list rendering.

My understanding: without using wx:key, if the data in the array changes, each Item object will be recreated and the list will be rendered (time-consuming and laborious)
When wx:key is used, if the data in the array changes, only the corresponding objects are reordered. Objects that have not changed will not be recreated (Very good)

2, How to use

There are two use cases:
The first type: wk:key = "string", which represents a property name of the item in the array of the for loop. It must be a unique string or number in the list and will not change. For example:

  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"
    }],

id should be unique in the objectArray, so it should be written as wx:key="id"
The code is as follows

<!--pages/mypage/mypage.wxml-->
<block>
  <switch wx:for="{{objectArray}}" wx:key="id" style="display : block;">{{item.id}}</switch>
  <button bindtap="randomSort">Random exchange data</button>
</block>

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

  /**
   * Initial data of the 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
    })
  }
  }

})

The second type: wk:key="*this" represents the item itself in the for loop. This kind of representation requires that the item itself is a unique string or number. (no more examples of laziness)

3, Finally

1. If wx:key is not provided, the console will output a warning. If you clearly know that the list is static, you can choose to ignore it.
2. I tried the key value. If it is repeated, the program will not have any exceptions, but the console will output a warning to remind you that the key value is repeated. In addition, there are duplicate key values during the first rendering, and the console will not output a warning.
3. For now, just understand what wx: key does and how to use it