{#key} لفرض إعادة التصيير
استخدم كتلة key لتدمير المكوّنات وإعادة إنشائها عند تغيّر قيمة
{#key} لفرض إعادة التصيير درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
كتلة key
تدمّر {#key expr} محتوياتها وتعيد إنشاءها كلما تغير expr. وهي مفيدة عندما تريدون مكوّنًا جديدًا تمامًا.
إعادة تشغيل الرسوم المتحركة
غلّفوا عنصرًا متحركًا داخل {#key} لإعادة تشغيل الانتقال في كل مرة يتغير فيها المفتاح.
{#key id}
<div in:fade>{message}</div>
{/key}إعادة ضبط حالة المكوّن
غلّفوا مكوّنًا ابنًا ذا حالة داخلية باستخدام {#key id} لإعادة ضبط تلك الحالة بالكامل عند تغير id.
{#key currentUser.id}
<UserProfile user={currentUser} />
{/key}الفرق عن مفتاح each
تستخدم كتلة {#key} مفتاحًا لعنصر واحد، بينما تستخدم {#each ... (key)} مفاتيح لعناصر القائمة.
متى تستخدمها
استخدموها عندما تريدون إعادة ضبط حالة داخلية معقدة من دون مسح كل حقل يدويًا.
تكلفة الأداء
يؤدي كل تغير في المفتاح إلى إزالة الشجرة الفرعية وإعادة بنائها. تجنبوا تغليف أشجار ضخمة إذا كان المفتاح يتغير كثيرًا.
وسم الإغلاق
أغلقوا باستخدام {/key}.
الاستخدامات الشائعة
أعيدوا تشغيل الرسوم المتحركة، وأعيدوا ضبط المدخلات غير المتحكم بها، وأجبروا على جلب جديد عند الانتقال إلى كيان جديد.
بديل: bind:this
يمكنكم أحيانًا إعادة ضبط الحالة إجرائيًا باستخدام ref. وتكون {#key} أنظف عند إجراء عمليات إعادة الضبط التصريحية.
الدمج مع الانتقالات
ادمجوها مع الانتقالات لتوفير إشارة مرئية سلسة على حدوث تغير جوهري.
تجنبها عند التغييرات البسيطة
لا تغلفوا المحتوى التفاعلي البحت داخل {#key} — إذ تحدّثه Svelte بكفاءة أصلًا.
تحقق سريع
ماذا تفعل {#key x} عند تغير x؟
مراجعة
تفرض {#key} الإزالة وإعادة البناء الكاملين كلما تغير تعبيرها، وهي مفيدة لإعادة الضبط وإعادة تشغيل الرسوم المتحركة.
الأسئلة الشائعة
هل درس «{#key} لفرض إعادة التصيير» مجاني؟
نعم — نص درس «{#key} لفرض إعادة التصيير» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «{#key} لفرض إعادة التصيير»؟
استخدم كتلة key لتدمير المكوّنات وإعادة إنشائها عند تغيّر قيمة تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «{#key} لفرض إعادة التصيير»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- {#if} و{#else if} و{#else}
- {#each} مع الفهرس والمفتاح
- {#key} لفرض إعادة التصيير
- {#each} المتداخلة والتحديثات المعتمدة على المفتاح