WeChat 애플릿 wx:key에 대한 자세한 소개

WeChat 애플릿 wx:key를 공부할 때 무슨 일이 일어나고 있는지 잘 이해하지 못했고 온라인으로 정보를 확인한 후 정리했습니다.

개인적으로 나는 주어진 공식적인 예가 그다지 명확하지 않다고 생각합니다. 공식적인 설명은 다음과 같습니다.

wx:키

목록에 있는 항목의 위치가 동적으로 변경되거나 새 항목이 목록에 추가되고 목록에 있는 항목이 고유한 특성과 상태를 유지하도록 하려는 경우(예: 0f0306f9b187f2e363126bc29c8b1420, 47e041e46f7086305b35f6ef863cb588 선택 상태), wx:key를 사용하여 목록에 있는 항목의 고유 식별자를 지정해야 합니다.

wx:key 값은 두 가지 형태로 제공됩니다.

문자열은 for 루프 배열에 있는 항목의 속성을 나타냅니다. 속성 값은 목록의 유일한 문자열 또는 숫자여야 하며 동적으로 변경할 수 없습니다.

예약된 키워드 *this는 for 루프의 항목 자체를 나타냅니다. 이 표현을 사용하려면 항목 자체가 다음과 같은 고유한 문자열 또는 숫자여야 합니다.

데이터 변경이 렌더링 레이어를 다시 렌더링하도록 트리거하면 키가 있는 구성 요소가 수정되고 프레임워크는 그룹이 다시 생성되지 않도록 다시 정렬되는 것을 확인합니다.

위젯은 자체 상태를 유지하고 목록 렌더링의 효율성을 향상시킵니다.

wx:key가 제공되지 않으면 경고가 보고됩니다. 목록이 정적임을 명확히 알고 있거나 순서에 주의할 필요가 없으면 무시하도록 선택할 수 있습니다.

샘플 코드:

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

개인적인 이해는 다음과 같습니다. 잘못된 점을 발견하면 수정해 주시기 바랍니다. 537c3612aaee3a51faaea122dd3854284cfc40e017beed9e13939e19a179680a 버튼 중 하나를 선택할 때 wx:key가 없으면 순서를 변경하세요. 또는 옵션을 추가하면 이전 버튼을 따라 순서가 변경되지 않으며 항상 고정된 위치에 있게 됩니다. wx:key가 있으면 그 반대가 됩니다. 순서를 변경하거나 항목을 추가할 수 있는 태그입니다.

읽어 주셔서 감사합니다. 이 내용이 모든 사람에게 도움이 되기를 바라며 이 사이트를 지원해 주셔서 감사합니다!

WeChat 애플릿 wx:key에 대한 자세한 소개 및 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!