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

Mini programme WeChat wx:key Quand j'étudiais, je ne comprenais pas très bien ce qui se passait. Après avoir vérifié les informations en ligne, j'ai fait le tri :

Personnellement, j'ai l'impression que les exemples officiels. ne sont pas très clairs. L'explication officielle est la suivante :

wx:key

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 restent leurs propres caractéristiques et états (comme le contenu d'entrée dans , l'état sélectionné de ), vous devez utiliser wx : clé pour spécifier l’identifiant unique de l’élément dans la liste.

La valeur de wx:key est fournie sous deux formes

chaîne, représentant une certaine propriété de l'élément dans le tableau de la boucle for, la valeur du la propriété doit être la seule chaîne ou numéro 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 :

Déclenché lorsque les données. changements Lorsque la couche de rendu effectue un nouveau rendu, les composants avec des clés seront corrigés et le framework veillera à ce qu'ils soient réorganisés plutôt que recréés pour garantir que les composants conservent leur propre état et améliorent les performances de rendu de la liste. .

Si wx:key n'est pas fourni, un avertissement sera signalé. Si vous savez clairement que la liste est statique ou que vous n'avez pas besoin de prêter attention à son ordre, vous pouvez choisir de l'ignorer.

Exemple de code :

Écrivez ma compréhension personnelle ici. J'espère que vous pourrez me corriger s'il y a quelque chose qui ne va pas : Prenez à titre d'exemple, s'il n'y a pas de wx:key, lorsque vous sélectionnez l'un des boutons, modifiez son ordre ou ajoutez des options, le bouton sélectionné 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 Au contraire, il convient aux listes ou autres balises qui peuvent modifier l'ordre ou ajouter des éléments

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

Merci d'avoir lu, j'espère que cela pourra aider tout le monde, merci pour votre soutien site!

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