useRef خطّاف الـ ref
آخر تحديث: 2026-11-03
useRef خطّاف الـ ref
يعيد useRef حاوية بخاصية current: يبقي أي قيمة حيّة عبر العروض، والكتابة فيها لا تُطلق إعادة عرض أبداً. وأكثر استخداماته شيوعاً هو الحصول على عقدة DOM للتركيز أو القياس أو التمرير؛ والثاني تخزين بيانات قابلة للتغيّر مثل معرّف مؤقّت لا يظهر في ناتج العرض. ولأن الحاوية لا تسبّب عرضاً أبداً، فهي المكان المناسب للقيم التي تهمّ العملية ولا تهمّ الشاشة.
| المجموعة | الآثار الجانبية والأداء |
|---|---|
| النوع | خطاف |
| منذ الإصدار | React 16.8 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
const ref = useRef(initialValue)
ref.current // قراءة
ref.current = ... // كتابة: مسموحة، لكنها لا تُطلق عرضاً
<input ref={ref} /> // بعد تركيبه، يصبح ref.current هو العقدة نفسها⚙️ المعاملات
| initialValue | القيمة الابتدائية لـ current؛ ولا يسري إلا عند أول عرض، وتغيير الوسيط لاحقاً لا يعيد إسنادها. |
|---|
القيمة المرجعة：يعيد كائناً ثابتاً { current: initialValue }: هو المرجع نفسه نفسه طوال عمر المكوّن.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
الضغط على «Focus» ينقل مؤشر الكتابة إلى الحقل؛ والضغط على «Clear and focus» يفرغ الحقل ويعيد المؤشر — وهو عمل على DOM لا تستطيع الحالة ببساطة إنجازه.💡 النقاط الأساسية
💡 نصيحة استخدم الحالة لما يمكن إنجازه بالأسلوب التصريحي (عرض المحتوى)، واستخدم ref فقط لما يجب أن يكون إلزامياً (التركيز والتمرير والقياس).
ℹ️ ملاحظة تغيير ref.current لا يُعيد العرض — فالـ ref مخرج طارئ، فلا تحتفظ فيه ببيانات تعتمد عليها الواجهة.
⚠️ تحذير قراءة ref أو الكتابة فيه أثناء العرض تكسر عقد الدالة النقية (عدا التهيئة الكسولة)؛ افعل عمل الـ ref في معالجات الأحداث أو الآثار.
🏷️ المزيد من الآثار والأداء
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق بين ref والحالة؟
ج تغيير الحالة يُطلق إعادة عرض، أما تغيير ref فلا؛ فالحالة بيانات للعرض، و ref بيانات للعملية.
س متى تسري القيمة الابتدائية لـ ref.current؟
ج حين يُنشأ الـ ref عند أول عرض؛ أما عروض العرض اللاحقة فلا تعيد ضبط current أبداً حتى لو تغيّر الوسيط.
س هل أستطيع الوصول إلى DOM داخل مكوّن ابن؟
ج ليس افتراضياً (فـ ref ليس prop عادية). مرّره عبر forwardRef، أو دع الابن يكشف واجهة عبر useImperativeHandle.
