useRef as Container الـ ref كحاوية
آخر تحديث: 2026-11-03
useRef as Container الـ ref كحاوية
الـ ref ليس للـ DOM فقط: إنه صندوق ملاحظات يبقى حيّاً عبر العروض ويناسب بيانات مثل معرّفات المؤقّتات أو القيمة السابقة أو علم التركيب الذي يتغيّر دون أن تريد إعادة عرض. وهو أخفّ من الحالة وأأمن من متغيّر على مستوى الوحدة، لأن كل نسخة من المكوّن معزولة. والـ ref هو البيت المناسب للبيانات التي تصف العملية لا الواجهة: يجب أن تبقى أطول من عرض واحد، لكن لا شيء على الشاشة يعتمد عليها.
| المجموعة | الآثار الجانبية والأداء |
|---|---|
| النوع | نمط |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
const timerRef = useRef(null)
timerRef.current = setInterval(...) // المتجر
clearInterval(timerRef.current) // قراءة
// صيغة التهيئة الكسولة:
if (ref.current === null) ref.current = expensiveInit()القيمة المرجعة：لا قيمة معادة؛ فهذه المدخلات تصف نمط برمجة لا دالة.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
كل ضغطة على +1 ترفع رقم «Current» بينما يظلّ «previous» يعرض القيمة قبل التغيير — فالـ ref يحتفظ بلقطة تاريخية دون أن يُسبّب عروضاً إضافية.💡 النقاط الأساسية
💡 نصيحة قرّر بين الحالة والـ ref كالتالي: إن كانت الواجهة يجب أن تتبع القيمة فاستخدم الحالة؛ وإن كانت بيانات عملية فقط (معرّف مؤقّت، لقطة) فاستخدم ref.
ℹ️ ملاحظة الـ ref أأمن من متغيّر على مستوى الوحدة: فكل نسخة من المكوّن نفسه تحتفظ بنسختها الخاصة ولا تلوّث غيرها.
⚠️ تحذير في العرض المتزامن قد تقرأ عملية عرض أخرى قيمة ref.current، فلا تعامل الـ ref كمصدر بيانات أساسي للعرض.
🏷️ المزيد من الآثار والأداء
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س كيف أختار بين تخزين قيمة في ref وفي الحالة؟
ج المحتوى الذي يؤثّر في العرض مكانه في الحالة؛ والبيانات الوسيطة المستعملة في معالجات الأحداث والآثار فقط (المعرّفات والأعلام واللقطات) مكانها في ref.
س لماذا لا يُطلق تغيير ref.current عرضاً؟
ج يتتبّع React تغييرات الحالة و props فقط؛ أما الـ ref فهو كائن عادي قابل للتغيّر، فالكتابة فيه JavaScript مجرّد ولا تدخل مجدول العرض أبداً.
س هل أستطيع الكتابة في ref أثناء العرض؟
ج لا، إلا في التهيئة الكسولة (if (ref.current === null))؛ افعل الكتابة في معالج حدث أو في useEffect.
