شرح صفوف ومحتوى الفقرة
بعد إتقانك لأنماط الحالة الأساسية في React، اتبع سلم قرارات إدارة الحالة بتدرج هندسي منضبط بدلاً من القفز فوراً إلى المخفض والسياق في المكونات البسيطة: ابدأ دائماً بـ useState المحلي داخل المكون الواحد، ثم ارفع الحالة لأقرب أب مشترك عند تنسيق مكونين متجاورين، وانتقل إلى useReducer عند تشعب أوامر التحديث، وادمج useReducer مع سياقي القراءة والإرسال عندما تشترك شجرة عميقة في قراءة وتعديل تلك الحالة. يلخص الجدول التالي معايير الاختيار:
| مرحلة التدرج | نمط إدارة الحالة في React | متى نختاره هندسياً |
|---|---|---|
| المرحلة 1 — مكون منفرد | حالة محلية بـ useState | زر تبديل مستقل أو نص حقل مؤقت داخل مكون واحد |
| المرحلة 2 — تنسيق شقيقين | رفع الحالة للأب وتمرير Props | مكونان متجاوران يتشاركان قيمة واحدة عبر أبيهما المباشر |
| المرحلة 3 — انتقالات متشعبة | مخفض محلي بـ useReducer | مكون واحد يدير عدة أوامر مترابطة لتحديث بياناته |
| المرحلة 4 — نطاق عميق مشترك | دمج useReducer مع سياقين | شجرة مكونات عميقة تقرأ البيانات وترسل أوامر التعديل مباشرة |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس كيف يقضي دمج useReducer مع السياق على تشتت دوال التعديل والتمرير المتسلسل للخصائص، وفصلت سياق القراءة TasksContext عن سياق الإرسال TasksDispatchContext داخل مكون مزود متكامل، وأتقنت سلم التدرج الهندسي لإدارة الحالة. الخطوة التالية: انتقل الآن إلى الدرس رقم 32 «حفظ القيم المتغيرة دون إعادة تصيير عبر useRef» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.