استخدام المراجع (Refs) في React

الدرس الثامن: استخدام المراجع (Refs) في React

في هذا الدرس، سنتعرف على المراجع (Refs) في React وكيفية استخدامها للوصول إلى العناصر في DOM مباشرة، وسنتعرف أيضًا على كيفية استخدام useRef و forwardRef لنقل المراجع بين المكونات.

1. ما هي Refs وكيفية استخدامها؟

Refs هي طريقة في React للوصول إلى العناصر في DOM مباشرة، وذلك للحصول على مرجعية لعناصر مثل الأزرار أو الحقول النصية أو أي مكون آخر. عادةً، في React، يتم التحكم في واجهة المستخدم عبر state، ولكن في بعض الحالات، قد تحتاج إلى الوصول إلى عناصر DOM مباشرة للقيام بشيء مثل تركيز الحقل النصي أو تنفيذ حركة معينة.

كيفية إنشاء واستخدام Refs:

يمكنك إنشاء ref باستخدام React.createRef() في المكونات الكلاسيكية class components، أو باستخدام useRef() في المكونات الوظيفية function components.

2. استخدام useRef للوصول إلى العناصر DOM مباشرة

في React، عند استخدام المكونات الوظيفية، يمكننا استخدام hook يسمى useRef لإنشاء ref الذي يسمح لنا بالوصول إلى عناصر DOM مباشرة.

مثال على استخدام useRef:

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    // الوصول إلى العنصر باستخدام ref و تطبيق التركيز عليه
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Focus me!" />
      <button onClick={handleFocus}>Focus the input</button>
    </div>
  );
}

export default FocusInput;

في هذا المثال:

• قمنا بإنشاء ref باستخدام useRef(null).
• قمنا بتعيين ref إلى العنصر <input />.
• عند الضغط على الزر، يتم الوصول إلى input باستخدام inputRef.current، ومن ثم تطبيق التركيز عليه باستخدام .focus().

الشرح:

• useRef يحتفظ بالمرجع (reference) العنصري الذي يتم تمريره إليه.
• inputRef.current يحتوي على العنصر الفعلي في DOM بعد التقديم الأول للمكون.
• Refs مفيدة عندما تحتاج إلى التفاعل مع العنصر مباشرة بدلاً من استخدام state.

3. استخدام forwardRef لنقل المراجع بين المكونات

في بعض الأحيان، قد تحتاج إلى نقل ref إلى مكونات React الأخرى. يمكن استخدام forwardRef للسماح بتمرير ref من مكون أب إلى مكون طفل.

مثال على استخدام forwardRef:

import React, { forwardRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

function ParentComponent() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    // الوصول إلى العنصر في المكون الطفل باستخدام ref
    inputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={inputRef} type="text" placeholder="Focus me from parent!" />
      <button onClick={handleFocus}>Focus the input</button>
    </div>
  );
}

export default ParentComponent;

في هذا المثال:

• CustomInput هو مكون يقوم باستخدام forwardRef لاستقبال ref من المكون الأب.
• في المكون الأب ParentComponent، نقوم بإنشاء ref باستخدام useRef وتعيينه إلى العنصر <CustomInput />.
• عندما يتم النقر على الزر، يتم التركيز على حقل الإدخال باستخدام ref.

الشرح:

• forwardRef يسمح للمكون بتقبل ref من المكون الأب ويمرره إلى العنصر الفعلي في المكون.
• Refs يمكن أن تُمرر عبر المكونات لتسهيل الوصول إلى عناصر DOM في المكونات الأب أو الأطفال.

4. متى تستخدم Refs؟

Refs ليست ضرورية للاستخدام في جميع الحالات، ولكن هناك حالات معينة قد تحتاج فيها إلى refs مثل:

• إدارة الفوكس (focus): عندما تريد تركيز عنصر بشكل برمجي.
• التعامل مع الرسوم المتحركة: إذا كنت بحاجة إلى التفاعل مع عناصر DOM بشكل أكثر دقة.
• التحقق من الإدخال: عندما تحتاج إلى الوصول إلى قيمة عنصر input مباشرة من دون الحاجة إلى state.

5. الختام

في هذا الدرس:

• تعلمنا كيفية استخدام refs في React للوصول إلى العناصر في DOM.
• استعرضنا كيفية استخدام useRef في المكونات الوظيفية للوصول إلى العناصر مباشرة.
• استخدمنا forwardRef للسماح بتمرير ref بين المكونات الأب والطفل.

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