この記事では、主に WeChat ミニ プログラム wx:key の関連情報を詳しく紹介し、簡単なコード例を添付して、必要な友人が参照できるようにします
WeChat ミニ プログラム wx:key 私の中で。自分の研究 何が起こっているのかよく分からなかったので、ネットで情報を調べて整理しました:
個人的には、公式の例はあまり明確ではないと感じます: 公式の説明は次のとおりです:
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: '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 }) } })
ChaiGe WeChat ミニ プログラム アプリケーション ストア
以上がミニプログラム開発におけるwx:keyの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。