المكوّنات عالية الرتبة
غلّف المكوّنات لإضافة سلوك أو بيانات دون تعديل المكوّن الأصلي.
المكوّنات عالية الرتبة درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
تعريف HOCs
يلفّ المكوّن الأعلى رتبة مكوّنًا آخر لإضافة سلوك أو بيانات.
في Svelte
يمكنك كتابة مكوّن تغليف يستورد مكوّنًا أساسيًا ويضيف إمكانات مثل التسجيل والمصادقة وتطبيق السمات.
<!-- WithAuth.svelte -->
{#if user}
<slot />
{:else}
<a href="/login">Login</a>
{/if}الاستخدام
غلّف الصفحات التي تتطلب المصادقة.
<WithAuth>
<Dashboard />
</WithAuth>إضافة السلوكيات
يمكن لـ HOC إرفاق معالجات أحداث، أو مراقبة التمرير، أو حقن الأنماط حول مكوّناته الفرعية.
مقارنة بالتركيب
تُعدّ HOCs نمطًا واحدًا؛ وغالبًا ما يكون التركيب باستخدام الفتحات أو المقاطع أبسط.
متى تستخدم HOCs
للاهتمامات المشتركة التي ينبغي أن تغلّف العديد من المكوّنات بصورة متسقة.
HOC موفّر للسياق
يُعدّ HOC الذي يستدعي setContext طريقة واضحة لتحديد نطاق التبعيات لشجرة فرعية.
تمرير الخصائص
استخدم $$restProps أو rest من $props() لتمرير الخصائص العشوائية.
الأداء
تضيف الأغلفة طبقة من المكوّنات؛ وهذا مقبول عادةً، لكن انتبه إلى ذلك في واجهات المستخدم شديدة التداخل.
الاختبار
يسهل اختبار HOCs من خلال تركيب الغلاف باستخدام مدخلات متنوعة.
بديل: المخازن المخصصة
يكون المخزن المخصص مع مكوّن صغير أحيانًا أوضح من HOC.
اختبار سريع
ماذا يفعل HOC؟
مراجعة
تغلف HOCs المكوّنات لإضافة اهتمامات مشتركة بين أجزاء التطبيق. وهي مفيدة للمصادقة وتنسيق المظهر وتسجيل الأحداث عبر صفحات عديدة.
الأسئلة الشائعة
هل درس «المكوّنات عالية الرتبة» مجاني؟
نعم — نص درس «المكوّنات عالية الرتبة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «المكوّنات عالية الرتبة»؟
غلّف المكوّنات لإضافة سلوك أو بيانات دون تعديل المكوّن الأصلي. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «المكوّنات عالية الرتبة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Render Props باستخدام snippets
- المكوّنات عالية الرتبة
- نمط Builder لواجهة المستخدم عديمة الرأس
- المكوّنات المركبة باستخدام Context