WeChat アプレット wx:key の詳細な紹介

WeChat ミニプログラム wx:key 勉強していたとき、何が起こっているのかよくわかりませんでしたが、ネットで情報を確認した後、整理しました:

個人的には、公式の例はあまり明確ではないと感じています。公式の説明は次のとおりです:

wx :key

リスト内の項目の位置が動的に変更される場合、または新しい項目がリストに追加される場合、リスト内の項目が独自の特性を維持するようにしたい場合、およびステータス (、< ;switch/> の入力内容など) を取得するには、wx:key を使用してリスト内の項目の一意の識別子を指定する必要があります。

wx:key 値は 2 つの形式

String で提供され、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: &#39;unique_5&#39;},
   {id: 4, unique: &#39;unique_4&#39;},
   {id: 3, unique: &#39;unique_3&#39;},
   {id: 2, unique: &#39;unique_2&#39;},
   {id: 1, unique: &#39;unique_1&#39;},
   {id: 0, unique: &#39;unique_0&#39;},
  ],
  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: &#39;unique_&#39; + 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
  })
 }
})

何か間違っている場合は修正していただければ幸いです: wx:key がない場合を例に挙げます。ボタンの順序を変更するかオプションを追加する場合、選択したボタンは常に固定位置にあります。wx:key がある場合はその逆になります。リストや他のタグの順序を変更したり、プロジェクトを追加したりするために使用できます

読んでいただきありがとうございます。皆さんのお役に立てれば幸いです。このサイトをサポートしていただきありがとうございます。

WeChat アプレット wx:key の詳細な紹介と関連記事については、PHP 中国語 Web サイトをご覧ください。