Refs در React
در ری‌اکت (React)، Refs ابزاری قدرتمند برای دسترسی مستقیم به عناصر DOM یا نمونه‌های کامپوننت‌ها بدون نیاز به رندر مجدد هستند. این ویژگی اهمیت زیادی دارد، مخصوصاً زمانی که نیاز به تعامل مستقیم با DOM داریم، مانند تنظیم فوکوس، انتخاب متن، پخش رسانه یا استفاده از کتابخانه‌های شخص ثالث. استفاده صحیح از Refs باعث بهبود عملکرد و نگهداری بهتر برنامه‌های ری‌اکت می‌شود.
در کامپوننت‌های تابعی، Refs با استفاده از هوک useRef ایجاد می‌شوند و در کامپوننت‌های کلاسی از React.createRef استفاده می‌شود. Refs مرجع پایداری را برای عناصر DOM یا نمونه‌های کامپوننت فراهم می‌کنند و با حفظ جریان داده یک‌طرفه، امکان مدیریت وضعیت، معماری مبتنی بر کامپوننت و استفاده از lifecycle را می‌دهند.
در این آموزش، کاربران می‌آموزند چگونه Refs را در کامپوننت‌های تابعی و کلاسی به کار گیرند، عناصر DOM را برنامه‌ریزی شده کنترل کنند و تعاملات پیچیده کاربر در SPAهای مدرن را بهینه کنند. همچنین با مفاهیم پیشرفته‌ای مانند forwardRef، مدیریت State و بهینه‌سازی عملکرد آشنا خواهند شد و قادر خواهند بود کامپوننت‌های قابل استفاده مجدد بسازند و از بروز re-renderهای غیرضروری جلوگیری کنند.
مثال پایه
jsximport React, { useRef } from 'react';
function InputFocus() {
const inputRef = useRef(null);
const handleFocus = () => {
inputRef.current.focus();
};
return ( <div> <input ref={inputRef} type="text" placeholder="متن را وارد کنید..." /> <button onClick={handleFocus}>فوکوس روی ورودی</button> </div>
);
}
export default InputFocus;در این مثال، یک کامپوننت تابعی InputFocus داریم که یک ورودی و یک دکمه رندر می‌کند. با استفاده از useRef، مرجعی به نام inputRef ایجاد شده که به عنصر input متصل می‌شود. هنگام کلیک روی دکمه، handleFocus فراخوانی شده و متد focus را روی inputRef.current اعمال می‌کند تا فوکوس روی ورودی قرار گیرد.
این مثال نشان می‌دهد چگونه می‌توان با Refs به عناصر DOM دسترسی مستقیم داشت بدون آنکه رندر مجدد رخ دهد. Refs به کاهش prop drilling و حفظ منطق کامپوننت کمک می‌کنند. استفاده از useEffect در ترکیب با Refs می‌تواند تعاملات DOM را با lifecycle همزمان کند و بهترین عملکرد را تضمین کند.
مثال کاربردی
jsximport React, { useRef, useEffect, useState } from 'react';
function ScrollList() {
const listRef = useRef(null);
const [items, setItems] = useState(Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`));
useEffect(() => {
if (listRef.current) {
listRef.current.lastElementChild.scrollIntoView({ behavior: 'smooth' });
}
}, [items]);
const addItem = () => {
setItems(prev => [...prev, `Item ${prev.length + 1}`]);
};
return ( <div>
<ul ref={listRef} style={{ maxHeight: '200px', overflowY: 'auto' }}>
{items.map((item, index) => (<li key={index}>{item}</li>))} </ul> <button onClick={addItem}>افزودن آیتم جدید</button> </div>
);
}
export default ScrollList;این مثال پیشرفته، کاربرد Refs در پروژه‌های واقعی را نشان می‌دهد. listRef به عنصر UL متصل است و با تغییر items، useEffect آخرین عنصر لیست را به صورت خودکار اسکرول می‌کند. این الگو ترکیبی از مدیریت State، آگاهی از lifecycle و استفاده از Refs برای ایجاد تجربه کاربری روان است.
بهترین شیوه‌ها شامل بررسی موجودیت current قبل از استفاده، ادغام با هوک‌ها و اجتناب از دستکاری مستقیم DOM خارج از lifecycle است. استفاده صحیح از Refs باعث بهبود عملکرد، نگهداری و تجربه کاربر می‌شود.
بهترین شیوه‌ها برای استفاده از Refs در ری‌اکت شامل: استفاده از useRef در کامپوننت‌های تابعی، عدم تغییر مستقیم State از طریق Refs و استفاده از Refs تنها زمانی که نیاز به دسترسی مستقیم به DOM وجود دارد. اشتباهات رایج شامل: استفاده از Refs به جای State، دستکاری مستقیم DOM خارج از lifecycle و ایجاد re-render غیرضروری است.
برای بهینه‌سازی عملکرد، دسترسی به DOM باید محدود شود، Refs می‌تواند با memo یا useCallback ترکیب شود و جریان رندر طبیعی کامپوننت‌ها مختل نشود. بررسی current به ویژه در عملیات غیرهمزمان اهمیت دارد.
📊 جدول مرجع
| ری‌اکت (React) Element/Concept | Description | Usage Example |
|---|---|---|
| useRef | هوک برای ایجاد مرجع پایدار به DOM یا کامپوننت | const inputRef = useRef(null) |
| createRef | ایجاد Ref در کامپوننت‌های کلاسی | this.inputRef = React.createRef() |
| current | دسترسی به عنصر یا نمونه مرجع‌شده | inputRef.current.focus() |
| forwardRef | ارسال Ref از والد به فرزند | const Child = React.forwardRef((props, ref) => <div ref={ref} />) |
| scrollIntoView | اسکرول عنصر به ناحیه قابل مشاهده | listRef.current.lastElementChild.scrollIntoView({ behavior: 'smooth' }) |
خلاصه و گام‌های بعدی: Refs در ری‌اکت امکان دسترسی مستقیم به DOM، بهبود عملکرد و تعاملات پیچیده در SPAها را فراهم می‌کنند. نکات کلیدی: استفاده از useRef و createRef، همگام‌سازی با lifecycle با استفاده از useEffect و جلوگیری از re-renderهای غیرضروری.
گام‌های بعدی شامل بررسی forwardRef برای کامپوننت‌های قابل استفاده مجدد، ادغام Refs با کتابخانه‌های شخص ثالث، استفاده از memo و useCallback برای بهینه‌سازی عملکرد و یادگیری ابزارهای DevTools و مستندات رسمی برای تسلط کامل بر Refs است.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود