في هذا الدرس 6تصفّح المواضيع
تتولى React تحديث عناصر الصفحة تصريحياً بناءً على مخرجات JSX فلا نحتاج إلى استعلامات document.querySelector() اليدوية. غير أن بعض مهام المتصفح الأصيلة — كنقل مؤشر الكتابة برمجياً، أو التمرير السلس لعنصر محدد، أو قياس أبعاده بالبكسل، أو تشغيل مقاطع الوسائط — لا تملك خاصية تصريحية تغني عن استدعاء دالة على العنصر ذاته.
للوصول الآمن إلى عنصر حقيقي، ننشئ مرجعاً مبدئياً بكتابة const myRef = useRef(null) ثم نمرره للوسم عبر سمة ref={myRef}؛ وبمجرد اعتماد الرسم في المتصفح تضع React عقدة العنصر الفعلية داخل myRef.current وتعيدها إلى null عند إزالته.
يرتقي توجيه تركيز لوحة المفاتيح برمجياً بتجربة المستخدم وإتاحة الوصول عند مسح مربع بحث أو تفعيل سطر تحرير سريع أو الانتقال لأول حقل غير صالح في النموذج. باستدعاء inputRef.current?.focus() داخل معالج الحدث ينتقل المؤشر فوراً إلى الحقل المقصود بدقة حتى لو تعددت حقول البحث في الصفحة نفسها.
const inputRef = useRef(null);
const [query, setQuery] = useState('');
function handleClearAndFocus() {
setQuery('');
inputRef.current?.focus();
}تتيح مراجع DOM استدعاء دوال التخطيط والتمرير القياسية على أي حاوية؛ فدالة scrollIntoView({ behavior: "smooth" }) تمرر العنصر بسلاسة إلى مجال الرؤية، ودالة getBoundingClientRect() تقيس العرض والارتفاع الفعليين بالبكسل بعد تطبيق قواعد CSS.
وعند التعامل مع قائمة ديناميكية متغيرة الطول — حيث لا يجوز استدعاء useRef داخل حلقة map() — نمرر دالة مرجعية ردّية (Ref Callback) تخزن العقد النشطة في كائن Map واحد داخل مرجع الأب.
const cardRef = useRef(null);
const [metrics, setMetrics] = useState('Not measured');
function handleMeasure() {
const rect = cardRef.current.getBoundingClientRect();
const w = Math.round(rect.width);
const h = Math.round(rect.height);
setMetrics(w + 'x' + h + ' px');
}تعتمد عناصر الوسائط القياسية مثل <video> و<audio> على دوال تشغيل أمرية هي play() وpause() بدلاً من سمة منطقية جاهزة. عند ربط videoRef بعنصر الفيديو يستطيع زر التحكم استدعاء التشغيل والإيقاف مباشرة، مع تحديث حالة الزر عبر حدثي onPlay وonPause حتى لو أوقف المستخدم المقطع من اختصارات المتصفح.
تُخفي المكونات المخصصة في React بنيتها الداخلية افتراضياً ولا تكشف عقد DOM الخاصة بها للمكون الأب صوناً لاستقلالية كل مكون. وعندما نصمم مكون حقل مشترك مثل <FormInput /> ونرغب عمداً في السماح للأب بتوجيه التركيز إلى عنصر <input> بداخله، نفعّل تمرير المرجع صراحةً.
في مشاريع React 18 نغلّف المكون الفرعي بدالة forwardRef((props, ref) => ...) لتمرير المرجع إلى الحقل الداخلي، بينما أتاح React 19 أيضاً استقبال ref كخاصية مباشرة مع استمرار توافق forwardRef.
const CustomInput = forwardRef((props, ref) => (
<input ref={ref} placeholder={props.placeholder} />
));
function ParentForm() {
const fieldRef = useRef(null);
return (
<CustomInput ref={fieldRef} placeholder="Email" />
);
}تعامل مع مراجع العناصر كجسر مخصص حصرياً للإجراءات غير التدميرية؛ ولا تحذف أو تضف عقداً يديرها JSX يدوياً عبر دوال المتصفح الخام حتى لا تصطدم مع مطابقة React في التصيير التالي. يلخص الجدول الآتي حدود الأمان بوضوح:
| العملية على العنصر | درجة الأمان مع React | الأسلوب الهندسي المعتمد |
|---|---|---|
| نقل التركيز وتحديد النص | آمن تماماً وغير تدميري | استدعاء focus أو select عبر المرجع داخل الحدث |
| التمرير وقياس الأبعاد | آمن تماماً لقراءة التخطيط | استخدام scrollIntoView وgetBoundingClientRect |
| تشغيل وإيقاف الوسائط | آمن عبر واجهة المشغل | استدعاء play وpause ومزامنة الحالة مع أحداث المشغل |
| حذف أو حقن عناصر DOM | خطر — يسبب انهيار المطابقة | الاعتماد على الحالة والعرض الشرطي التصريحي في JSX |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ربطت في هذا الدرس مراجع useRef بعناصر JSX الحقيقية، وتحكمت بتركيز لوحة المفاتيح والتمرير السلس وقياس الأبعاد بالبكسل، ومررت المراجع لمكونات الإدخال عبر forwardRef مع الالتزام بحدود الأمان غير التدميرية لشجرة React. الخطوة التالية: انتقل الآن إلى الدرس رقم 34 «مزامنة المكون مع الأنظمة الخارجية عبر useEffect» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 DOM Ref مرجع عنصر DOM
- كائن useRef يُربط بسمة ref في JSX فتشير خاصيته current إلى عقدة HTML الحقيقية بعد رسمها.
- للمراجعة
- 02 Ref Forwarding تمرير المرجع للأبناء
- السماح الصريح للمكون الأب بربط مرجع بعنصر DOM محدد داخل مكون فرعي مخصص.
- للمراجعة
- 03 Ref Callback دالة المرجع الردّية
- دالة تُمرر لسمة ref تستدعيها React بعقدة العنصر عند التركيب وبالقيمة null عند الإزالة.
- للمراجعة
- 04 Non-Destructive Action إجراء غير تدميري
- استدعاء دوال المتصفح كالتركيز والتمرير والقياس دون حذف أو تغيير هيكلة العقد التي تديرها React.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 DOM DOM
- Document Object Model
- شجرة كائنات المستند الحية في المتصفح والتي تنشئها React وتحدثها عند اعتماد العرض.
- للمراجعة
- 02 HTML HTML
- HyperText Markup Language
- وسوم العناصر القياسية بالحروف الصغيرة مثل input وvideo التي تقبل ربط مراجع DOM مباشرة.
- للمراجعة
- 03 CSS CSS
- Cascading Style Sheets
- قواعد التنسيق البصري التي يحسبها المتصفح قبل قراءة الأبعاد الفعلية للعنصر بالبكسل.
- للمراجعة
- 04 WCAG WCAG
- Web Content Accessibility Guidelines
- إرشادات إتاحة محتوى الويب التي تؤكد أهمية توجيه تركيز لوحة المفاتيح بوضوح للمستخدمين.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال شريط البحث السريع وجرّب زر المسح مع إعادة التركيز الفوري لمتابعة الكتابة دون استخدام الفأرة.
-
وسّع مثال RegistrationBar بإضافة حقل CustomInput ثانٍ لاسم المستخدم مع زر ينقل التركيز تلقائياً للحقل الفارغ.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
ما القيمة الابتدائية القياسية التي نمررها لخطاف useRef عند تحضيره للارتباط بعنصر DOM؟
نمرر القيمة null لأن عقدة العنصر لا تكون موجودة في المتصفح قبل إتمام مرحلة الاعتماد الأولى.
في أي مرحلة تضع React عقدة العنصر الحقيقية داخل خاصية inputRef.current؟
تعيّن React عقدة DOM داخل المرجع أثناء مرحلة الاعتماد Commit فور إنشاء العناصر في المتصفح.
يُعد استدعاء domRef.current.remove() لحذف عنصر رسمته React بديلاً آمناً للعرض الشرطي.
خطأ؛ فالحذف اليدوي لعقد تديرها React يفسد مطابقة الشجرة ويسبب أخطاء وقت التشغيل.
لماذا يُنصح باستخدام التسلسل الاختياري inputRef.current?.focus() عند التعامل مع مراجع العناصر؟
لتجنب رمي خطأ TypeError إذا كان العنصر مخفياً شرطياً أو لم يركّب في الشاشة لحظة الاستدعاء.
في معيار React 18، كيف نسمح لمكون مخصص <SearchField /> باستقبال ref وربطه بحقل الإدخال الداخلي؟
نغلّف تعريف المكون بدالة forwardRef لاستقبال المرجع كمعامل ثانٍ وتمريره إلى عنصر input الداخلي.
افتراضياً في React 18، يكشف تمرير ref={myRef} لأي مكون دالي عادي بدون forwardRef عن أول عنصر div بداخله تلقائياً.
خطأ؛ تحمي المكونات المخصصة بنيتها الداخلية افتراضياً ولا تكشف عناصرها إلا بتمرير صريح.
كيف ندير مراجع العناصر لقائمة ديناميكية متغيرة الطول تُرسم عبر دالة map()؟
بما أنه يُمنع استدعاء الخطافات داخل الحلقات، نستخدم دالة مرجعية ردّية تخزن العقد في كائن Map داخل مرجع أب واحد.
أي دالة قياسية في المتصفح نستدعيها عبر المرجع لقراءة العرض والارتفاع الفعليين للعنصر بالبكسل؟
تعيد دالة getBoundingClientRect كائناً يضم العرض والارتفاع والإحداثيات الدقيقة للعنصر بعد الرسم.
عند التحكم بعنصر <video> عبر المرجع، تحافظ مزامنة الحالة داخل onPlay وonPause على دقة زر التشغيل المخصص.
صواب؛ لأن أحداث المشغل الأصلية تنطلق حتى عند إيقاف المقطع من لوحة المفاتيح أو المتصفح.
أي عملية من العمليات التالية تُعد آمنة تماماً عند تنفيذها عبر مرجع عنصر DOM في React؟
تمرير العنصر إلى مجال الرؤية بـ scrollIntoView عملية غير تدميرية لا تغير شجرة العقد.