شرح صفوف ومحتوى الفقرة
قبل الاختيار بين الخطافين اطرح سؤالاً هندسياً واحداً: هل يتطلب تغير هذه القيمة تحديث ما يراه المستخدم على الشاشة؟ إن كانت الإجابة نعم فاستخدم useState، وإن كانت معلومة تشغيلية داخلية فاستخدم useRef. يوضح الجدول التالي الفروق الدقيقة:
| وجه المقارنة | خطاف الحالة useState | خطاف المرجع useRef |
|---|---|---|
| بنية القيمة المعادة | مصفوفة ثنائية تضم القيمة ودالة التحديث | كائن ثابت يضم خاصية current القابلة للتعديل |
| تحفيز إعادة التصيير | نعم، يجدول إعادة رسم المكون عند تغير القيمة | لا، تعديل current يتم بصمت تام دون رسم |
| قابلية التعديل المباشر | غير قابلة للتعديل المباشر بل عبر دالة الضبط | قابلة للتعديل الفوري المباشر داخل دوال الأحداث |
| القراءة أثناء العرض | آمنة وأساسية لتكوين عناصر واجهة JSX | ممنوعة أثناء العرض وتُقرأ في معالجات الأحداث |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس حفظ القيم الداخلية المتغيرة بخطاف useRef، وفهمت بنية الكائن المستمر ذي خاصية current، وبنيت ساعة إيقاف دقيقة تحفظ معرف المؤقت بأمان، والتزمت بقاعدة نقاء العرض ومقارنة المرجع مع useState. الخطوة التالية: انتقل الآن إلى الدرس رقم 33 «التعامل المباشر الآمن مع عناصر DOM عبر المراجع» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.