Explication détaillée de wx:key pour le développement de petits programmes

Cet article présente principalement les informations pertinentes de l'applet WeChat wx:key en détail et joint des exemples de code simples pour aider tout le monde à apprendre et à comprendre. Les amis dans le besoin peuvent se référer à

Applet WeChat wx. :key Je ne savais pas grand chose de ce qui se passait pendant mes études. 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 de l'élément dans la liste change dynamiquement ou si de nouveaux éléments sont créés. sont ajoutés à la liste et vous souhaitez que les éléments conservent leurs propres caractéristiques et états (tels que le contenu d'entrée dans 0f0306f9b187f2e363126bc29c8b1420, l'état sélectionné dans 698d939a2c9041f2302734cfeb04788e), et 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

String, représentée dans pour Loop Une certaine propriété de l'élément dans le tableau 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 :

Déclenché lorsque les données. changements Lorsque la couche de rendu restitue, elle corrigera les composants avec des clés. Le framework veillera à ce qu'ils soient réorganisés plutôt que recréés pour garantir que les

composants conservent les leurs. state.Et améliorer 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: &#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
  })
 }
})

Écrivez ma compréhension personnelle ici. J'espère que vous pourrez me corriger s'il y a quelque chose. faux : 537c3612aaee3a51faaea122dd3854284cfc40e017beed9e13939e19a179680aPar exemple, s'il n'y a pas de wx:key, lorsqu'un des boutons est sélectionné, lors d'un changement de son ordre ou d'un ajout d'options, le bouton sélectionné ne sera pas suivi si un bouton modifie l'ordre, il sera toujours dans une position fixe. S'il y a une clé wx:, l'inverse est vrai pour les listes ou autres balises qui peuvent modifier l'ordre ou ajouter des éléments

.

[Recommandations associées]

1. Code source complet du programme WeChat Mini

2 À la poursuite de l'App Store du programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!