شرح تفصيلي لـ wx:key في تطبيق واتساب الصغير

تطبيقات وكسر الصفحة الويب wx:key عندما كنت أتعلم لم أكن واضحاً تماماً ماذا يعني ذلك، بعد البحث في الإنترنت وجمع المعلومات، أقوم بتجميعها:

　 أشعر بأن الأمثلة التي أعطتها الشركة الرسمية ليست واضحة، والإيضاح الرسمي هو كما يلي:

wx:key

إذا كان موقع العناصر في القائمة سيتغير بشكل ديناميكي أو إذا تم إضافة عناصر جديدة إلى القائمة، وتريد أن تبقى العناصر في القائمة تحتوي على خصائصها ووضعها الخاص (مثل محتوى المدخل في <input/>، حالة اختيار <switch/>)، فمن الضروري استخدام wx:key لتعريف معرف فريد للعناصر في القائمة.

يتم تقديم قيمة wx:key في شكلين

النص، يمثل خصائص الملف في array في الدوران for، يجب أن تكون قيمة الخاصية نصاً فريداً أو رقمياً، وأن لا تتغير ديناميكياً.

الإشارة *this تمثل نفس الملف في الدوران for، هذا التعبير يتطلب أن يكون الملف نفسه نصاً فريداً أو رقمياً، مثلًا：

عندما يتم تغيير البيانات وتفعيل إعادة إنشاء طبقة التمثيل، سيتم تعديل العناصر التي تحتوي على key، ستحرص اللبنة على إعادة ترتيبها بدلاً من إنشائها من جديد، لضمان

يحافظ العنصر على حالة نفسه، ويحسن كفاءة إنشاء القائمة.

إذا لم يتم تقديم wx:key، سيتم إرسال تحذير، إذا كنت تعرف أن القائمة ثابتة أو لا تحتاج إلى الاهتمام بترتيبها، يمكنك تجاهل ذلك.

مثال على الكود:

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> تبديل </button>
<button bindtap="addToFront"> إضافة إلى الأمام </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> إضافة إلى الأمام </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
  للدوران i = 0; i < length; ++i) {
   تعريف x = Math.floor(Math.random() * length)
   تعريف y = Math.floor(Math.random() * length)
   تعريف 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
  )
 }
)

أكتب هنا فهمي الشخصي، إذا كان هناك أي خطأ، يرجى تصحيحه: على سبيل المثال، إذا لم يكن هناك wx:key، عند اختيار أحد الأزرار، إذا تم تغيير ترتيبها أو إضافة خيار، فإن الزر المختار لن يتبع تغيير ترتيب الزر السابق، بل سيبقى في موقع ثابت، وإذا كان هناك wx:key، فإن الأمر سيكون عكس ذلك، وهو مناسب لقوائم أو علامات يمكن تغيير ترتيبها أو إضافة عناصر

شكرًا على القراءة، آمل أن تساعدكم، شكرًا لدعمكم لموقعنا!