نهج جديد لرد فعل تصميم المكونات

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

لكن دان أبراموف نفسه خاطب المجتمع لاحقًا لتمسكه بأنماط التصميم التي حددها.

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

الهروب من الانقسام

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

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

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

إدخال ثلاثي الأبعاد

ثلاثي؟ هل هذه كلمة حتى؟ لا أعلم ، لكنك فهمت الفكرة. لقد فكرت في أن مكونات React تقع في واحدة من ثلاث حاويات.

مكونات عالمية

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

هذه المكونات:

  • يجب أن تكون قابلة لإعادة الاستخدام
  • يجب أن تكون قابلة للتخصيص بدرجة عالية
  • يجب ألا تكون على دراية بالكود الخاص بالتطبيق بما في ذلك النماذج والمتاجر والخدمات وما إلى ذلك.
  • يجب تقليل التبعيات على مكتبات الطرف الثالث
  • نادرا ما تستخدم مباشرة في التطبيق الخاص بك
  • يجب أن تستخدم كعناصر بناء للمكونات العالمية
  • قد تنتهي بلاحقة "Base" (مثل ButtonBase و ImageBase)

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

المكونات العالمية

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

هذه المكونات:

  • يجب أن تكون قابلة لإعادة الاستخدام
  • يجب أن تكون قابلة للتخصيص إلى الحد الأدنى
  • قد يستخدم رمز خاص بالتطبيق
  • يجب تنفيذ المكونات العالمية ، مع تقييد قابليتها للتخصيص
  • يجب استخدامها كعناصر أساسية لمكونات العرض
  • غالبًا ما يتم ربط واحد لواحد مع مثيلات النموذج (مثل DogListItem و CatCard)

هذه المكونات قابلة لإعادة الاستخدام داخل التطبيق الخاص بك ولكن لا يمكن نقلها بسهولة إلى تطبيقات أخرى لأنها تعتمد على منطق التطبيق. هذه هي اللبنات الأساسية لمكونات العرض والمكونات العالمية الأخرى.

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

عرض المكونات

هذه هي المكونات التي يتم استخدامها مرة واحدة فقط في التطبيق الخاص بك .

هذه المكونات:

  • يجب أن لا يشعر بالقلق إزاء إعادة استخدام
  • من المرجح أن تدير الدولة
  • احصل على الحد الأدنى من الدعائم
  • يجب ربط المكونات العالمية معًا (وربما المكونات العالمية)
  • في كثير من الأحيان حل مسارات التطبيق
  • غالبًا ما تحتفظ بقطعة أرض مخصصة من عقارات viewport
  • غالبًا ما يكون لديك عدد كبير من التبعيات
  • يجب أن تكون اللبنات الأساسية لتطبيقك

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

الوعد الزر

دعنا نلقي نظرة على عمليات التنفيذ العالمية والعالمية لزر الوعد ونرى كيف يقارنون. يعمل زر الوعد كزر عادي إلا إذا أعاد معالج onClick وعدًا. في حالة إرجاع الوعد ، يمكن للزر عرض المحتوى بشكل مشروط بناءً على حالة الوعد.

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

بنية الدليل

يوضح ما يلي كيف يمكننا تنظيم المكونات باتباع هذا النمط.

App/ App.js Views/ DogListView/ Global/ Models/ Dog/ DogListItem/ Image/ PromiseButton/ Universal/ ImageBase/ PromiseButtonBase/

تبعيات المكون

يوضح أدناه كيف تعتمد المكونات المذكورة أعلاه على بعضها البعض.

/* App.js */ import { DogListView } from './Views' /* DogListView.js */ import { DogListItem } from 'App/Global/Models/Dog' /* DogListItem.js */ import Image from '../../Image', import PromiseButton from '../../PromiseButton' /* Image.js */ import { ImageBase } from 'Universal' /* PromiseButton.js */ import { PromiseButtonBase } from 'Universal'

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

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

إذا وجدت هذه الأفكار مفيدة وترغب في رؤية المزيد من أفكاري ، فلا تتردد في التحقق من هذا الريبو الذي أستخدمه للحفاظ على أفكاري وأفضل الممارسات لكتابة تطبيقات React / Redux.