شرح صفوف ومحتوى الفقرة
وأخيراً، تجنب نسخ الخصائص القادمة من الأب داخل متغير حالة إلا إذا كنت تقصد عمداً تجاهل كل تحديث مستقبلي! فكتابة const [bg, setBg] = useState(color) تقرأ القيمة الابتدائية عند أول تصيير فقط، وإذا غيّر الأب خاصية color لاحقاً فستظل الحالة عالقة على اللون القديم.
استخدم الخاصية مباشرة في العرض، وإذا أردت قيمة ابتدائية لمرة واحدة فسمِّ الخاصية بوضوح initialColor. يجمع الجدول التالي القواعد الهندسية لتصميم الحالة:
| الخطأ المعماري في الحالة | المشكلة الناتجة في الواجهة | التصميم القياسي النظيف في React |
|---|---|---|
| رايات منطقية متعددة متضاربة | ظهور حالتين متناقضتين في اللحظة نفسها | متغير status نصي واحد واضح المراحل |
| تخزين المجاميع والفلاتر بالحالة | اختلاف الأرقام عند إضافة أو حذف عنصر | حساب القيم المشتقة مباشرة أثناء التصيير |
| نسخ الكائن المختار بالكامل | تقادم لوحة التفاصيل بعد تعديل العنصر | تخزين المعرّف selectedId والبحث بـ find |
| نسخ الخصائص داخل useState | تجاهل المكون الابن لتحديثات الأب اللاحقة | قراءة الخاصية القادمة من الأب مباشرة |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس القواعد المعمارية لتصميم الحالة في React: تجميع البيانات المتلازمة، واستبدال الرايات المتناقضة بمتغير مرحلة واحد، وحساب القيم المشتقة أثناء التصيير، وتخزين المعرّفات بدلاً من نسخ الكائنات، وتسطيح الشجرات العميقة وعدم نسخ الخصائص. الخطوة التالية: انتقل الآن إلى الدرس رقم 26 «رفع الحالة للأعلى وهوية بقاء أو تصفير الحالة» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.