Detailed explanation of wx:key in mini program development

This article mainly introduces the relevant information of the WeChat mini program wx:key in detail, and attaches simple code examples to help everyone learn and understand. Friends in need can refer to

WeChat mini program wx:key When I was studying, I didn’t know much about what was going on. After checking the information online, I sorted it out:

Personally, I feel that the official examples are not very clear. The official explanation is as follows:

wx:key

If the position of the items in the list will change dynamically or new items are added to the list, and you want the Items maintain their own characteristics and states (such as the input content in 0f0306f9b187f2e363126bc29c8b1420, the selected state in 698d939a2c9041f2302734cfeb04788e), and you need to use wx:key to specify the unique identifier of the item in the list.

The value of wx:key is provided in two forms

String , represented in for Loop A certain property of the item in array, the value of the property needs to be the only string or number in the list, and cannot be changed dynamically.

The reserved keyword *this represents the item itself in the for loop. This representation requires the item itself to be a unique string or number, such as:

Triggered when the data changes When the rendering layer re-renders, it will correct the components with keys. The framework will ensure that they are reordered rather than re-created to ensure that the components

maintain their own state. And improve the efficiency of list rendering.

If wx:key is not provided, a warning will be reported. If you clearly know that the list is static, or you do not need to pay attention to its order, you can choose to ignore it.

Sample 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: &#39;unique_5&#39;},
   {id: 4, unique: &#39;unique_4&#39;},
   {id: 3, unique: &#39;unique_3&#39;},
   {id: 2, unique: &#39;unique_2&#39;},
   {id: 1, unique: &#39;unique_1&#39;},
   {id: 0, unique: &#39;unique_0&#39;},
  ],
  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: &#39;unique_&#39; + 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
  })
 }
})

Write down my personal understanding here. I hope you can correct me if there is anything wrong: start with a1ff05a56cf2f5a66451895cefc9a72f4cfc40e017beed9e13939e19a179680aFor example, if there is no wx:key, when one of the buttons is selected, when changing its order or adding options, the selected button will not follow the previous button. If the order is changed, the position will always be fixed. If there is wx:key, the opposite is true. It is suitable for lists or other tags that can change the order or add items

[Related recommendations]

1 . Complete source code of WeChat mini program

2. Chai Ge WeChat mini program application store

The above is the detailed content of Detailed explanation of wx:key in mini program development. For more information, please follow other related articles on the PHP Chinese website!