انتقل إلى محتوى الدرس

Step Three Minimal UI State الخطوة 3 تحديد أصغر حالة

طبّق المنهجية الهندسية الرسمية المكونة من 5 خطوات في React لتحويل أي تصميم واجهة إلى شجرة مكونات منظمة بأقل حالة ممكنة وتصفية مشتقة وتدفق أحداث عكسي.
3 صفوف تعليمية
ReactJS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

الخطوة 3 — تحديد التمثيل الأدنى والأكمل لحالة الواجهة: احصر كل البيانات الموجودة في الشاشة واختبر كلاً منها بثلاثة أسئلة حاسمة: (1) هل تبقى ثابتة بمرور الوقت؟ (2) هل تأتي من الأب عبر الخصائص؟ (3) هل يمكن حسابها من حالة أو خصائص أخرى؟

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

الصف 2 صورة توضيحية
مخطط شجرة التفكير في React: المكون الأب يملك حالة البحث والتصفية ويمرر الدوال لشريط البحث والصفوف المصفاة لجدول العرض
الصف 3 ملاحظة هامة