شرح صفوف ومحتوى الفقرة
تعامل مع مراجع العناصر كجسر مخصص حصرياً للإجراءات غير التدميرية؛ ولا تحذف أو تضف عقداً يديرها JSX يدوياً عبر دوال المتصفح الخام حتى لا تصطدم مع مطابقة React في التصيير التالي. يلخص الجدول الآتي حدود الأمان بوضوح:
| العملية على العنصر | درجة الأمان مع React | الأسلوب الهندسي المعتمد |
|---|---|---|
| نقل التركيز وتحديد النص | آمن تماماً وغير تدميري | استدعاء focus أو select عبر المرجع داخل الحدث |
| التمرير وقياس الأبعاد | آمن تماماً لقراءة التخطيط | استخدام scrollIntoView وgetBoundingClientRect |
| تشغيل وإيقاف الوسائط | آمن عبر واجهة المشغل | استدعاء play وpause ومزامنة الحالة مع أحداث المشغل |
| حذف أو حقن عناصر DOM | خطر — يسبب انهيار المطابقة | الاعتماد على الحالة والعرض الشرطي التصريحي في JSX |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ربطت في هذا الدرس مراجع useRef بعناصر JSX الحقيقية، وتحكمت بتركيز لوحة المفاتيح والتمرير السلس وقياس الأبعاد بالبكسل، ومررت المراجع لمكونات الإدخال عبر forwardRef مع الالتزام بحدود الأمان غير التدميرية لشجرة React. الخطوة التالية: انتقل الآن إلى الدرس رقم 34 «مزامنة المكون مع الأنظمة الخارجية عبر useEffect» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.