ミニプログラム開発におけるwx:keyの詳細説明

この記事では、主に WeChat ミニ プログラム wx:key の関連情報を詳しく紹介し、簡単なコード例を添付して、必要な友人が参照できるようにします

WeChat ミニ プログラム wx:key 私の中で。自分の研究 何が起こっているのかよく分からなかったので、ネットで情報を調べて整理しました:

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

wx:key

リストに項目がある場合、位置は動的に変更されるか、新しい項目がリストに追加され、リスト内の項目は独自の特性とステータスを維持することが期待されます（ 0f0306f9b187f2e363126bc29c8b1420 の入力内容、698d939a2c9041f2302734cfeb04788e の選択状態) を使用するには、 wx:key を使用してリスト内の項目の一意の識別子を指定する必要があります。

wx:key の値は、for

の array 内の項目の特定のプロパティを表す string の 2 つの形式で提供されます。リストに含める必要があります。動的に変更できない一意の文字列または数値。

予約されたキーワード *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 で、その逆はリストに適用できます。または、他のタグで順序を変更したり項目を追加したりできます

WeChat ミニプログラムの完全なソースコード

ChaiGe WeChat ミニ プログラム アプリケーション ストア

以上がミニプログラム開発におけるwx:keyの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。