Détails de wx:key pour le mini-programme WeChat

wx:key Lorsque je suis en train d'apprendre, je ne suis pas très clair sur ce qui se passe, après avoir cherché des informations sur Internet, j'ai organisé :

　 Je sens que les exemples fournis par l'officiel ne sont pas très clairs, l'explication officielle est la suivante :

wx:key

Si la position des éléments de la liste change dynamiquement ou si de nouveaux éléments sont ajoutés à la liste, et si l'on souhaite que les éléments de la liste conservent leurs caractéristiques et leur état (par exemple <input/de l'entrée, <switch}}/de l'état sélectionné), il est nécessaire d'utiliser wx:key pour spécifier l'identifiant unique de l'élément de la liste.

La valeur de wx:key est fournie sous deux formes

Chaîne, représentant une propriété de l'item dans l'array de boucle for. La valeur de cette propriété doit être une chaîne ou un nombre unique dans la liste et ne doit pas changer dynamiquement.

Mots-clés à conserver *this représente l'item lui-même dans la boucle for. Cette représentation nécessite que l'item lui-même soit une chaîne de caractères unique ou un nombre, par exemple :

Lorsque les données changent et déclenchent un nouveau rendu du niveau de rendu, les composants portant une clé sont corrigés. Le framework assure qu'ils sont réordonnés plutôt que recréés pour assurer le

Les éléments conservent leur état et améliorent l'efficacité du rendu de la liste.

Si wx:key n'est pas fourni, un warning sera affiché. Si vous savez que la liste est statique ou que l'ordre n'est pas important, vous pouvez choisir de l'ignorer.

Exemple de 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
  )
 }
)

Je vais écrire ici ma compréhension personnelle, si quelque chose ne va pas, j'espère que tout le monde peut me corriger : avec <switch></par exemple, s'il n'y a pas wx:key, lorsque vous sélectionnez l'un des boutons, changez son ordre ou ajoutez une option, le bouton sélectionné ne suit pas la modification de l'ordre du bouton précédent, il reste toujours à la position fixe, s'il y a wx:key, au contraire, applicable aux listes ou autres balises qui peuvent modifier l'ordre ou ajouter des éléments

Merci de lire, j'espère que cela peut aider tout le monde, merci pour le soutien à ce site !