المكونات غير الرأسية: منطق بدون واجهة مستخدم
تعرف على كيفية عزل المكونات غير الرأسية للحالة والتفاعلات وسلوك إمكانية الوصول مع ترك جميع قرارات العرض والتصميم للمستخدم.
مع توسع تطبيقات React ، يصبح تعديل المكونات أكثر صعوبة نظرًا للترابط الوثيق بين منطقها وعرضها. فعلى سبيل المثال، قد لا تعمل قائمة منسدلة بشكل جيد في تصميم معين في تصميم آخر، وذلك بسبب الترابط الوثيق بين JSX و Markup و CSS الخاصة بها وبين معالجة الأحداث وانتقالات الحالة. غالبًا ما تتطلب فرق العمل تطبيق نفس السلوكيات، مثل التبديل والاختيار وإدارة التركيز والتنقل باستخدام لوحة المفاتيح، عبر أنماط عرض مختلفة. ولتحقيق ذلك، ينبغي فصل منطق المكون عن عرضه، مما يسمح بإعادة استخدام نفس السلوك عبر متغيرات واجهة المستخدم المتعددة.
فصل المنطق عن واجهة المستخدم
المكون غير الرأسي هو تجريد منطقي فقط، يُنفذ كخطاف أو مكون خاصية العرض، ويتولى إدارة انتقالات الحالة، وتنسيق الأحداث، وتفاعلات لوحة المفاتيح والماوس، وخصائص إمكانية الوصول دون عرض أي ترميز. وبدلاً من إرجاع JSX، فإنه يكشف عن سلوكه الداخلي من خلال API منظمة: قيم الحالة، ومعالجات الإجراءات، ومجموعة من دوال جلب الخصائص، مثلgetTriggerProps ،getPanelProps ، أوgetItemProps تدمج هذه الدوال المُسترجعة معالجات الأحداث والأدوار وسمات ARIA الضرورية في عناصر DOM الخاصة بالمستخدم، مما يضمن سلوكًا متسقًا وإمكانية وصول سهلة بغض النظر عن التنفيذ المرئي. يسمح هذا الانعكاس في التحكم لنواة منطقية واحدة بتشغيل أشكال واجهة مستخدم متعددة، زر، وعنصر مخصص.<div> ، بطاقة مصممة، أو لوحة متحركة، دون تكرار المنطق أو المساس بإمكانية التركيب.
يوضح هذا الرسم التخطيطي كيف يُغلف المكون غير المُدمج جميع منطق الأعمال، وانتقالات الحالة، وخصائص إمكانية الوصول، مع توفير دوال جلب مُهيكلة للمستخدم. ببساطة، تقوم واجهة المستخدم بنشر هذه الخصائص المُحسّنة على ترميزها الخاص، مما يُتيح حرية كاملة في التصميم والتخطيط دون الحاجة إلى إعادة تنفيذ المنطق الأساسي.
مثال: مفتاح تبديل بدون واجهة رسومية
لنرى كيف يعمل فصل المنطق والعرض عمليًا، دعونا ننفذ مكون تبديل بدون واجهة مستخدم يعرض معالجات الحالة والإجراءات مع ترك واجهة المستخدم ...