شرح صفوف ومحتوى الفقرة
قبل الانتقال إلى مصفوفات الحالة في الدرس القادم، راجع المقارنة الشاملة بين أنماط التعديل المباشر المحظورة والبدائل النقية المعتمدة لتحديث الكائنات في React:
| العملية المطلوبة | التعديل المباشر المحظور | التحديث النقي المعتمد في React |
|---|---|---|
| تعديل خاصية سطحية | user.city = "Giza"; setUser(user) | setUser({ ...user, city: "Giza" }) |
| تحديث حقل بمفتاح ديناميكي | form[name] = val; setForm(form) | setForm({ ...form, [name]: val }) |
| تعديل خاصية داخل كائن فرعي | u.prefs.dark = true; setU({ ...u }) | setU({ ...u, prefs: { ...u.prefs, dark: true } }) |
| حذف خاصية من كائن الحالة | delete cfg.temp; setCfg(cfg) | const { temp, ...rest } = cfg; setCfg(rest) |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس سبب اعتماد React على مقارنة مراجع الكائنات بـ Object.is، واستبدلت التعديل المباشر بالنسخ السطحي عبر معامل الانتشار والمفاتيح المحسوبة وتحديث الكائنات المتداخلة بنقاء تام. الخطوة التالية: انتقل الآن إلى الدرس رقم 21 «تحديث المصفوفات في الحالة بطرق غير مغيرة» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.