نمط HOC (مكون الترتيب العالي) شائع جدًا لدى مطوري React. لكن المطورين فو تجاوزه بطريقة أو بأخرى. عبثا جدا. دعنا نحاول معرفة ذلك.
ما هو HOC؟
المكون عالي الترتيب (HOC) هو وظيفة تأخذ مكونًا حاليًا وتقوم بإرجاع مكون آخر يلف المكون الأصلي ، مضيفًا منطقًا جديدًا.
HOC مقابل الخلطات
ربما سيتساءل الكثيرون عن سبب استخدام HOC عندما تكون هناك شوائب؟ كما أنها تضيف وظائف جديدة للمكونات. ما يمكن HOC التي الشوائب لا أعرف؟
أولاً ، تذكر ما هي الشوائب الموجودة في Vue (التعريف مأخوذ من وثائق Vue):
Mixins هي أداة إعادة استخدام رمز مرنة في مكونات Vue. قد يحتوي كائن النجاسة على أي خيارات مكون. عند استخدام الشوائب بواسطة أحد المكونات ، يتم "خلط" جميع خيارات الشوائب مع خيارات المكون الخاصة.
يبدو أن الغرض من الشوائب و HOC هو نفسه - فهي تسمح لك بتوسيع وظائف المكونات المختلفة. وخارجها (باستخدام المكون النهائي) يمكن أن تبدو هي نفسها.
لكن الفرق يكمن في مبدأ HOC والشوائب. يتم خلط "الشوائب" عند التصريح عن مكون - أي مثيل للمكون سيحتوي عليها.
باستخدام HOC ، نقوم بلف مثيل لمكون لا يغير المكون نفسه ، ولكننا ننشئ مثيلًا جديدًا عند الحاجة. هذا يعني أننا نؤثر فقط على جزء الشفرة الذي نستخدمه فيه. نتيجةً لذلك ، قلل من تماسك الكود ، وجعله أكثر قابلية للقراءة ومرونة.
HOC يشبه إلى حد ما نمط تصميم الديكور .
إنشاء HOC
حسنا اذن دعونا نلقي نظرة على كل هذا مع مثال.
لذلك ، لدينا عنصر زر:
بعد بعض الوقت ، كنا بحاجة فجأة لتسجيل الضغط على بعض الأزرار (ولكن ليس كل شيء). يمكننا القيام بذلك من خلال الشوائب عن طريق خلط رمز تسجيل الدخول إلى مكون الزر ، ثم ، في المكان المناسب ، تمكين أو تعطيل التسجيل من خلال بعض خصائص المكون. لكن توافق ، هذه ليست مريحة للغاية؟ وإذا كان هناك الكثير من هذه الوظائف؟ خطأ واحد - وجميع الأزرار قد تتوقف عن العمل بشكل صحيح.
HOC في هذه الحالة سيكون حلا رائعا. نحن فقط نلتف الزر في بعض الأماكن باستخدام HOC المناظر.
حان الوقت للتعرف على HOC في الممارسة العملية.
الخطوة 1. إنشاء وظيفة HOC
نتذكر أن HOC هي وظيفة تأخذ مكونًا كإدخال وإرجاع أخرى. لذلك دعونا إنشاء مثل هذه الوظيفة. دعنا نسميها withLoggerButton.
من المعتاد البدء في تسمية وظائف HOC بـ - هذا نوع من علامة تحديد HOCs.
والنتيجة هي وظيفة تأخذ مكون زر كمدخل ، ثم تقوم بإرجاع مكون جديد. في وظيفة التجسيد ، نستخدم المكون الأصلي ، ولكن مع تغيير واحد - نضيف حدثًا للنقر على عقدة DOM ، ويتم النقر على إخراج الكتابة في وحدة التحكم.
إذا كنت لا تفهم ما يحدث هنا ، ما هو h والسياق ، فاقرأ أولاً وثائق المصور حول كيفية عمل وظائف التجسيد.
في المثال الحالي ، استخدمت المكون الوظيفي ، لأن أنا لست بحاجة إلى شرط. لا أحد يمنعك من إرجاع مكون منتظم بدلاً من مكون وظيفي ، لكن لا تنسَ أن المكونات الوظيفية أسرع بكثير من المكونات العادية.
الخطوة 2. استخدام HOC
الآن ، باستخدام الوظيفة الناتجة ، نقوم ببساطة بإنشاء مكون جديد.
الشيء الوحيد المتبقي هو توصيل المكون المستلم حيث نحتاج إلى تسجيل النقر.
المثال الأخير:
تركيب
كل هذا رائع بالتأكيد ، لكن ماذا لو كنت بحاجة إلى زر لا يقوم بتسجيل الدخول فحسب ، بل يؤدي أيضًا بعض الإجراءات الأخرى؟
كل شيء بسيط. نحن نحول واحدة إلى أخرى. يمكننا خلط العديد من HOCs كما نحب.
أيضا للتكوين هناك الكثير من الوظائف الجاهزة والمكتبات التي تسهل التكوين.
HOC هو نمط بسيط ولكنه قوي للغاية. يتم استخدامه في قاعدة العديد من المكتبات. إنها ليست رصاصة فضية أو بديلاً كاملاً للخلطات وآلية وراثة المكون. استخدمها بحكمة مع الأنماط الأخرى وستصبح تطبيقات Vue مرنة حقًا.
عبر مشاركة