Explicación detallada de wx:key en WeChat Mini Program

wx:key en miniaplicaciones de WeChat No estoy muy claro sobre lo que está pasando mientras aprendo, después de buscar información en línea y organizarla:

　 Personalmente, siento que el ejemplo proporcionado por el equipo oficial no es muy claro, la explicación oficial es la siguiente:

wx:key

Si la posición de los elementos en la lista cambia dinámicamente o se agregan nuevos elementos a la lista, y se desea que los elementos de la lista mantengan sus características y estado propios (como <input/El contenido de entrada en >, <switch}}/El estado seleccionado de >), se necesita usar wx:key para especificar el identificador único del elemento en la lista.

El valor de wx:key se proporciona en dos formas

Cadena de caracteres, que representa alguna propiedad de item en el array del bucle for, el valor de esta propiedad debe ser una cadena de caracteres única o un número en la lista y no debe cambiar dinámicamente.

Palabras clave reservadas *this representa el item en sí mismo en el bucle for, esta representación requiere que el item en sí mismo sea una cadena de caracteres única o un número, como:

Cuando los datos cambian y se dispara la renderización de la capa de presentación, se corregirán los componentes con key, el framework asegurará que se reordenen en lugar de ser recreados, para asegurar que el grupo

El componente mantiene su estado propio y mejora la eficiencia de la renderización de la lista.

Si no se proporciona wx:key, se emitirá una advertencia. Si se sabe que la lista es estática o no se necesita prestar atención a su orden, se puede optar por ignorarla.

Ejemplo de código:

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

Aquí escribo mi comprensión personal, espero que todos me corrijan si hay algo incorrecto: con <switch></Por ejemplo, si no hay wx:key, cuando se selecciona uno de los botones, cambia su orden o se agrega una opción, el botón seleccionado no seguirá el cambio de orden del botón anterior, sino que se mantendrá en la posición fija, si hay wx:key, es lo contrario, se aplica a listas u otros elementos que pueden cambiar el orden o agregar elementos.

Gracias por leer, espero que pueda ayudar a todos, gracias por el apoyo a nuestro sitio!