مقدمة

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

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

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

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

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

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

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

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

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

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

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

يمكننا البدء بإنشاء السياق المسؤول عن إدارة حالة فتح وإغلاق النموذج

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

لاحظ أننا نستخدم الأطفال، للحصول على المكونات التي سيتم إدراجها في المودال، سنرغب في استخدامها على النحو التالي:

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

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

أخيرًا، يمكننا تعيين كليهما للمكون المشروط الخاص بنا وهذا كل شيء (:

استخدام

نتيجة

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

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

أمثلة أخرى

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

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

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

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

خاتمة

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

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

ملاحظة: لقد قمت بنشر هذا المحتوى نفسه على رد الفعل 4 نوبس، وهو مستودع مصمم لتجميع المقالات التي أنشأها المطورون في عالم التفاعل. إنه يستحق التدقيق =).