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

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

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

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

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

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

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

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

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

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

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

const myRef = useRef();

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

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

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

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

ساختن Ref

const myRef = useRef();

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

myRef.current = "FrontEndi";

دسترسی به مقدار 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 "react";

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

// For Get Height of Div Element in First Render
  useEffect(() => {
    console.log(
      "Height of div Element Is :", 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 در ری اکت استفاده کنید باید چند نکته مهم رو در نظر بگیرید .

تغییر مقدار ref باعث re-Render کامپوننت نمیشه !

زمانی که مقادیر useState یا useReducer رو تغییر میدیم ، کامپوننت ما re-Render میشه . اما useRef اینطور نیست !

تغییر مقادیر ref باعث re-Render کامپوننت شما نمیشه .

از مقادیر ref به عنوان Dependencies استفاده نکنید !

خیلی از هوک ها در React از ما یک آرایه به عنوان Dependencies میگیرن. ( مثل هوک useEffect )

اما به هیچ عنوان از مقادیر ref برای استفاده در Dependencies Array ها استفاده نکنید چون باعث ارور میشه.

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

با اینکه هوک useRef در ری اکت یکی از هوک های بشدت کاربردی و مفیده ، ولی هرجایی نباید ازش استفاده کنیم. در واقع باید در جایی که useRef کاربرد داره ازش استفاده کنیم ، نه جای دیگری !

بطور کل اگه میخواید با تغییر مقدار ذخیره شده ، کل کامپوننت شما re-Render بشه باید از هوک useState استفاده کنید اما اگه نیازی به re-Render ندارید میتونید از هوک useRef استفاده کنید.

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

useRef در ری اکت