WeChat Mini-Programm wx:key detailliert

微信小程序 wx:key Während ich selbst lerne, bin ich mir nicht so sicher, was genau passiert. Nach dem Durchsuchen von Informationen im Internet habe ich folgendes zusammengefasst:

　 Ich finde, dass die Beispiele, die von der offiziellen Seite gegeben werden, 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 neue Elemente hinzugefügt werden, und man möchte, dass die Elemente in der Liste ihre eigenen Eigenschaften und Zustände beibehalten (z.B. <input/Der Inhalt der Eingabe in <switch}}/Der Status der Auswahl von > erfordert die Verwendung von wx:key, um den eindeutigen Bezeichner des Elements in der Liste zu spezifizieren.

Der Wert von wx:key wird in zwei Formen bereitgestellt

String, der eine Property des Elements im Array des for-Schleifs repräsentiert. Der Wert dieser Property muss ein einzigartiger String oder eine Zahl in der Liste sein und darf nicht dynamisch geändert werden.

Beibehalten von Schlüsselwörtern *this stellt das Element selbst im for-Schleifendurchlauf dar. Diese Darstellung erfordert, dass das Element selbst ein einzigartiger String oder eine Zahl ist, wie z.B.:

Wenn die Daten geändert werden und die Neuerstellung der Render-Ebene ausgelöst wird, werden die mit Key versehenen Komponenten korrigiert. Das Framework stellt sicher, dass sie neu sortiert werden, anstatt neu erstellt zu werden, um sicherzustellen, dass die Gruppe

Das Element behält seinen eigenen Zustand bei und verbessert die Effizienz der Liste bei der Renderung.

Wird wx:key nicht bereitgestellt, wird eine Warnung ausgegeben. Wenn bekannt ist, dass die Liste statisch ist oder deren Reihenfolge nicht wichtig ist, kann sie ignoriert werden.

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: 55}
   {id: 44}
   {id: 33}
   {id: 22}
   {id: 11}
   {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 schreibe ich meine persönliche Meinung, falls es etwas Falsches gibt, hoffe ich, dass Sie es korrigieren können: mit <switch></nehmen wir <switch> als Beispiel, wenn es kein wx:key gibt, wird die Reihenfolge geändert oder eine Option hinzugefügt, wenn ein Button ausgewählt wird, wird der ausgewählte Button nicht der Reihenfolge des vorherigen Buttons folgen, sondern immer an derselben Position bleiben, wenn es wx:key gibt, ist dies umgekehrt, geeignet für Listen oder andere Tags, die die Reihenfolge ändern oder Elemente hinzufügen können

Vielen Dank für das Lesen, ich hoffe, es kann Ihnen helfen, danke für Ihre Unterstützung für diese Seite!