forwardRef: إتاحة مراجع DOM للمكوّنات الأب

الـ ref هو وسيلة للاحتفاظ بمرجع إلى عقدة DOM أو مثيل مكوّن، ويستمر هذا المرجع عبر عمليات إعادة التصيير من دون التسبب في عمليات إعادة تصيير جديدة. تسندونه باستخدام السمة ref، ثم يملأ React خاصية current فيه بعد إتمام التغييرات على DOM.

لكن لا يمكنكم إسناد ref إلى مكوّن دالة بالطريقة نفسها التي تسندونه بها إلى div. لا يملك الأب افتراضيًا مسارًا للوصول إلى عقدة DOM الموجودة داخل المكوّن الابن، لأن refs لا تُمرر مثل props العادية.

يتيح React.forwardRef للمكوّن استقبال ref من الأب وتمريره إلى أحد عناصره الخاصة. فهو يغلّف دالة المكوّن ويغيّر توقيعها بحيث يصل ref كمعامل ثانٍ إلى جانب props.

وهذه هي الطريقة الرسمية لإتاحة عقدة DOM داخلية لمكوّن يستدعيها، فتحوّل الابن الذي كان معتمًا من الخارج إلى مكوّن يمكن للأب الإشارة إلى عنصره مباشرة.

تأخذ الدالة المغلّفة معاملين: (props, ref). الأول هو كائن props المعتاد، والثاني هو ref المُمرَّر. بعد ذلك تنشرون هذا ref أو تسندونه إلى العنصر الذي تريدون إتاحته، مثل ref={ref} في input داخلي.

تذكّروا أن المكوّنات المغلّفة باستخدام forwardRef فقط هي التي تستقبل هذا المعامل الثاني. أما مكوّن الدالة العادي الذي يدرج ref كمعامل ثانٍ، فسيتلقى ببساطة القيمة undefined.

المثال الكلاسيكي هو مكوّن قابل لإعادة الاستخدام لحقل نصي، وتريدون أن يتمكن الأب من تركيز input الداخلي فيه. بلفّ الحقل باستخدام forwardRef وإسناد ref المُمرَّر إلى عنصر input الأساسي، يستطيع الأب استدعاء focus عليه مباشرة.

يحافظ ذلك على قابلية إعادة استخدام مكوّن الحقل، مع منح وصول إجرائي مضبوط إليه في الموضع المطلوب تمامًا، مثل تركيز الحقل الأول في نموذج عند تركيبه.

تتيح refs المُمرَّرة القياس أيضًا. إذ يمكن للأب قراءة offsetWidth وoffsetHeight، أو استدعاء getBoundingClientRect على عنصر ابن تلقاه عبر forwardRef.

يفيد ذلك في التلميحات والنوافذ المنبثقة وحسابات التخطيط، عندما يحتاج الأب إلى معرفة الحجم أو الموضع الدقيق المُصيَّر لعنصر داخلي قبل تحديد موضع شيء آخر بالنسبة إليه.

بما أن ref المُمرَّر يشير إلى عقدة DOM حقيقية، يستطيع الأب استدعاء أساليب DOM الأصلية عليها. يؤدي استدعاء scrollIntoView على عنصر قائمة مُمرَّر إلى إظهاره بسلاسة، بينما يعيد scrollTo تموضع المحتوى داخل حاوية تمرير مُمرَّرة.

هذه إجراءات إجرائية لا يوجد لها مقابل تصريحي واضح، وهذا تحديدًا هو نوع التفاعل الذي صُممت refs للتعامل معه.

أحيانًا يكون العنصر الذي تريدون إتاحته مدفونًا داخل عدة مكوّنات. يمكنكم تسلسل forwardRef بحيث تمرر كل طبقة وسيطة ref الذي تلقته إلى الطبقة التالية، إلى أن يصل أخيرًا إلى عقدة DOM المستهدفة.

يجب أن تستخدم كل دالة تغليف في هذه السلسلة forwardRef بنفسها وأن تمرر ref إلى الأمام، لأن وجود مكوّن عادي في المنتصف سيقطع هذا الاتصال.

يمكن الجمع بين forwardRef وReact.memo للحصول على تمرير refs وحفظ التصيير في الذاكرة معًا. والترتيب المعتاد هو memo(forwardRef(Component))، إذ يغلّف memo ناتج forwardRef بحيث تظل مقارنة memo مطبقة.

يظهر هذا النمط في أنظمة التصميم الحساسة للأداء، حيث يجب على مكوّن كثير التصيير أن يتيح عقدته وأن يتخطى عمليات إعادة التصيير غير الضرورية.

يظهر مكوّن forwardRef في React DevTools مع تسمية ForwardRef تُغلّف اسم المكوّن. ويسهّل ذلك التأكد سريعًا من أن المكوّن يشارك في تمرير refs.

يمكنكم منح الدالة الداخلية اسمًا، أو ضبط displayName، لجعل الإدخال في DevTools أوضح من تسمية ForwardRef عامة لمكوّن مجهول.

يُستخدم forwardRef لإتاحة عقد DOM وواجهات التحكم الإجرائية، لا لتمرير البيانات. إذا احتاج الأب إلى التأثير في الابن، ففضّلوا props والحالة العاديين بدلًا من الوصول إليه عبر ref.

يؤدي الإفراط في استخدام refs إلى ربط المكوّنات بإحكام وتجاوز تدفق البيانات في React، ما يجعل تتبع السلوك أصعب. استخدموا forwardRef فقط عندما يتعذر فعلًا التعبير عن التفاعل باستخدام prop تصريحي.

لا يزال forwardRef الأداة القياسية لإتاحة refs في مكتبات المكوّنات وحقول الإدخال القابلة لإعادة الاستخدام. وتتجه إصدارات React الأحدث إلى السماح بتمرير ref بوصفه prop عاديًا، لكن forwardRef لا يزال مستخدمًا على نطاق واسع ومن المهم فهمه.

يساعدكم إتقانه على التعامل مع قواعد الشيفرة الحالية، وفهم الآليات الأساسية التي ستعتمد عليها أي صياغة مستقبلية تجعل ref prop.

اختبروا فهمكم لكيفية استقبال مكوّن forwardRef للـ ref الخاص به.

يحل forwardRef القيد الذي يمنع الأب من الوصول إلى عقدة DOM الخاصة بمكوّن الابن، وذلك بمنح المكوّن معامل ref ثانيًا يمكنه تمريره إلى عنصر داخلي. ويتيح ذلك تركيز عناصر الابن وقياسها وتمريرها.

يمكن تركيبه مع memo، وتسلسله عبر طبقات متعددة، ويظهر باسم ForwardRef في DevTools. استخدموه للوصول الإجرائي إلى DOM، لا لتمرير البيانات؛ فـ props أنسب لذلك.