مقدمة

ما هو المرجع

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

لماذا استخدام useRef

يعتبر خطاف useRef مفيدًا بشكل خاص لـ:

• الوصول إلى عناصر DOM مباشرة: يمكنك استخدام useRef للحصول على مرجع لعنصر DOM، مما يسمح لك بمعالجته مباشرة دون تشغيل إعادة العرض.
• إنشاء قيم ثابتة: على عكس الحالة، تستمر القيم التي تم إنشاؤها باستخدام useRef بين عمليات العرض، مما يجعلها مثالية لتخزين البيانات التي لا تحتاج إلى تشغيل عمليات إعادة العرض.

فهم الخطاف useRef

يقوم الخطاف useRef بإرجاع كائن ذو خاصية .current. عند استدعاء useRef، فإنه ينشئ مرجعًا ثابتًا للقيمة التي تمررها كوسيطة. يتم تخزين هذا المرجع في الخاصية .current للكائن الذي تم إرجاعه.

إنشاء مرجع باستخدام useRef

لإنشاء مرجع، ما عليك سوى الاتصال بـ useRef بالقيمة الأولية.

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  return (...)
}

export default App

في المثال أعلاه countRef هو إشارة إلى القيمة الأولية 0.

الوصول إلى القيمة المرجعية

للوصول إلى القيمة المرجعية، ما عليك سوى استدعاء كائن countRef باستخدام الخاصية .current

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  const increment = () => {
    countRef.current  
  }

  return (
    

      
Count: {countRef.current}
      Increment
    
  )
}

export default App

في المثال أعلاه، إذا قمت بالنقر فوق الزر، فسيتم استدعاء وظيفة الزيادة التي ستزيد من countRef، ولكن لن يتم تحديث العدد في

Count: {countRef.current}

قم بتحديث الكود إلى المثال أدناه للحصول على النتيجة التي تتوقعها.

import { useRef, useState } from 'react'

const App = () => {
  const countRef = useRef(0)
  const [count, setCount] = useState(0)

  const increment = () => {
    countRef.current  
    setCount(countRef.current)
  }

  return (
    

      
Count: {count}
      Increment
    
  )
}

export default App

حالات الاستخدام الشائعة للاستخدامRef

الوصول المباشر إلى عناصر DOM ومعالجتها

من الممكن استخدام خطاف useRef للوصول إلى خصائص عناصر html وتغييرها

const App = () => {
  const inputRef = useRef(null)

  const handleFocus = () => {
    inputRef.current.focus()
  }

  return(
    
  )
}

القيم الثابتة

بخلاف useState أو المتغير، يمكن لـ useRef تمرير القيم والبيانات بين عمليات إعادة العرض مثل البيانات المخزنة مؤقتًا أو إعدادات التكوين.

تحسين الأداء

في بعض الحالات، يمكن أن يساعد استخدام useRef في تحسين المكونات عن طريق تجنب عمليات إعادة العرض غير الضرورية. كما لو كان لديك مكونًا يعرض قائمة كبيرة من العناصر، يمكنك تخزينه مؤقتًا باستخدام useRef وتعديله فقط وإعادة عرض العناصر التي تغيرت.

أفضل الممارسات والاعتبارات

• لا تكتب أو تقرأ المرجع الحالي أثناء العرض
• يمكنك تعديل خاصية ref.current
• عند تغيير الخاصية ref.current، لا تقوم React بإعادة عرض المكون الخاص بك
• المعلومات محلية لكل نسخة من المكون الخاص بك (على عكس المتغيرات الخارجية، والتي يتم مشاركتها). يمكنك تخزين المعلومات بين عمليات إعادة العرض (على عكس المتغيرات العادية، التي إعادة تعيين في كل عرض).
• يمكنك قراءة أو كتابة المراجع من معالجات الأحداث أو التأثيرات بدلاً من ذلك.
• التلاعب بالدوم بالمرجع

تمرير مرجع إلى المكون المخصص.

إذا حاولت تمرير مرجع إلى المكون الخاص بك مثل هذا

const inputRef = useRef(null);

return ;

قد تحصل على خطأ في وحدة التحكم:
تحذير: لا يمكن إعطاء مراجع لمكونات الوظيفة. ستفشل محاولات الوصول إلى هذا المرجع. هل تقصد استخدام React.forwardRef()؟

لحل هذه المشكلة، قم بلف المكون المخصص باستخدام ForwardRef كما يلي:

const inputRef = useRef(null);

return ;

المكون المخصص:

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    
  );
});

export default MyInput;

خاتمة

useRef هو خطاف قوي يستخدم بشكل أساسي لاستخدام التأثيرات الجانبية مثل تخزين البيانات مؤقتًا بين عمليات إعادة العرض أو الوصول إلى عناصر DOM. إنها أداة رائعة لتحسين الأداء وتحقيق وظائف محددة في تطبيق React.