Spiegazione dettagliata di wx:key in WeChat Mini Program

WeChat Mini Program wx:key Quando studio, non sono sempre chiaro cosa significhi, dopo aver consultato le informazioni su Internet, ho ordinato:

　 Penso che l'esempio fornito ufficialmente non sia molto chiaro, l'interpretazione ufficiale è la seguente:

wx:key

Se la posizione degli elementi dell'elenco cambia dinamicamente o vengono aggiunti nuovi elementi all'elenco e si desidera che gli elementi dell'elenco mantengano le loro caratteristiche e stato (ad esempio, il contenuto dell'input in <input/>, lo stato selezionato di <switch/>), è necessario utilizzare wx:key per specificare l'identificatore unico degli elementi dell'elenco.

Il valore di wx:key viene fornito in due forme

Stringa, che rappresenta una property dell'item nell'array del ciclo for, il valore di questa property deve essere una stringa o un numero unico nell'elenco e non può cambiare dinamicamente.

Riservare la parola chiave *this rappresenta l'oggetto item stesso nel ciclo for, questa rappresentazione richiede che item sia una stringa o un numero unico, ad esempio:

Quando i dati cambiano e viene attivata la rirenderizzazione del livello di rendering, viene corretto il componente con key, la framework assicura che venga riordinato invece di essere ricreato, per garantire che il gruppo

Il componente mantiene lo stato proprio e migliora l'efficienza della rendering della lista.

Se non viene fornito wx:key, verrà emesso un warning. Se si sa chiaramente che l'elenco è statico o non è necessario prestare attenzione all'ordine, si può scegliere di ignorarlo.

Esempio di codice:

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Aggiungi all'inizio </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Aggiungi all'inizio </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
  )
 }
)

Scrivo qui la mia interpretazione personale, se c'è qualcosa di sbagliato, vi prego di correggermi: prendiamo ad esempio <switch></switch>, se non c'è wx:key, quando si seleziona uno dei pulsanti, cambiando l'ordine o aggiungendo opzioni, il pulsante selezionato non seguirà la modifica dell'ordine del pulsante precedente, rimarrà sempre nella posizione fissa, se invece c'è wx:key, il comportamento è inverso, è applicabile a elenchi o etichette che possono modificare l'ordine o aggiungere elementi

Grazie per aver letto, spero di essere stato d'aiuto a tutti, grazie per il supporto al nostro sito!