{#each} المتداخلة والتحديثات المعتمدة على المفتاح
تعامل مع القوائم المتداخلة، واضمن تحديثات DOM فعّالة باستخدام كتل each المعتمدة على المفاتيح
{#each} المتداخلة والتحديثات المعتمدة على المفتاح درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
بُعدان
تداخلوا كتل {#each} لتصيير الجداول أو الشبكات أو الأشجار.
{#each rows as row, i}
<tr>
{#each row as cell, j}
<td>{cell}</td>
{/each}
</tr>
{/each}المفاتيح في كل مستوى
أضيفوا مفاتيح في كل مستوى لإجراء تحديثات فعّالة.
{#each rows as row (row.id)}
{#each row.cells as cell (cell.id)}
...
{/each}
{/each}بُنى الأشجار
استخدموا مكوّنات مناسبة للاستدعاء الذاتي أو كتل each للبيانات الشبيهة بالأشجار.
تجنبوا مفاتيح الفهرس
يفشل استخدام فهرس المصفوفة كمفتاح عند إدراج العناصر أو حذفها من المنتصف. فضّلوا معرّفًا مستقرًا.
مشكلة البيانات القابلة للتعديل
يؤدي تعديل المصفوفات المتداخلة من دون إعادة إسناد المرجع الخارجي إلى تعطيل التفاعلية. أعيدوا الإسناد على المستوى الأعلى.
rows = rows.map(r => r.id === id ? {...r, name} : r);التصفية والترتيب
أعيدوا دائمًا مصفوفة جديدة عند التصفية أو الترتيب؛ فالتعديل في المكان لا يؤدي إلى تشغيل التحديثات.
sorted = [...items].sort();الأداء
تجعل المفاتيح إضافة العناصر أو حذفها أو نقلها بتعقيد O(n)، بدلًا من فرض إعادة تصيير كاملة.
إعادة ترتيب القوائم
باستخدام المفاتيح، تصبح رسوم إعادة ترتيب العناصر سهلة: ادمجوها مع animate:flip.
التصيير الشرطي من الداخل
ادمجوا كتل {#if} داخل each للتحكم بدقة في العناصر التي تظهر.
مكوّن لكل عنصر
بالنسبة إلى العناصر المعقدة، صيّروا مكوّنًا ابنًا لإبقاء جسم الحلقة صغيرًا.
{#each todos as todo (todo.id)}
<Todo {todo} />
{/each}نمط تقسيم الصفحات
بالنسبة إلى القوائم الطويلة، استخدموا تقسيم الصفحات أو التصيير الافتراضي بدلًا من تصيير آلاف العقد.
تحقق سريع
لماذا نفضّل المعرّفات المستقرة على الفهارس كمفاتيح؟
مراجعة
تداخلوا كتل each للبيانات ثنائية الأبعاد، واستخدموا معرّفات مستقرة كمفاتيح في كل مستوى، وأعيدوا دائمًا إسناد المجموعات لتشغيل التحديثات.
الأسئلة الشائعة
هل درس «{#each} المتداخلة والتحديثات المعتمدة على المفتاح» مجاني؟
نعم — نص درس «{#each} المتداخلة والتحديثات المعتمدة على المفتاح» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «{#each} المتداخلة والتحديثات المعتمدة على المفتاح»؟
تعامل مع القوائم المتداخلة، واضمن تحديثات DOM فعّالة باستخدام كتل each المعتمدة على المفاتيح تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «{#each} المتداخلة والتحديثات المعتمدة على المفتاح»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- {#if} و{#else if} و{#else}
- {#each} مع الفهرس والمفتاح
- {#key} لفرض إعادة التصيير
- {#each} المتداخلة والتحديثات المعتمدة على المفتاح