هوک useRef ری اکت چیست ؟ بررسی تخصصی useRef در React !
تو این مقاله میخوایم به بررسی تخصصی هوک useRef در ری اکت و 2 کاربرد مهم اون بپردازیم. هوک useRef در React چندین کاربرد مهم و خیلی خیلی کاربردی داره که میخوایم تو این مقاله درموردشون صحبت کنیم.
پس اگه اسم useRef در ریکت به گوشتون خورده و دقیقا کاربردش رو نمیدونید، با فِرانت اِندی همراه باشید 🙂
تو مقاله های قبلی راجب هوک 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 های مختلف کامپوننت شماست. تغییر این مقدار ذخیره شده باعث 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 مرحله بالا عمل کنید . یعنی :
یک ref به کمک ()useRef بسازید .
یک Element به آن ref اختصاص دهید.
حالا مطابق مرحله 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 با useState !
با useRef و useState میتونیم مقادیر مختلفی رو ذخیره کنیم اما 2 تفاوت مهم و اساسی باهمدیگه دارن :
تغییر مقادیر useRef باعث re-Render کامپوننت نمیشه درصورتیکه تغییر مقادیر useState باعث re-Render کامپوننت میشه.
بروزرسانی مقادیر useRef بصورت Sync ( همان موقع ) انجام میشه اما بروزرسانی مقادیر useState بصورت Async ( بعد از render صفحه ) اتفاق میوفته.
پس با توجه به اینکه تغییر مقدار useRef در ری اکت باعث re-render کامپوننت نمیشه، خیلی مناسب سناریو هایی هست که قصد تغییر مقدار ذخیره شده خودمون رو داریم و نمیخوایم کامپوننت re-render بشه.
استفاده بیش از حد از useRef در React ممنوع!
با اینکه useRef در ری اکت یک ابزار قدرتمند برای دسترسی به Element های موجود در DOM هست، باید صرفا در موارد ضروری ازش استفاده کنیم.
کاربرد هوک useRef چیست ؟
چند نمونه از کاربرد های واقعی هوک useRef در ریکت عبارتند از :
فوکوس کاربر روی یک input یا اِلِمان
اندازه اگیری ابعاد صفحه یا یک اِلِمان
اجرای انیمیشن ها پس از mount کامپوننت
بهینه سازی اپیکیشن با useRef در ری اکت !
استفاده صحیح از هوک useRef در React میتونه به افزایش Performance اپیکیشن ما کمک کنه.
ما گفتیم که میتونیم داخل هوک useRef یک مقدار ذخیره کنیم و زمانیکه اون مقدار رو تغییر بدیم، هیچ re-render در کامپوننت نداشته باشیم!
ما میتونیم از همین فرصت استفاده کنیم و مقادیری که نیاز به re-render شدن کامپوننت ندارن رو داخلش ذخیره و تغییر بدیم.
فوکوس روی یک input به کمک useRef در React !
بیاید یه مثال کاربردی در پروژه های ری اکتی رو باهمدیگه بررسی کنیم 🙂 فرض کنید ما میخوایم به محض mount شدن کامپوننت، کاربر رو روی یک input فوکوس کنیم.
این مورد برای کد های تایید ( OTP ) یا سناریو های دیگه خیلی کاربردیه. فوکوس کردن روی یک اِلِمان به کاربر کمک میکنه که بدونه الان توی این صفحه باید چیکار بکنه ( یجور راهنم هست )
مثلا زمانیکه کاربر تو صفحه ورود شماره تلفنش رو وارد میکنه و روی دکمه دریافت کد کلیک میکنه، میتونیم کاربر رو روی input مربوط به کد 4 رقمی فوکوس کنیم تا کاربر متوجه بشه که باید کد 4 رقمی رو وارد کنه.
برای پیاده سازی این مثال به کمک useRef در ری اکت بصورت زیر عمل میکنیم :
import React, { useEffect, useRef } from 'react';
function MyComponent() {
// Step 2: Create a ref
const inputRef = useRef(null);
// Step 4: Focus the input element after the component is mounted
useEffect(() => {
inputRef.current.focus();
}, []); // Empty dependency array means this effect runs once after the initial render
return (
<div>
{/* Step 3: Attach the ref to the input element */}
<input ref={inputRef} type="text" />
</div>
);
}
export default MyComponent;
تو خط 1 تیکه کد بالا، هوک useRef رو برای دسترسی به اِلِمان Input در DOM فراخوانی کردیم. همچنین هوک useEffect رو فراخوانی کردیم چون در فاز mounting میخوایم کاربر روی input فوکوس بشه.
تو خط 5 یک ref به کمک useRef ساختیم که اسمش رو inputRef گذاشتیم ( این اسم هرچیزی میتونه باشه )
تو خط 15 یک input ساختیم و ref خودمون رو بهش پاس دادیم.
در نهایت تو خط 9، تو فاز mounting کاربر رو روی Ref خودمون فوکوس کردیم ( کاربر روی input فوکوس میشه )
در حقیقت تو این مثال تونستیم به Element خودمون ( input ) که داخل DOM وجود داره دسترسی داشته باشیم.
ذخیره یک مقدار به کمک useRef در ری اکت و تغییر اون مقدار بدون re-render شدن !
ما گفتیم که یکی از مزیت های useRef در ریکت این هست که میتونیم یک مقدار داخلش ذخیره کنیم و اون مقدار رو بطوری تغییر بدیم که کامپوننت ما re-render نشه
همین موضوع کمک میکنه که اپیکیشن بهینه تری داشته باشیم.
تو تیکه کد زیر این کار رو بسادگی انجام دادیم :
import React, { useRef, useEffect } from 'react';
function MyComponent() {
// Step 1: Create a ref with an initial value
const myRef = useRef(0); // Initializes with 0
useEffect(() => {
// Step 2: Change the value
myRef.current = 100; // Updating the value to 100
// Log the updated value
console.log(myRef.current); // Outputs: 100
}, []);
// Other logic or rendering can go here
return <div>My Component</div>;
}
export default MyComponent;
تو خط 1 تیکه کد بالا useRef رو فراخوانی کردیم.
تو خط 5، ما ref خودمون رو به کمک useRef در React ساختیم که مقدار 0 رو به عنوان مقدار اولیه بهش پاس دادیم.
تو خط 9 از useEffect برای تغییر مقدار ذخیره شده در useRef استفاده کردیم. نکته خیلی جالب اینجاست که با تغییر مقدار ذخیره شده در useRef از 0 به 100، کامپوننت ما re-render نمیشود! و این فوق العادس 🙂
جمع بندی
هوک useRef یک Reference به Element مدنظر ما میده تا بتونیم زمانیکه وارد DOM شد بهش دسترسی داشته باشیم. درحالت عادی نمیتونیم به اِلِمان های DOM دسترسی پیدا کنیم ( چون هیچ Reference بهشون نداریم )
هوک useRef در React این رفرنس رو ایجاد میکنه تا بتونیم زمانیکه وارد DOM شدن ، بهشون دسترسی داشته باشیم.
هوک useRef یک آبجکت برای ما Return میکنه که شامل یک Property به نام current هست .
خصوصیت current دقیقا همون چیزی هست که برای خوندن مقدار reference شده باید ازش استفاده کنیم:
console.log(myRef.current)
برای تغییر مقدار reference شده هم باید از همین خصوصیت current استفاده کنیم :
myRef.current="FrontEndi.com";
بین re-Render های مختلف کامپوننت ما ، مقدار reference شده توسط هوک useRef کاملا حفظ میشه و از بین نمیره.
تغییر مقدار reference شده باعث re-Render کامپوننت ما نمیشه! اینو چند بار بهش اشاره کردم چون یکی از باگ های مرسوم این هوکه 🙂
با هوک useRef میتونید به Element های خودتون در DOM دسترسی داشته باشید :
<div ref={myRef}>FrontEndi</div>
امیدوارم که این هوک باحال و پرکاربرد ری اکت رو خیلی خوب درک کرده باشید و متوجه شده باشید که کجا باید ازش استفاده کنیم و کجا استفاده نکنیم:)
از هوک useRef در ری اکت برای دسترسی به Element های موجود در DOM و ذخیره مقادیر Mutable بین re-Render های مختلف کامپوننت میشه استفاده کرد.
با useRef و useState میتونیم مقادیر مختلفی رو ذخیره کنیم اما 2 تفاوت مهم و اساسی باهمدیگه دارن :
تغییر مقادیر useRef باعث re-Render کامپوننت نمیشه درصورتیکه تغییر مقادیر useState باعث re-Render کامپوننت میشه.
بروزرسانی مقادیر useRef بصورت Sync ( همان موقع ) انجام میشه اما بروزرسانی مقادیر useState بصورت Async ( بعد از render صفحه ) اتفاق میوفته.
12 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
عالی بود ممنون
سلام و درود
خوشحالم که برات مفید واقع شده 🙂
واقعا عالی بود تشکر
سلام دانیال
خوشحالم که برات مفید واقع شده این مقاله 🙂
موفق باشی
سلام
درود بر شما عالی بود
سلام رضا جان خوشحالم که برات مفید بوده 🙂
موفق باشی
واقعا عالی و کامل و صریح بود. ممنون
خوشحالم که براتون مفید واقع شده 🙂
موفق باشی
خیلی خوب و کامل توضیح دادید. متشکرم.
خوشحالم که برات مفید واقع شده:) موفق باشی
سلام. ممنون از مطالب مفیدتون. فکر نمیکردم سایت فارسی به این خوبی پیدا کنم. معمولا سایتهای فارسی یه مطلب انگلیسی رو دادن به یه ربات براشون به افتضاح ترین شکل ممکن ترجمه کرده و گذاشتن توی سایت که پربیننده بشن. متن انگلیسیش به مراتب قابل فهم تر از ترجمه هست. این کارشون باعث میشه که هیچ کس امید نداشته باشه در این زمینه ها مطلب خوب فارسی پیدا کنه. به همین دلیل معمولا برنامه نویسها سراغ سایتهای فارسی نمیرن. ولی من الان سایت شما رو گذاشتم توی بوک مارکهام که باز هم بهش مراجعه کنم و از حالا به بعد مشتری سایت شما هستم.:)
خیلی عالیه. براتون آرزوی موفقیت روز افزون دارم.
سلاام و روز بخیر، بابت نظرلطفت و انرژی مثبتی که بهم دادی ازت خیلی خییلی ممنونم🖤🌱
خیلی خوشحالم که مقالات برات مفید بودن و امیدوارم بتونم همیشه مقالات باکیفیت تری منتشر کنم 🙂
موفق باشی daisy عزیز