Explicação detalhada de wx:key no WeChat Mini Program

wx:key do WeChat Mini Program Quando estou aprendendo, nem sempre estou claro sobre o que está acontecendo, após pesquisar na internet e organizar as informações:

　 Pessoalmente, acho que o exemplo fornecido pela equipe oficial não é muito claro, a explicação oficial é a seguinte:

wx:key

Se a posição dos itens da lista for dinâmica ou se novos itens forem adicionados à lista, e se desejar que os itens da lista mantenham suas próprias características e estado (como <input/do conteúdo de entrada, <switch>/do estado selecionado), é necessário usar wx:key para especificar o identificador único do item na lista.

O valor de wx:key é fornecido em duas formas

String, representa uma property específica do item no array do loop for, o valor dessa property deve ser uma string ou número único na lista e não pode mudar dinamicamente.

Palavras-chave reservadas *this representa o item本身no loop for, essa representação requer que o item em si seja uma string ou número único, por exemplo:

Quando os dados mudam e acionam a renderização da camada de renderização novamente, os componentes com chave serão corrigidos. O framework garante que eles sejam reordenados, não recriados, para garantir que o grupo

Componentes mantêm seu próprio estado e aumentam a eficiência da renderização da lista.

Se não for fornecido wx:key, será emitido um warning. Se você souber que a lista é estática ou não se importa com a ordem, você pode optar por ignorar.

Código de exemplo:

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Alternar </button>
<button bindtap="addToFront"> Adicionar ao início </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Adicionar ao início </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
  )
 }
)

Aqui está a minha compreensão pessoal, se houver algo errado, por favor, corrijam: com <switch></por exemplo, se não houver wx:key, ao selecionar algum botão dentro deles, ao mudar a ordem ou adicionar opções, o botão selecionado não seguirá a mudança de ordem do botão anterior, ficará sempre na mesma posição. Se houver wx:key, o efeito é o oposto, aplicável a listas ou outros rótulos que podem mudar a ordem ou adicionar itens.

Obrigado por ler, espero que ajude a todos, obrigado pelo apoio ao site!