Detaillierte Einführung des WeChat-Applets wx:key

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

Ich persönlich finde, dass die offiziellen Beispiele nicht sehr klar sind. Die offizielle Erklärung lautet wie folgt:

wx:key

Wenn sich die Position der Elemente in der Liste dynamisch ändert oder der Liste neue Elemente hinzugefügt werden und Sie möchten, dass die Elemente in der Liste ihre eigenen Eigenschaften und ihren eigenen Status beibehalten (z. B. den Eingabeinhalt in 0f0306f9b187f2e363126bc29c8b1420, < ;switch/> ausgewählter Status), müssen Sie wx:key verwenden, um die eindeutige Kennung des Elements in der Liste anzugeben.

Der Wert von wx:key wird in zwei Formen bereitgestellt

Eine Zeichenfolge stellt eine Eigenschaft des Elements im Array der for-Schleife dar. Der Wert der 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:

Wenn Datenänderungen ein erneutes Rendern der Renderebene auslösen, werden die Komponenten mit dem Schlüssel korrigiert und das Framework stellt sicher, dass sie neu angeordnet und nicht neu erstellt werden, um sicherzustellen, dass die Gruppe vorhanden ist

Das Widget behält seinen eigenen Status bei und verbessert die Effizienz der Listenwiedergabe.

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

Beispielcode:

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

Hier ist mein persönliches Verständnis. Ich hoffe, Sie können mich korrigieren, wenn ich etwas Falsches finde: Nehmen Sie 537c3612aaee3a51faaea122dd3854284cfc40e017beed9e13939e19a179680a, wenn es keinen wx:key gibt, ändern Sie dessen Reihenfolge oder „Optionen hinzufügen“ folgt nicht der vorherigen Schaltfläche zum Ändern der Reihenfolge und befindet sich immer an einer festen Position. Wenn wx:key vorhanden ist, ist das Gegenteil der Fall Tags, die die Reihenfolge ändern oder Artikel hinzufügen können.

Vielen Dank fürs Lesen, ich hoffe, das hilft allen und vielen Dank für Ihre Unterstützung dieser Website!

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