شرح صفوف ومحتوى الفقرة
بدمج الخطوات الخمس يكتمل أمامنا تطبيق كتالوج الدورات القابل للبحث والتصفية بمعايير إنتاجية نظيفة: مكونات واضحة المسؤولية، وتسميات مربوطة بـ useId()، وصفر حالة مكررة، وتصفية فورية غير حساسة لحالة الأحرف مع رسالة لطيفة عند انعدام النتائج. جرّب التطبيق الكامل أدناه وراجع ملخص المنهجية في الجدول:
| خطوة المنهجية | السؤال الهندسي الذي تحسمه | المخرج البرمجي الفعلي |
|---|---|---|
| 1 و2. التقسيم والنسخة الساكنة | ما حدود المكونات وكيف تنزل الخصائص؟ | شجرة مكونات عرض ساكنة ونظيفة |
| 3. تحديد أصغر حالة | أي القيم متغيرة فعلاً وأيها مشتق حسابياً؟ | قائمة مختصرة بالحالة الحقيقية فقط |
| 4. تحديد مالك الحالة | من الأب المشترك المغذي لكل القراء؟ | استدعاء useState في الأب الجامع |
| 5. التدفق العكسي للأحداث | كيف تحدّث حقول الأبناء حالة الأب؟ | تمرير دوال التحديث عبر الخصائص |
function FilterableCatalog({ courses }) {
const [query, setQuery] = useState('');
const [freeOnly, setFreeOnly] = useState(false);
const visible = courses.filter((c) => ...);
return (
<div>
<SearchBar query={query} freeOnly={freeOnly}
onQuery={setQuery} onFree={setFreeOnly} />
<CourseTable courses={visible} />
</div>
);
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس المنهجية الهندسية المتكاملة للتفكير بطريقة React عبر خطواتها الخمس: تقسيم شجرة المكونات، وبناء النسخة الساكنة، وعزل أصغر حالة حقيقية، وتسكينها في الأب المشترك، وربط التدفق العكسي للأحداث، مختتماً بذلك الوحدة الخامسة بنجاح. الخطوة التالية: انتقل الآن إلى الدرس رقم 28 «إدارة الحالات المركبة عبر خطاف useReducer» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.