Detailed Introduction of wx:key in WeChat Mini Program

WeChat Mini Program wx:key When I was studying, I was not very clear about what was going on, after searching for information on the Internet, I have organized the following:

　 I personally feel that the examples given by the official are not very clear, and the official explanation is as follows:

wx:key

If the position of items in the list changes dynamically or new items are added to the list, and it is desired that the items in the list maintain their own characteristics and status (such as <input/The input content within >, <switch>/The selected state of >), you need to use wx:key to specify the unique identifier of the item in the list.

wx:key values are provided in two forms

A string representing a property of the item in the array of the for loop, the value of the property needs to be a unique string or number in the list and cannot be dynamically changed.

Reserved keywords *this represents the item itself in the for loop, and this representation requires that the item itself is a unique string or number, such as:

When the data changes and triggers the re-rendering of the rendering layer, the components with keys will be corrected, and the framework will ensure that they are reordered rather than recreated to ensure the group

The component maintains its own state and improves the efficiency of list rendering.

If wx:key is not provided, a warning will be reported. If it is known that the list is static or the order does not matter, you can choose to ignore it.

Example code:

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>
Page({
 data: {
  objectArray: [
   {id: 5, unique: 'unique_5}
   {id: 4, unique: 'unique_4}
   {id: 3, unique: 'unique_3}
   {id: 2, unique: 'unique_2}
   {id: 1, unique: 'unique_1}
   {id: 0, unique: 'unique_0'},
  ],
  numberArray: [1, 2, 3, 4]
 },
 switch: 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 temp = this.data.objectArray[x]
   this.data.objectArray[x] = this.data.objectArray[y]
   this.data.objectArray[y] = temp
  }
  this.setData({
   objectArray: this.data.objectArray
  )
 },
 addToFront: function(e) {
  const length = this.data.objectArray.length
  this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
  this.setData({
   objectArray: this.data.objectArray
  )
 },
 addNumberToFront: function(e){
  this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
  this.setData({
   numberArray: this.data.numberArray
  )
 }
)

Here is my personal understanding, please point out if there is anything wrong: with <switch></take the <switch> element as an example, if there is no wx:key, when selecting one of the buttons, changing the order or adding options, the selected button will not follow the previous button to change the order, it will always stay in the fixed position. If there is wx:key, it is the opposite, applicable to lists or other tags that can change order or add items

Thank you for reading, I hope it can help everyone. Thank you for your support of this site!