Detaillierte Einführung des WeChat-Applets wx:key

WeChat-Miniprogramm wx:key Als ich studierte, verstand ich nicht ganz, was los war. Nachdem ich die Informationen online überprüft hatte, habe ich es geklärt:

Ich persönlich habe das Gefühl, dass die offiziellen Beispiele Die offizielle Erklärung lautet wie folgt:

wx:key

Wenn sich die Position der Elemente in der Liste dynamisch ändert oder neue Elemente hinzugefügt werden Wenn Sie möchten, dass die Elemente in der Liste ihre eigenen Eigenschaften und Zustände behalten (z. B. der Eingabeinhalt in 0f0306f9b187f2e363126bc29c8b1420, der ausgewählte Zustand von 698d939a2c9041f2302734cfeb04788e), müssen Sie wx verwenden: Schlüssel, um den eindeutigen Bezeichner des Elements in der Liste anzugeben.

Der Wert von wx:key wird in zwei Formen bereitgestellt

Zeichenfolge, die eine bestimmte Eigenschaft des Elements im Array der for-Schleife darstellt, den Wert der Die Eigenschaft muss die einzige Zeichenfolge oder Zahl in der Liste sein und kann nicht dynamisch geändert werden.

Das reservierte Schlüsselwort *this stellt das Element selbst in der for-Schleife dar. Diese Darstellung erfordert, dass das Element selbst eine eindeutige Zeichenfolge oder Zahl ist, wie zum Beispiel:

Ausgelöst, wenn die Daten Änderungen Wenn die Rendering-Ebene erneut gerendert wird, werden Komponenten mit Schlüsseln korrigiert und das Framework stellt sicher, dass sie neu angeordnet und nicht neu erstellt werden, um sicherzustellen, dass die Komponenten ihren eigenen Status beibehalten und die Leistung des Listenrenderings verbessern .

Wenn wx:key nicht angegeben wird, wird eine Warnung angezeigt. Wenn Sie eindeutig wissen, dass die Liste statisch ist oder nicht auf ihre Reihenfolge achten müssen, können Sie sie ignorieren.

Beispielcode:

Notieren Sie hier mein persönliches Verständnis. Ich hoffe, Sie können mich korrigieren, wenn etwas nicht stimmt: Nehmen Sie 537c3612aaee3a51faaea122dd3854284cfc40e017beed9e13939e19a179680a Wenn beispielsweise kein wx:key vorhanden ist und Sie eine der Schaltflächen auswählen, ihre Reihenfolge ändern oder Optionen hinzufügen, folgt die ausgewählte Schaltfläche nicht der vorherigen Schaltfläche, um die Reihenfolge zu ändern, und befindet sich immer an einer festen Position. Wenn wx:key im Gegenteil, eignet es sich für Listen oder andere Tags, mit denen die Reihenfolge geändert oder Elemente hinzugefügt werden können

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

Vielen Dank fürs Lesen, ich hoffe, es kann allen helfen, vielen Dank für Ihre Unterstützung Website!

Weitere ausführliche Einführungen zum WeChat-Applet wx:key und verwandte Artikel finden Sie auf der chinesischen PHP-Website!