Introduction détaillée de l'applet WeChat wx:key

Lorsque j'étudiais l'applet WeChat wx:key, je n'ai pas très bien compris ce qui se passait. Après avoir vérifié les informations en ligne, j'ai compris :

Personnellement, j'estime que les exemples officiels donnés ne sont pas très clairs. L'explication officielle est la suivante :

wx: clé

Si la position des éléments dans la liste change dynamiquement ou si de nouveaux éléments sont ajoutés à la liste et que vous souhaitez que les éléments de la liste conservent leurs propres caractéristiques et statut (comme le contenu d'entrée dans 0f0306f9b187f2e363126bc29c8b1420, < ;switch/> état sélectionné), vous devez utiliser wx:key pour spécifier l'identifiant unique de l'élément dans la liste.

La valeur de wx:key est fournie sous deux formes

Une chaîne représente une propriété de l'élément dans le tableau de la boucle for. La valeur de la propriété doit être la seule chaîne ou nombre de la liste et ne peut pas être modifiée dynamiquement.

Le mot clé réservé *this représente l'élément lui-même dans la boucle for. Cette représentation nécessite que l'élément lui-même soit une chaîne ou un nombre unique, tel que :

Lorsque des modifications de données déclenchent le nouveau rendu de la couche de rendu, les composants avec la clé seront corrigés et le framework veillera à ce qu'ils soient réorganisés plutôt que recréés pour garantir que le groupe est

Le widget conserve son propre état et améliore l'efficacité du rendu des listes.

Si wx:key n'est pas fourni, un avertissement sera signalé. Si vous savez clairement que la liste est statique ou si vous n'avez pas besoin de prêter attention à son ordre, 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
  })
 }
})

Voici ma compréhension personnelle. J'espère que vous pourrez me corriger si je trouve quelque chose qui ne va pas : prenez comme exemple 537c3612aaee3a51faaea122dd3854284cfc40e017beed9e13939e19a179680a ou ajouter des options Lorsque le bouton est sélectionné, il ne suivra pas le bouton précédent pour changer l'ordre, et sera toujours dans une position fixe. S'il y a wx:key, l'inverse est vrai. Il convient aux listes ou autres. des balises qui peuvent modifier l’ordre ou ajouter des éléments.

Merci d'avoir lu, j'espère que cela aidera tout le monde, et merci pour votre soutien à ce site !

Pour plus d'introduction détaillée de l'applet WeChat wx:key et des articles connexes, veuillez prêter attention au site Web PHP chinois !