مقدمة

واحدة من المفاهيم الأكثر فائدة والاستخدام على نطاق واسع في عالم رد الفعل هي أنماط التصميم ، لأنها تساعد في الحفاظ على الكود قابل للتطوير وإعطاء معنى إضافي للمكونات التي ننشئها.

هناك العديد من الأنماط ، وفي هذه المقالة ، سنناقش مكونات مركبة ، وهو نمط متقدم مفيد بشكل خاص لإنشاء واجهات مرنة وقابلة للتأليف.

ما هي المكونات المركبة؟

مكونات المركبة هي نمط متقدم في رد الفعل. هدفها هو إنشاء تصميم أكثر مرونة من خلال تمكين مشاركة الدولة والمنطق بين مجموعة من المكونات. وبهذه الطريقة ، يمكن تحقيق التواصل بين المكون الأصل ومكونات الطفل بطريقة مرنة.

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

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

يمكن رؤية مثال على المكونات المركبة في بنية HTML من العلامات والخيار:

يعمل عنصر SELECT كمدير حالة الواجهة ، بينما تقوم عناصر الخيار بتكوين كيفية عمل المكون المحدد.

مثال باستخدام المكونات المركبة

في هذا المثال ، سنقوم بإنشاء وسيط ، ينقسم إلى مكونين مركبين: التبديل والمحتوى. سوف يشاركون الحالة المفتوحة/الإغلاق للوسائط.

دعنا نسير عبر كيفية إنشاء هذا المكون خطوة بخطوة:

يمكننا أن نبدأ بإنشاء السياق الذي سيدير ​​الحالة المفتوحة/الإغلاق للوسائط:

إنشاء قاعدة المكون المشروط:

لاحظ أننا نستخدم الأطفال للاستيلاء على المكونات التي سيتم وضعها داخل الوسائط. نريد استخدامه مثل هذا:

الآن نحتاج إلى إنشاء مكون التبديل ، والذي سيكون مسؤولاً عن فتح الوسائط:

نحتاج أيضًا إلى مكون محتوى سيكون مسؤولاً عن عرض محتوى الوسائط:

أخيرًا ، يمكننا إضافة كلا المكونين إلى مكوننا المشروط ، وهو جاهز للذهاب! ؟

الاستخدام:

نتيجة:

وبهذه الطريقة ، نجعل إنشاء واستخدام الوسائط مرنة للغاية وقابلة لإعادة الاستخدام. Modal.Toggle مسؤول عن تشغيل العرض المشروط ، بينما يجب أن يعرض Modal.Content المحتوى المشروط.

يتيح هذا الهيكل للمطورين تخصيص سلوك ومحتوى الوسائط بسهولة وفقًا للاحتياجات المحددة لتطبيقاتهم ، مما يجعل الكود منظفًا وأكثر تنظيماً.

أمثلة أخرى

يمكننا أيضًا استخدام مكونات مركبة في سياقات أخرى ، مثل:

مكونات الأكورديون:

مكونات القائمة:

كل هذه الأمثلة مرنة وقابلة للتكيف ، مما يجعل التطوير وقابلية التوسع واستخدام المكون أسهل.

يمارس

لاحظنا أنه تم وضع الزر الإغلاق داخل مكون المحتوى ، ولكن سيكون من المثير للاهتمام أن يكون لديك مكون مخصص لإدارة إغلاق الوسيط. يمكنك إنشاء شيء مثل إغلاق . حاول تجربة وإضافة هذا المكون أيضًا!

خاتمة

رأينا كيف يمكن أن تكون كتابة مكونات باستخدام نمط مكونات المركبة مفيدة في تطبيقاتنا. لقد اكتشفنا أيضًا كيفية تنفيذها ومراجعة أمثلة على المكان الذي يمكن أن يتناسب فيه هذا النمط.

لا تتردد في استكشاف وتجربة إنشاء مكونات باستخدام مكونات مركبة. استخدمه بحكمة وقم بتقييم ما إذا كان من المنطقي تطبيقه في سياقك ، كما لو لم يتم تنفيذه جيدًا ، فقد ينتهي الأمر بمثابة عائق أكثر من المساعدة.

]

ملاحظة: لقد نشرت هذا المحتوى نفسه على React4Noobs ، وهو مستودع BR يجمع بين المقالات التي أنشأها المطورين في عالم React. الأمر يستحق التحقق!