React Academy · درس

HOC مقابل Render Props مقابل Custom Hooks

قارن بين استراتيجيات مشاركة التعليمات البرمجية الثلاث من حيث سهولة القراءة والاختبار والتركيب.

HOC مقابل Render Props مقابل Custom Hooks درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

مرحبًا

في هذا الدرس ستقارن بين HOCs وRender Props وCustom Hooks من حيث سهولة القراءة وقابلية الاختبار وقابلية التركيب، وستتعلم متى تكون كل واحدة منها الأداة المناسبة.

المشكلة التي تحلها الأنماط الثلاثة

توجد هذه الأنماط الثلاثة لمشاركة المنطق أو السلوك المعتمد على الحالة بين عدة مكوّنات — من دون نسخ التعليمات البرمجية ولصقها.

مزايا HOC

تعمل HOCs مع مكوّنات الأصناف، أي قبل ظهور hooks، وتت integrations بسلاسة مع المكتبات التي لا تدعم hooks، ويمكن تطبيقها بشفافية من دون تغيير التعليمات البرمجية المصدرية للمكوّن المغلّف.

عيوب HOC

تنشئ HOCs جحيم الأغلفة في DevTools، وقد تتسبب في تعارض الخصائص إذا أضافت HOCs اثنتان اسم الخاصية نفسه، كما يصعب جعلها صحيحة الأنواع في TypeScript. ويجب تمرير المراجع صراحةً.

مزايا Render Props

تجعل Render Props تدفق البيانات واضحًا — إذ يمكنك رؤية القيم التي يوفّرها مكوّن السلوك بدقة. وهي تعمل مع مكوّنات الأصناف والمكوّنات الوظيفية، وتناسب واجهات برمجة المكوّنات headless جدًا.

عيوب Render Props

تؤدي دوال رد الاتصال المتداخلة في Render Props إلى 'callback hell'. كما تكسر دوال render prop المضمّنة التخزين المؤقت. وتضيف ضوضاء مرئية مقارنةً باستدعاء hook بسيط.

مزايا Custom Hooks

تُعد Custom Hooks الأكثر قابلية للتركيب: يمكنك استدعاء hooks متعددة ودمجها، مع بقاء JSX الخاص بالمكوّن نظيفًا. كما يسهل اختبارها بمعزل عن غيرها، وتكون أنواع TypeScript فيها مباشرة.

const { on, toggle } = useToggle();
const { x, y } = useMouse();
// No wrapper components, no callback nesting

عيوب Custom Hooks

تعمل Custom Hooks مع المكوّنات الوظيفية فقط، وليس مع مكوّنات الأصناف. ولا يمكنها حقن JSX — فهي تُرجع البيانات والدوال فقط. وتحتاج بعض حالات الاستخدام، مثل حراس المصادقة الذين يعيدون التوجيه، إلى HOCs أو مكوّنات مغلّفة.

دليل اتخاذ القرار

هل تحتاج إلى إعادة توجيه مسار أو حمايته؟ استخدم HOC أو مكوّنًا مغلّفًا. هل تنشئ مكتبة واجهة مستخدم headless؟ استخدم Render Props أو hooks. هل تشارك منطقًا معتمدًا على الحالة في مكوّنات وظيفية؟ استخدم Custom Hook. هل تغلّف مكوّن صنف أو مكوّنًا تابعًا لمكتبة خارجية؟ استخدم HOC.

الخيار الافتراضي الحديث: ابدأ بـ Hooks

في قاعدة تعليمات برمجية حديثة لـ React، تتكوّن بالكامل من مكوّنات وظيفية، تكون Custom Hooks هي الخيار الافتراضي. ولا تلجأ إلى HOCs أو Render Props إلا عندما لا تتمكن hooks من حل المشكلة.

اختبار سريع

ما نمط مشاركة التعليمات البرمجية الموصى به افتراضيًا لاستخراج المنطق المعتمد على الحالة في المكوّنات الوظيفية الحديثة في React؟

مراجعة

تشارك HOCs وRender Props وCustom Hooks المنطق جميعًا. وتُعد hooks الخيار الافتراضي الحديث: نظيفة وقابلة للتركيب والاختبار. تُستخدم HOCs مع مكوّنات الأصناف وحراس المسارات. ويُستخدم Render Props مع واجهات المستخدم headless. اختر النمط بناءً على السياق.

الدرس التالي: **Refactoring a HOC to a Custom Hook** — ستحوّل HOC باسم withAuth إلى hook باسم useAuth خطوةً بخطوة.

الأسئلة الشائعة

هل درس «HOC مقابل Render Props مقابل Custom Hooks» مجاني؟

نعم — نص درس «HOC مقابل Render Props مقابل Custom Hooks» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «HOC مقابل Render Props مقابل Custom Hooks»؟

قارن بين استراتيجيات مشاركة التعليمات البرمجية الثلاث من حيث سهولة القراءة والاختبار والتركيب. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «HOC مقابل Render Props مقابل Custom Hooks»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

نمط Render Props
شرح المكوّنات عالية الرتبة (HOCs)
HOC مقابل Render Props مقابل Custom Hooks
إعادة هيكلة HOC إلى Custom Hook

← العودة إلى React Academy