هوک useRef ری اکت و بررسی تخصصی React.useRef

تو این مقاله میخوایم به بررسی تخصصی هوک useRef ری اکت و کاربردش در زمینه دسترسی به Element های موجود در DOM بپردازیم. با فِرانت اِندی همراه باشید ?

تو مقاله های قبلی راجب هوک useState و هوک useReducer صحبت کردیم و دیدیم زمانیکه مقادیرشون تغییر میکنه ، کامپوننت ما re-Render میشه ! اما شاید بخوایم یک مقدار ذخیره شده رو تغییر بدیم بطوریکه کامپوننت ما re-Render نشه!

اینجاست که هوک ()useRef میاد وسط ? البته کاربرد های دیگه مثل دسترسی به Element های موجود در DOM هم داره که در ادامه بصورت تخصصی بررسیشون میکنیم.

هوک useRef ری اکت چیست ؟

هوک useRef یکی از هوک های معرفی شده توسط تیم React هست که در نسخه 16.8 معرفی شد.

هوک useRef در React دو کاربرد اصلی داره :

کاربرد اصلی هوک ()useRef دسترسی به Element های موجود در DOM هست. ( اگه در مورد DOM یا Virtual Dom اطلاعاتی ندارید حتما مقاله Virtual Dom ری اکت رو مطالعه کنید )

دومین کاربرد هوک useRef که بسیار هم کاربردیه ، ذخیره یک Mutable Value بین re-Render های مختلف کامپوننت شماست.

نگران نباشید چون قراره تو ادامه این مقاله به زبان ساده اما تخصصی کاربردشون رو بررسی کنیم.

صرفا جهت اطلاع ..

کلمه ref موجود در useRef ، مخفف Reference ( به معنی مرجع ) هست. در حقیقت با هوک useRef یک Reference به اِلِمان موجود در DOM میدیم تا بتونیم هر زمان که لازم بود مستقیما بهش دسترسی داشته باشیم.

ساخت یک ref با کمک هوک ()useRef

برای ایجاد یک refrence به کمک هوک useRef توی کامپوننت خودتون بصورت زیر عمل کنین :

const myRef = useRef();

هنگام ایجاد useRef میشه یک مقدار اولیه هم بهش اختصاص داد :

const myRef = useRef('FrontEndi.com');

صرفا جهت اطلاع ..

هوک useRef مثل مابقی هوک ها ، قابلیت استفاده در Functional Coponent داره و نمیتونید تو Class Component ها ازش استفاده کنید. اگه کامپوننت شما Class Component هست از createRef استفاده کنید.

چطور از useRef استفاده کنیم ؟

بطور کل برای استفاده از هوک useRef در React باید 3 مرحله زیر رو انجام داد :

ساختن Ref

const myRef = useRef();

اختصاص مقدار به Ref

myRef.current = &quotFrontEndi&quot

دسترسی به مقدار Ref

console.log(myRef.current);

برای دسترسی به Element های موجود در Dom شما باید طبق 3 مرحله بالا عمل کنید . یعنی :

1. یک ref به کمک ()useRef بسازید .
   
2. یک Element به آن ref اختصاص دهید.
   
3. حالا مطابق مرحله 3 میتوانید به Element موجود در DOM دسترسی داشته باشید.
   

دسترسی به ارتفاع صفحه کاربر با useRef در ری اکت

بیاید یه مثال واقعی از ref و هوک ()useRef ری اکت رو باهم بررسی کنیم.

فرض کنیم تو پروژه ای هستیم که نیاز داریم ارتفاع صفحه کاربر رو بر حسب پیکسل بدست بیاریم. پس لازمه که به Element روت خودمون در DOM دسترسی داشته باشیم :

import { useEffect, useRef } from &quotreact&quot

export default function App() {
  // Create Ref With useRef Hook
  const divElement = useRef();

// For Get Height of Div Element in First Render
  useEffect(() => {
    console.log(
      &quotHeight of div Element Is :&quot, divElement.current.offsetHeight
    );
  }, []);

  return (
    <div ref={divElement}>
      <h1> FrontEndi.com :) </h1>
    </div>
  );
}

تو مثال بالا به اِلِمان div یک ref دادیم و میتونیم هر زمان که لازم بود در DOM بهش دسترسی داشته باشیم. ( خط 15 )

این ref به کمک هوک useRef در خط 5 ساخته شده.

تو خط 9 به کمک ref ساخته شده تونستیم به اِلِمان div دسترسی داشته باشیم و مقدار ارتفاعش رو ببینیم. ما اینجا خصوصیت offsetHeight رو log گرفتیم اما شما میتونید به هر خصوصیت دیگه ای دسترسی داشته باشید ( با توجه به نیازتون ).

اگه میخواید از useRef در ری اکت استفاده کنید باید چند نکته مهم رو در نظر بگیرید .

برای مطالعه ادامه این مقاله + کد ها و مثال های بیشتر لطفا روی لینک زیر کلیک کنید :

هوک useRef در React

FrontEndi.com