قلاب useRef در React

در این بخش به بررسی قلاب useRef در React می پردازیم، یکی از چالش‌های مهم در توسعه وب‌اپلیکیشن‌ها با استفاده از React، مدیریت وضعیت کامپوننت‌ها و تعامل با DOM است. برای این کار، کتابخانه React ابزارها و قلاب‌هایی (Hooks) قدرتمند ارائه می‌دهد که به توسعه‌دهندگان اجازه می‌دهند کدی خوانا، ماژولار و قابل نگهداری بنویسند. یکی از این قلاب‌ها useRef است که به صورت خاص برای ایجاد ارجاعات (References) بدون نیاز به رندر مجدد طراحی شده است.

قلاب useRef اغلب به عنوان ابزاری برای تعامل مستقیم با DOM شناخته می‌شود، اما کاربردهای آن به این محدود نمی‌شود. این قلاب به توسعه‌دهندگان اجازه می‌دهد مقادیر قابل تغییر را ذخیره کنند که بین رندرها باقی می‌مانند و باعث بهبود عملکرد و کاهش پیچیدگی می‌شوند. در این مقاله، به بررسی دقیق قلاب useRef می‌پردازیم، کاربردهای آن را توضیح می‌دهیم و با ارائه نمونه کدهایی به درک بهتر آن کمک می‌کنیم.

useRef چیست؟

قلاب useRef یکی از ابزارهای پایه‌ای در React است که برای ذخیره‌ی مرجع به یک شیء قابل تغییر استفاده می‌شود. برخلاف state، تغییرات در مقدار ذخیره‌شده در useRef باعث رندر مجدد کامپوننت نمی‌شود. این قلاب اغلب در دو حالت استفاده می‌شود:

1. دسترسی مستقیم به عناصر DOM
   useRef به ما اجازه می‌دهد مرجعی به یک عنصر DOM ایجاد کرده و مستقیماً با آن تعامل کنیم. این امر برای مواردی مانند فوکوس دادن به یک ورودی یا مدیریت انیمیشن‌ها مفید است.
2. ذخیره‌سازی مقادیر قابل تغییر بین رندرها
   وقتی نیاز است مقداری را بین رندرها نگه داریم، اما نمی‌خواهیم رندر کامپوننت تحت تأثیر تغییر آن مقدار قرار بگیرد، می‌توانیم از useRef استفاده کنیم.

ساختار پایه استفاده از useRef

قلاب useRef با امضای زیر استفاده می‌شود:

const refContainer = useRef(initialValue);

• initialValue: مقدار اولیه‌ای که باید به متغیر ارجاع داده شود.
• refContainer: یک شیء که حاوی ویژگی current است و مقدار مرجع در آن ذخیره می‌شود.

دسترسی مستقیم به عناصر DOM با useRef

یکی از رایج‌ترین کاربردهای useRef تعامل با عناصر DOM است. به عنوان مثال، می‌توانیم با استفاده از این قلاب، یک ورودی را به صورت خودکار فوکوس دهیم.

مثال: فوکوس روی یک ورودی

توضیح کد

• ایجاد مرجع: با استفاده از useRef یک مرجع برای ورودی ایجاد شده است.
• تنظیم فوکوس: در تابع useEffect، با استفاده از ویژگی current مرجع، مستقیماً به متد focus عنصر DOM دسترسی پیدا کرده‌ایم.
• عدم رندر مجدد: تغییر فوکوس تأثیری بر وضعیت یا رندر مجدد کامپوننت ندارد.

ذخیره مقادیر بین رندرها

گاهی لازم است داده‌ای را بین رندرهای مختلف نگه داریم. برای مثال، شمارش تعداد دفعات کلیک بدون تأثیر بر رندر شدن کامپوننت.

مثال: شمارش کلیک

توضیح کد

• عدم استفاده از state: مقدار countRef بدون استفاده از state مدیریت می‌شود، بنابراین رندر مجددی رخ نمی‌دهد.
• نمایش مقادیر: مقدار فعلی فقط در کنسول ثبت می‌شود.
• مزایا: این روش از بروز رندرهای غیرضروری جلوگیری می‌کند.

تفاوت useRef و useState

هرچند هر دو قلاب برای نگهداری داده استفاده می‌شوند، اما تفاوت‌های اساسی بین آنها وجود دارد:

استفاده پیشرفته از useRef

قلاب useRef به دلایل کارایی و انعطاف‌پذیری در بسیاری از سناریوها مفید است. برخی کاربردهای پیشرفته آن عبارت‌اند از:

1. کنترل تایمرها: نگهداری مرجع به تایمرها برای مدیریت بهینه زمان‌بندی.
2. ذخیره مقادیر قبلی: نگهداری مقدار قبلی یک وضعیت.
3. بهبود کارایی: کاهش وابستگی به state در مواردی که نیازی به رندر مجدد نیست.

مثال: ذخیره مقادیر قبلی

توضیح کد

• ذخیره مقدار قبلی: مقدار قبلی در prevValueRef.current ذخیره می‌شود و با هر تغییر وضعیت، به‌روزرسانی می‌شود.
• نمایش دو مقدار: وضعیت جاری و مقدار قبلی در رابط کاربری نمایش داده می‌شوند.

قلاب useRef یکی از ابزارهای قدرتمند React است که برای مدیریت مرجع‌ها و ذخیره‌سازی مقادیر بدون ایجاد رندر مجدد استفاده می‌شود. این قلاب می‌تواند کارایی و سادگی کد را بهبود بخشد و برای مواردی مانند تعامل مستقیم با DOM، نگهداری مقادیر بین رندرها و مدیریت تایمرها بسیار مفید باشد.

منابع

• مستندات رسمی React
• مقالات مرتبط در Medium
• کدهای آموزشی در GitHub

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال