React createRef: راهنمای جامع تعامل مستقیم با کامپوننت‌ها و عناصر DOM

در چشم‌انداز گسترده و اغلب پیچیده توسعه وب مدرن، ری‌اکت به عنوان یک نیروی غالب ظهور کرده است که عمدتاً به خاطر رویکرد اعلانی (declarative) خود در ساخت رابط‌های کاربری مورد تحسین قرار گرفته است. این پارادایم توسعه‌دهندگان را تشویق می‌کند تا به جای تجویز چگونگی دستیابی به یک حالت بصری از طریق دستکاری مستقیم DOM، توصیف کنند که UI آن‌ها بر اساس داده‌ها چه شکلی باید داشته باشد. این انتزاع، توسعه UI را به طور قابل توجهی ساده کرده و باعث شده برنامه‌ها قابل پیش‌بینی‌تر، قابل درک‌تر و با عملکرد بالا باشند.

با این حال، دنیای واقعی برنامه‌های وب به ندرت کاملاً اعلانی است. سناریوهای خاص اما رایجی وجود دارد که در آن‌ها تعامل مستقیم با عنصر DOM (Document Object Model) زیرین یا یک نمونه کامپوننت کلاسی نه تنها راحت، بلکه کاملاً ضروری می‌شود. این «راه‌های فرار» از جریان اعلانی ری‌اکت به عنوان ref شناخته می‌شوند. در میان مکانیسم‌های مختلفی که ری‌اکت برای ایجاد و مدیریت این ارجاع‌ها ارائه می‌دهد، React.createRef() به عنوان یک API بنیادی، به ویژه برای توسعه‌دهندگانی که با کامپوننت‌های کلاسی کار می‌کنند، مطرح است.

این راهنمای جامع قصد دارد منبع قطعی شما برای درک، پیاده‌سازی و تسلط بر React.createRef() باشد. ما به یک کاوش دقیق در مورد هدف آن خواهیم پرداخت، به سینتکس و کاربردهای عملی آن عمیق می‌شویم، بهترین شیوه‌های آن را روشن می‌کنیم و آن را از دیگر استراتژی‌های مدیریت ref متمایز می‌کنیم. چه شما یک توسعه‌دهنده باتجربه ری‌اکت باشید که به دنبال تحکیم درک خود از تعاملات دستوری هستید یا یک تازه‌کار که به دنبال درک این مفهوم حیاتی است، این مقاله شما را با دانشی مجهز خواهد کرد تا برنامه‌های ری‌اکت قوی‌تر، با عملکرد بهتر و قابل دسترس در سطح جهانی بسازید که به زیبایی با خواسته‌های پیچیده تجربیات کاربری مدرن سازگار باشند.

درک Ref ها در ری‌اکت: پل زدن بین دنیای اعلانی و دستوری

در هسته خود، ری‌اکت از سبک برنامه‌نویسی اعلانی حمایت می‌کند. شما کامپوننت‌های خود، state آن‌ها و نحوه رندر شدنشان را تعریف می‌کنید. سپس ری‌اکت کنترل را به دست می‌گیرد و به طور موثر DOM واقعی مرورگر را برای منعکس کردن UI اعلام شده شما به‌روز می‌کند. این لایه انتزاعی بسیار قدرتمند است و توسعه‌دهندگان را از پیچیدگی‌ها و مشکلات عملکردی دستکاری مستقیم DOM محافظت می‌کند. به همین دلیل است که برنامه‌های ری‌اکت اغلب بسیار روان و واکنش‌گرا به نظر می‌رسند.

جریان داده یک‌طرفه و محدودیت‌های آن

قدرت معماری ری‌اکت در جریان داده یک‌طرفه آن نهفته است. داده‌ها به طور قابل پیش‌بینی از کامپوننت‌های والد به فرزندان از طریق props جریان می‌یابند و تغییرات state در یک کامپوننت باعث رندرهای مجدد می‌شود که در زیردرخت آن پخش می‌شود. این مدل، قابلیت پیش‌بینی را تقویت کرده و اشکال‌زدایی را به طور قابل توجهی آسان‌تر می‌کند، زیرا شما همیشه می‌دانید که داده‌ها از کجا سرچشمه می‌گیرند و چگونه بر UI تأثیر می‌گذارند. با این حال، هر تعاملی کاملاً با این جریان داده از بالا به پایین مطابقت ندارد.

سناریوهایی مانند موارد زیر را در نظر بگیرید:

• فوکوس کردن برنامه‌ریزی‌شده روی یک فیلد ورودی زمانی که کاربر به یک فرم می‌رود.
• فراخوانی متدهای play() یا pause() روی یک عنصر <video>.
• اندازه‌گیری ابعاد دقیق پیکسلی یک <div> رندر شده برای تنظیم دینامیک طرح‌بندی.
• ادغام با یک کتابخانه جاوا اسکریپت شخص ثالث پیچیده (مانند یک کتابخانه نمودار مانند D3.js یا یک ابزار تجسم نقشه) که انتظار دسترسی مستقیم به یک کانتینر DOM را دارد.

این اقدامات ذاتاً دستوری هستند – آن‌ها شامل فرمان مستقیم به یک عنصر برای انجام کاری هستند، به جای اینکه صرفاً حالت مطلوب آن را اعلام کنند. در حالی که مدل اعلانی ری‌اکت اغلب می‌تواند بسیاری از جزئیات دستوری را انتزاعی کند، نیاز به آن‌ها را به طور کامل از بین نمی‌برد. این دقیقاً جایی است که ref ها وارد عمل می‌شوند و یک راه فرار کنترل‌شده برای انجام این تعاملات مستقیم فراهم می‌کنند.

چه زمانی از Ref ها استفاده کنیم: پیمایش بین تعاملات دستوری و اعلانی

مهم‌ترین اصل هنگام کار با ref ها این است که از آن‌ها به ندرت و فقط در مواقع کاملاً ضروری استفاده کنید. اگر کاری را می‌توان با استفاده از مکانیسم‌های اعلانی استاندارد ری‌اکت (state و props) انجام داد، آن همیشه باید رویکرد ترجیحی شما باشد. اتکای بیش از حد به ref ها می‌تواند منجر به کدی شود که درک، نگهداری و اشکال‌زدایی آن دشوارتر است و مزایایی را که ری‌اکت فراهم می‌کند، تضعیف می‌کند.

با این حال، برای موقعیت‌هایی که واقعاً به دسترسی مستقیم به یک گره DOM یا یک نمونه کامپوننت نیاز دارند، ref ها راه‌حل صحیح و در نظر گرفته شده هستند. در اینجا یک تفکیک دقیق‌تر از موارد استفاده مناسب آورده شده است:

• مدیریت فوکوس، انتخاب متن و پخش رسانه: این‌ها نمونه‌های کلاسیکی هستند که در آن‌ها نیاز به تعامل دستوری با عناصر دارید. به فوکوس خودکار روی نوار جستجو هنگام بارگذاری صفحه، انتخاب تمام متن در یک فیلد ورودی، یا کنترل پخش یک پخش‌کننده صوتی یا تصویری فکر کنید. این اقدامات معمولاً توسط رویدادهای کاربر یا متدهای چرخه حیات کامپوننت فعال می‌شوند، نه صرفاً با تغییر props یا state.
• راه‌اندازی انیمیشن‌های دستوری: در حالی که بسیاری از انیمیشن‌ها را می‌توان به صورت اعلانی با transition/animation های CSS یا کتابخانه‌های انیمیشن ری‌اکت مدیریت کرد، برخی از انیمیشن‌های پیچیده و با کارایی بالا، به ویژه آن‌هایی که شامل HTML Canvas API، WebGL یا نیاز به کنترل دقیق بر ویژگی‌های عنصر دارند که بهتر است خارج از چرخه رندر ری‌اکت مدیریت شوند، ممکن است به ref ها نیاز داشته باشند.
• ادغام با کتابخانه‌های DOM شخص ثالث: بسیاری از کتابخانه‌های معتبر جاوا اسکریپت (مانند D3.js، Leaflet برای نقشه‌ها، کیت‌های ابزار UI قدیمی مختلف) برای دستکاری مستقیم عناصر خاص DOM طراحی شده‌اند. Ref ها پل ضروری را فراهم می‌کنند و به ری‌اکت اجازه می‌دهند یک عنصر کانتینر را رندر کند و سپس به کتابخانه شخص ثالث اجازه دسترسی به آن کانتینر را برای منطق رندرینگ دستوری خود بدهد.
• اندازه‌گیری ابعاد یا موقعیت عنصر: برای پیاده‌سازی طرح‌بندی‌های پیشرفته، مجازی‌سازی یا رفتارهای اسکرول سفارشی، شما اغلب به اطلاعات دقیقی در مورد اندازه یک عنصر، موقعیت آن نسبت به viewport یا ارتفاع اسکرول آن نیاز دارید. API هایی مانند getBoundingClientRect() فقط روی گره‌های واقعی DOM قابل دسترسی هستند، که ref ها را برای چنین محاسباتی ضروری می‌سازد.

برعکس، شما باید از استفاده از ref ها برای کارهایی که می‌توان به صورت اعلانی انجام داد، خودداری کنید. این شامل موارد زیر است:

• تغییر استایل یک کامپوننت (از state برای استایل‌دهی شرطی استفاده کنید).
• تغییر محتوای متنی یک عنصر (آن را به عنوان prop ارسال کنید یا state را به‌روز کنید).
• ارتباطات پیچیده بین کامپوننت‌ها (props و callback ها معمولاً برتر هستند).
• هر سناریویی که در آن سعی در تکرار عملکرد مدیریت state دارید.

ورود به React.createRef(): رویکرد مدرن برای کامپوننت‌های کلاسی

React.createRef() در ری‌اکت 16.3 معرفی شد و روشی صریح‌تر و تمیزتر برای مدیریت ref ها در مقایسه با روش‌های قدیمی‌تر مانند ref های رشته‌ای (اکنون منسوخ شده) و ref های callback (هنوز معتبر اما اغلب پرجزئیات‌تر) ارائه می‌دهد. این API به گونه‌ای طراحی شده است که مکانیسم اصلی ایجاد ref برای کامپوننت‌های کلاسی باشد و یک API شیءگرا ارائه می‌دهد که به طور طبیعی در ساختار کلاس جای می‌گیرد.

سینتکس و استفاده اولیه: یک فرآیند سه‌مرحله‌ای

گردش کار برای استفاده از createRef() ساده است و شامل سه مرحله کلیدی می‌شود:

1. ایجاد یک شیء Ref: در سازنده (constructor) کامپوننت کلاسی خود، یک نمونه ref را با فراخوانی React.createRef() ایجاد کرده و مقدار بازگشتی آن را به یک خاصیت نمونه (instance property) اختصاص دهید (مانند this.myRef).
2. اتصال Ref: در متد render کامپوننت خود، شیء ref ایجاد شده را به ویژگی ref عنصر ری‌اکت (چه یک عنصر HTML یا یک کامپوننت کلاسی) که می‌خواهید به آن ارجاع دهید، منتقل کنید.
3. دسترسی به هدف: پس از اینکه کامپوننت mount شد، گره DOM یا نمونه کامپوننت ارجاع داده شده از طریق خاصیت .current شیء ref شما در دسترس خواهد بود (مانند this.myRef.current).

import React from 'react';

class FocusInputOnMount extends React.Component {
constructor(props) {
super(props);

this.inputElementRef = React.createRef(); // مرحله ۱: ایجاد یک شیء ref در سازنده
console.log('Constructor: Ref current value is initially:', this.inputElementRef.current); // null
}

componentDidMount() {

if (this.inputElementRef.current) {
this.inputElementRef.current.focus();
console.log('ComponentDidMount: Input focused. Current value:', this.inputElementRef.current.value);
}
}

handleButtonClick = () => {

if (this.inputElementRef.current) {
alert(`Input value: ${this.inputElementRef.current.value}`);
}
};

render() {
console.log('Render: Ref current value is:', this.inputElementRef.current); // در رندر اولیه هنوز null است
return (
<div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
<h3>فیلد ورودی با فوکوس خودکار</h3>
<label htmlFor="focusInput">نام خود را وارد کنید:</label><br />
<input
id="focusInput"
type="text"
ref={this.inputElementRef} // مرحله ۲: اتصال ref به عنصر <input>
placeholder="نام شما در اینجا..."
style={{ margin: '10px 0', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
/><br />
<button
onClick={this.handleButtonClick}
style={{ padding: '10px 15px', background: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
نمایش مقدار ورودی
</button>
<p><em>این ورودی به طور خودکار هنگام بارگذاری کامپوننت فوکوس دریافت می‌کند.</em></p>
</div>
);
}
}

در این مثال، this.inputElementRef یک شیء است که ری‌اکت به صورت داخلی آن را مدیریت می‌کند. هنگامی که عنصر <input> رندر و در DOM قرار می‌گیرد (mount می‌شود)، ری‌اکت آن گره DOM واقعی را به this.inputElementRef.current اختصاص می‌دهد. متد چرخه حیات componentDidMount مکان ایده‌آلی برای تعامل با ref ها است زیرا تضمین می‌کند که کامپوننت و فرزندان آن به DOM رندر شده‌اند و خاصیت .current در دسترس و مقداردهی شده است.

اتصال Ref به یک عنصر DOM: دسترسی مستقیم به DOM

هنگامی که یک ref را به یک عنصر HTML استاندارد (مانند <div>, <p>, <button>, <img>) متصل می‌کنید، خاصیت .current شیء ref شما، عنصر DOM زیرین واقعی را در خود نگه می‌دارد. این به شما دسترسی نامحدود به تمام API های استاندارد DOM مرورگر را می‌دهد و به شما امکان می‌دهد اقداماتی را انجام دهید که معمولاً خارج از کنترل اعلانی ری‌اکت هستند. این امر به ویژه برای برنامه‌های جهانی که در آن‌ها طرح‌بندی دقیق، اسکرول یا مدیریت فوکوس ممکن است در محیط‌های کاربری و انواع دستگاه‌های مختلف حیاتی باشد، مفید است.

import React from 'react';

class ScrollToElementExample extends React.Component {
constructor(props) {
super(props);
this.targetDivRef = React.createRef();
this.state = { showScrollButton: false };
}

componentDidMount() {
// دکمه اسکرول را فقط در صورتی نشان دهید که محتوای کافی برای اسکرول وجود داشته باشد
// این بررسی همچنین تضمین می‌کند که ref در حال حاضر مقدار دارد.
if (this.targetDivRef.current && window.innerHeight < document.body.scrollHeight) {
this.setState({ showScrollButton: true });
}
}

handleScrollToTarget = () => {
if (this.targetDivRef.current) {
// استفاده از scrollIntoView برای اسکرول روان، که به طور گسترده در مرورگرهای جهانی پشتیبانی می‌شود.
this.targetDivRef.current.scrollIntoView({
behavior: 'smooth', // اسکرول را برای تجربه کاربری بهتر انیمیت می‌کند
block: 'start' // بالای عنصر را با بالای viewport تراز می‌کند
});
console.log('Scrolled to target div!');
} else {
console.warn('Target div not yet available for scrolling.');
}
};

render() {
return (
<div style={{ padding: '15px' }}>
<h2>اسکرول به یک عنصر خاص با Ref</h2>
<p>این مثال نشان می‌دهد چگونه می‌توان به صورت برنامه‌ریزی‌شده به یک عنصر DOM که خارج از صفحه است، اسکرول کرد.</p>

{this.state.showScrollButton && (
<button
onClick={this.handleScrollToTarget}
style={{ marginBottom: '20px', padding: '10px 20px', background: '#28a745', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
اسکرول به پایین به ناحیه هدف
</button>
)}

<div style={{ height: '1500px', background: '#f8f9fa', padding: '20px', marginBottom: '20px', border: '1px dashed #6c757d' }}>
<p>محتوای جایگزین برای ایجاد فضای اسکرول عمودی.</p>
<p>مقالات طولانی، فرم‌های پیچیده، یا داشبوردهای دقیق را تصور کنید که کاربران را ملزم به پیمایش محتوای گسترده می‌کنند. اسکرول برنامه‌ریزی‌شده تضمین می‌کند که کاربران می‌توانند به سرعت به بخش‌های مربوطه بدون تلاش دستی برسند و دسترس‌پذیری و جریان کاربری را در همه دستگاه‌ها و اندازه‌های صفحه بهبود می‌بخشد.</p>
<p>این تکنیک به ویژه در فرم‌های چند صفحه‌ای، ویزاردهای گام به گام، یا برنامه‌های تک صفحه‌ای با ناوبری عمیق مفید است.</p>
</div>

<div
ref={this.targetDivRef} // ref را اینجا متصل کنید
style={{ minHeight: '300px', background: '#e9ecef', padding: '30px', border: '2px solid #007bff', borderRadius: '10px', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}
>
<h3>شما به ناحیه هدف رسیدید!</h3>
<p>این بخشی است که ما به صورت برنامه‌ریزی‌شده به آن اسکرول کردیم.</p>
<p>توانایی کنترل دقیق رفتار اسکرول برای بهبود تجربه کاربری حیاتی است، به ویژه در دستگاه‌های تلفن همراه که فضای صفحه محدود است و ناوبری دقیق اهمیت بالایی دارد.</p>
</div>
</div>
);
}
}

این مثال به زیبایی نشان می‌دهد که چگونه createRef کنترل بر تعاملات سطح مرورگر را فراهم می‌کند. چنین قابلیت‌های اسکرول برنامه‌ریزی‌شده در بسیاری از برنامه‌ها، از پیمایش اسناد طولانی تا هدایت کاربران از طریق گردش‌های کاری پیچیده، حیاتی هستند. گزینه behavior: 'smooth' در scrollIntoView یک انتقال انیمیشنی دلپذیر را تضمین می‌کند و تجربه کاربری را به طور جهانی بهبود می‌بخشد.

اتصال Ref به یک کامپوننت کلاسی: تعامل با نمونه‌ها

علاوه بر عناصر DOM بومی، شما همچنین می‌توانید یک ref را به نمونه‌ای از یک کامپوننت کلاسی متصل کنید. هنگامی که این کار را انجام می‌دهید، خاصیت .current شیء ref شما خود کامپوننت کلاسی نمونه‌سازی شده را نگه می‌دارد. این به یک کامپوننت والد اجازه می‌دهد تا متدهای تعریف شده در کامپوننت کلاسی فرزند را مستقیماً فراخوانی کند یا به خواص نمونه آن دسترسی پیدا کند. در حالی که این قابلیت قدرتمند است، باید با احتیاط شدید استفاده شود، زیرا اجازه می‌دهد جریان داده یک‌طرفه سنتی شکسته شود و به طور بالقوه منجر به رفتار برنامه کمتر قابل پیش‌بینی شود.

import React from 'react';

// کامپوننت کلاسی فرزند
class DialogBox extends React.Component {
constructor(props) {
super(props);
this.state = { isOpen: false, message: '' };
}

// متدی که از طریق ref به والد در معرض نمایش قرار می‌گیرد
open(message) {
this.setState({ isOpen: true, message });
}

close = () => {
this.setState({ isOpen: false, message: '' });
};

render() {
if (!this.state.isOpen) return null;

return (
<div style={{ position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', padding: '25px 35px', background: 'white', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 5px 15px rgba(0,0,0,0.2)', zIndex: 1000, maxWidth: '400px', width: '90%', textAlign: 'center' }}>
<h4>پیام از والد</h4>
<p>{this.state.message}</p>
<button
onClick={this.close}
style={{ marginTop: '15px', padding: '8px 15px', background: '#dc3545', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
بستن
</button>
</div>
);
}
}

// کامپوننت کلاسی والد
class AppWithDialog extends React.Component {
constructor(props) {
super(props);
this.dialogRef = React.createRef();
}

handleOpenDialog = () => {
if (this.dialogRef.current) {
// دسترسی به نمونه کامپوننت فرزند و فراخوانی متد 'open' آن
this.dialogRef.current.open('سلام از کامپوننت والد! این دیالوگ به صورت دستوری باز شد.');
}
};

render() {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>ارتباط والد-فرزند از طریق Ref</h2>
<p>این مثال نشان می‌دهد که چگونه یک کامپوننت والد می‌تواند به صورت دستوری یک متد از کامپوننت کلاسی فرزند خود را کنترل کند.</p>
<button
onClick={this.handleOpenDialog}
style={{ padding: '12px 25px', background: '#007bff', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', fontSize: '1.1em' }}
>
باز کردن دیالوگ دستوری
</button>
<DialogBox ref={this.dialogRef} /> // اتصال ref به نمونه کامپوننت کلاسی
</div>
);
}
}

در اینجا، AppWithDialog می‌تواند مستقیماً متد open کامپوننت DialogBox را از طریق ref آن فراخوانی کند. این الگو می‌تواند برای راه‌اندازی اقداماتی مانند نمایش یک modal، بازنشانی یک فرم، یا کنترل برنامه‌ریزی‌شده عناصر UI خارجی که در یک کامپوننت فرزند کپسوله شده‌اند، مفید باشد. با این حال، به طور کلی توصیه می‌شود که برای اکثر سناریوها از ارتباط مبتنی بر prop استفاده شود، و داده‌ها و callback ها را از والد به فرزند منتقل کنید تا یک جریان داده واضح و قابل پیش‌بینی حفظ شود. فقط زمانی به ref ها برای متدهای کامپوننت فرزند متوسل شوید که آن اقدامات واقعاً دستوری باشند و در جریان معمول prop/state قرار نگیرند.

اتصال Ref به یک کامپوننت تابعی (یک تمایز حیاتی)

این یک تصور غلط رایج و یک نکته مهم تمایز است که شما نمی‌توانید مستقیماً یک ref را با استفاده از createRef() به یک کامپوننت تابعی متصل کنید. کامپوننت‌های تابعی، به دلیل ماهیتشان، به همان شکلی که کامپوننت‌های کلاسی نمونه (instance) دارند، نمونه ندارند. اگر تلاش کنید یک ref را مستقیماً به یک کامپوننت تابعی اختصاص دهید (مانند <MyFunctionalComponent ref={this.myRef} />)، ری‌اکت در حالت توسعه یک هشدار صادر می‌کند زیرا هیچ نمونه کامپوننتی برای اختصاص به .current وجود ندارد.

اگر هدف شما این است که یک کامپوننت والد (که ممکن است یک کامپوننت کلاسی با استفاده از createRef، یا یک کامپوننت تابعی با استفاده از useRef باشد) به یک عنصر DOM رندر شده در داخل یک کامپوننت فرزند تابعی دسترسی پیدا کند، باید از React.forwardRef استفاده کنید. این کامپوننت مرتبه بالاتر (higher-order component) به کامپوننت‌های تابعی اجازه می‌دهد تا یک ref را به یک گره DOM خاص یا یک handle دستوری در درون خودشان در معرض نمایش قرار دهند.

به طور جایگزین، اگر شما درون یک کامپوننت تابعی کار می‌کنید و نیاز به ایجاد و مدیریت یک ref دارید، مکانیسم مناسب هوک useRef است که به طور خلاصه در بخش مقایسه بعدی مورد بحث قرار خواهد گرفت. بسیار مهم است که به یاد داشته باشید که createRef اساساً به کامپوننت‌های کلاسی و ماهیت مبتنی بر نمونه آن‌ها گره خورده است.

دسترسی به گره DOM یا نمونه کامپوننت: توضیح خاصیت `.current`

هسته تعامل با ref حول خاصیت .current شیء ref ایجاد شده توسط React.createRef() می‌چرخد. درک چرخه حیات آن و اینکه چه چیزی می‌تواند در خود نگه دارد، برای مدیریت مؤثر ref بسیار مهم است.

خاصیت `.current`: دروازه شما به کنترل دستوری

خاصیت .current یک شیء قابل تغییر است که ری‌اکت آن را مدیریت می‌کند. این به عنوان پیوند مستقیم به عنصر یا نمونه کامپوننت ارجاع داده شده عمل می‌کند. مقدار آن در طول چرخه حیات کامپوننت تغییر می‌کند:

• مقداردهی اولیه: هنگامی که برای اولین بار React.createRef() را در سازنده فراخوانی می‌کنید، شیء ref ایجاد می‌شود و خاصیت .current آن با null مقداردهی اولیه می‌شود. این به این دلیل است که در این مرحله، کامپوننت هنوز رندر نشده است و هیچ عنصر DOM یا نمونه کامپوننتی برای ارجاع ref وجود ندارد.
• Mounting: هنگامی که کامپوننت به DOM رندر می‌شود و عنصر با ویژگی ref ایجاد می‌شود، ری‌اکت گره DOM واقعی یا نمونه کامپوننت کلاسی را به خاصیت .current شیء ref شما اختصاص می‌دهد. این معمولاً بلافاصله پس از تکمیل متد render و قبل از فراخوانی componentDidMount اتفاق می‌افتد. بنابراین، componentDidMount امن‌ترین و رایج‌ترین مکان برای دسترسی و تعامل با .current است.
• Unmounting: هنگامی که کامپوننت از DOM حذف می‌شود (unmount)، ری‌اکت به طور خودکار خاصیت .current را به null بازنشانی می‌کند. این برای جلوگیری از نشت حافظه و اطمینان از اینکه برنامه شما ارجاع‌هایی به عناصری که دیگر در DOM وجود ندارند را نگه نمی‌دارد، حیاتی است.
• به‌روزرسانی: در موارد نادری که ویژگی ref روی یک عنصر در طول یک به‌روزرسانی تغییر می‌کند، خاصیت current ref قدیمی قبل از اینکه خاصیت current ref جدید تنظیم شود، به null تنظیم می‌شود. این رفتار کمتر رایج است اما برای انتساب‌های ref دینامیک پیچیده، دانستن آن مهم است.

import React from 'react';

class RefLifecycleLogger extends React.Component {
constructor(props) {
super(props);
this.myDivRef = React.createRef();
console.log('1. Constructor: this.myDivRef.current is', this.myDivRef.current); // null
}

componentDidMount() {
console.log('3. componentDidMount: this.myDivRef.current is', this.myDivRef.current); // عنصر واقعی DOM
if (this.myDivRef.current) {
this.myDivRef.current.style.backgroundColor = '#d4edda'; // استایل دهی دستوری برای نمایش
this.myDivRef.current.innerText += ' - Ref فعال است!';
}
}

componentDidUpdate(prevProps, prevState) {
console.log('4. componentDidUpdate: this.myDivRef.current is', this.myDivRef.current); // عنصر واقعی DOM (پس از به‌روزرسانی‌ها)
}

componentWillUnmount() {
console.log('5. componentWillUnmount: this.myDivRef.current is', this.myDivRef.current); // عنصر واقعی DOM (درست قبل از null شدن)
// در این نقطه، ممکن است در صورت لزوم پاکسازی انجام دهید
}

render() {
// در رندر اولیه، this.myDivRef.current هنوز null است زیرا DOM هنوز ایجاد نشده است.
// در رندرهای بعدی (پس از mount)، آن عنصر را نگه می‌دارد.
console.log('2. Render: this.myDivRef.current is', this.myDivRef.current);
return (
<div
ref={this.myDivRef}
style={{ padding: '20px', border: '1px solid #28a745', margin: '20px', minHeight: '80px', display: 'flex', alignItems: 'center' }}
>
<p>این یک div است که یک ref به آن متصل شده است.</p>
</div>
);
}
}

مشاهده خروجی کنسول برای RefLifecycleLogger بینش روشنی در مورد زمان در دسترس قرار گرفتن this.myDivRef.current ارائه می‌دهد. بسیار مهم است که همیشه قبل از تلاش برای تعامل با آن، بررسی کنید که آیا this.myDivRef.current برابر با null نیست، به خصوص در متدهایی که ممکن است قبل از mount یا پس از unmount اجرا شوند.

چه چیزی می‌تواند در `.current` قرار گیرد؟ کاوش در محتویات Ref شما

نوع مقداری که current نگه می‌دارد به این بستگی دارد که ref را به چه چیزی متصل می‌کنید:

• هنگامی که به یک عنصر HTML متصل می‌شود (مانند <div>, <input>): خاصیت .current حاوی عنصر DOM زیرین واقعی خواهد بود. این یک شیء جاوا اسکریپت بومی است که دسترسی به طیف کامل API های DOM آن را فراهم می‌کند. به عنوان مثال، اگر یک ref را به یک <input type="text"> متصل کنید، .current یک شیء HTMLInputElement خواهد بود که به شما امکان می‌دهد متدهایی مانند .focus() را فراخوانی کنید، خواصی مانند .value را بخوانید، یا ویژگی‌هایی مانند .placeholder را تغییر دهید. این رایج‌ترین مورد استفاده برای ref ها است.

  this.inputRef.current.focus();
  this.videoRef.current.play();
  const { width, height } = this.divRef.current.getBoundingClientRect();

• هنگامی که به یک کامپوننت کلاسی متصل می‌شود (مانند <MyClassComponent />): خاصیت .current نمونه آن کامپوننت کلاسی را نگه می‌دارد. این بدان معناست که شما می‌توانید مستقیماً متدهای تعریف شده در آن کامپوننت فرزند را فراخوانی کنید (مانند childRef.current.someMethod()) یا حتی به state یا props آن دسترسی پیدا کنید (اگرچه دسترسی مستقیم به state/props از یک فرزند از طریق ref به طور کلی به نفع props و به‌روزرسانی‌های state توصیه نمی‌شود). این قابلیت برای راه‌اندازی رفتارهای خاص در کامپوننت‌های فرزند که در مدل تعامل مبتنی بر prop استاندارد قرار نمی‌گیرند، قدرتمند است.

  this.childComponentRef.current.resetForm();
  // به ندرت، اما ممکن است: console.log(this.childComponentRef.current.state.someValue);

• هنگامی که به یک کامپوننت تابعی متصل می‌شود (از طریق forwardRef): همانطور که قبلاً ذکر شد، ref ها را نمی‌توان مستقیماً به کامپوننت‌های تابعی متصل کرد. با این حال، اگر یک کامپوننت تابعی با React.forwardRef پیچیده شده باشد، آنگاه خاصیت .current هر مقداری را که کامپوننت تابعی به صراحت از طریق ref ارسال شده در معرض نمایش قرار می‌دهد، نگه می‌دارد. این معمولاً یک عنصر DOM در داخل کامپوننت تابعی است، یا یک شیء حاوی متدهای دستوری (با استفاده از هوک useImperativeHandle در ترکیب با forwardRef).

  // در والد، myForwardedRef.current گره DOM یا شیء در معرض نمایش قرار گرفته خواهد بود
  this.myForwardedRef.current.focus();
  this.myForwardedRef.current.customResetMethod();

موارد استفاده عملی برای `createRef` در عمل

برای درک واقعی سودمندی React.createRef()، بیایید سناریوهای دقیق‌تر و مرتبط جهانی را بررسی کنیم که در آن‌ها این ابزار ضروری است و فراتر از مدیریت ساده فوکوس می‌رود.

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

این‌ها نمونه‌های بارز تعاملات UI دستوری هستند. یک فرم چند مرحله‌ای را تصور کنید که برای مخاطبان جهانی طراحی شده است. پس از اینکه کاربر یک بخش را تکمیل کرد، ممکن است بخواهید فوکوس را به طور خودکار به اولین ورودی بخش بعدی منتقل کنید، صرف نظر از زبان یا جهت متن پیش‌فرض (چپ به راست یا راست به چپ). Ref ها کنترل لازم را فراهم می‌کنند.

import React from 'react';

class DynamicFocusForm extends React.Component {
constructor(props) {
super(props);
this.firstNameRef = React.createRef();
this.lastNameRef = React.createRef();
this.emailRef = React.createRef();
this.state = { currentStep: 1 };
}

componentDidMount() {
// فوکوس روی اولین ورودی هنگام mount شدن کامپوننت
this.firstNameRef.current.focus();
}

handleNextStep = (nextRef) => {
this.setState(prevState => ({ currentStep: prevState.currentStep + 1 }), () => {
// پس از به‌روزرسانی state و رندر مجدد کامپوننت، روی ورودی بعدی فوکوس کنید
if (nextRef.current) {
nextRef.current.focus();
}
});
};

render() {
const { currentStep } = this.state;
const formSectionStyle = { border: '1px solid #0056b3', padding: '20px', margin: '15px 0', borderRadius: '8px', background: '#e7f0fa' };
const inputStyle = { width: '100%', padding: '10px', margin: '8px 0', border: '1px solid #ccc', borderRadius: '4px' };
const buttonStyle = { padding: '10px 20px', background: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginTop: '10px' };

return (
<div style={{ maxWidth: '600px', margin: '30px auto', padding: '25px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', borderRadius: '10px', background: 'white' }}>
<h2>فرم چند مرحله‌ای با فوکوس مدیریت شده توسط Ref</h2>
<p>مرحله فعلی: <strong>{currentStep}</strong></p>

{currentStep === 1 && (
<div style={formSectionStyle}>
<h3>اطلاعات شخصی</h3>
<label htmlFor="firstName">نام:</label>
<input id="firstName" type="text" ref={this.firstNameRef} style={inputStyle} placeholder="مثال: علی" />

<label htmlFor="lastName">نام خانوادگی:</label>
<input id="lastName" type="text" ref={this.lastNameRef} style={inputStyle} placeholder="مثال: رضایی" />

<button onClick={() => this.handleNextStep(this.emailRef)} style={buttonStyle}>بعدی &rarr;</button>
</div>
)}

{currentStep === 2 && (
<div style={formSectionStyle}>
<h3>اطلاعات تماس</h3>
<label htmlFor="email">ایمیل:</label>
<input id="email" type="email" ref={this.emailRef} style={inputStyle} placeholder="مثال: ali.rezaei@example.com" />

<p>... سایر فیلدهای تماس ...</p>

<button onClick={() => alert('فرم ارسال شد!')} style={buttonStyle}>ارسال</button>
</div>
)}

<p><em>این تعامل به طور قابل توجهی دسترس‌پذیری و تجربه کاربری را بهبود می‌بخشد، به ویژه برای کاربرانی که به ناوبری با صفحه‌کلید یا فناوری‌های کمکی در سطح جهانی متکی هستند.</em></p>
</div>
);
}
}

این مثال یک فرم چند مرحله‌ای عملی را نشان می‌دهد که در آن از createRef برای مدیریت برنامه‌ریزی‌شده فوکوس استفاده می‌شود. این امر یک سفر کاربری روان و قابل دسترس را تضمین می‌کند، که یک ملاحظه حیاتی برای برنامه‌هایی است که در زمینه‌های زبانی و فرهنگی متنوع استفاده می‌شوند. به طور مشابه، برای پخش‌کننده‌های رسانه، ref ها به شما امکان می‌دهند کنترل‌های سفارشی (پخش، توقف، حجم، جستجو) بسازید که مستقیماً با API های بومی عناصر <video> یا <audio> HTML5 تعامل دارند و تجربه‌ای یکنواخت و مستقل از پیش‌فرض‌های مرورگر فراهم می‌کنند.

۲. راه‌اندازی انیمیشن‌های دستوری و تعاملات Canvas

در حالی که کتابخانه‌های انیمیشن اعلانی برای بسیاری از افکت‌های UI عالی هستند، برخی از انیمیشن‌های پیشرفته، به ویژه آن‌هایی که از HTML5 Canvas API، WebGL استفاده می‌کنند، یا نیاز به کنترل دقیق بر ویژگی‌های عنصر دارند که بهتر است خارج از چرخه رندر ری‌اکت مدیریت شوند، از ref ها بهره زیادی می‌برند. به عنوان مثال، ایجاد یک تجسم داده بلادرنگ یا یک بازی روی یک عنصر Canvas شامل ترسیم مستقیم روی یک بافر پیکسلی است، که یک فرآیند ذاتاً دستوری است.

import React from 'react';

class CanvasAnimator extends React.Component {
constructor(props) {
super(props);
this.canvasRef = React.createRef();
this.animationFrameId = null;
}

componentDidMount() {
this.startAnimation();
}

componentWillUnmount() {
this.stopAnimation();
}

startAnimation = () => {
const canvas = this.canvasRef.current;
if (!canvas) return;

const ctx = canvas.getContext('2d');
let angle = 0;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;

const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height); // پاک کردن canvas

// ترسیم یک مربع چرخان
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(angle);
ctx.fillStyle = '#6f42c1';
ctx.fillRect(-radius / 2, -radius / 2, radius, radius);
ctx.restore();

angle += 0.05; // افزایش زاویه برای چرخش

this.animationFrameId = requestAnimationFrame(animate);
};

this.animationFrameId = requestAnimationFrame(animate);
};

stopAnimation = () => {
if (this.animationFrameId) {
cancelAnimationFrame(this.animationFrameId);
}
};

render() {
return (
<div style={{ textAlign: 'center', margin: '30px auto', border: '1px solid #ced4da', padding: '20px', borderRadius: '8px', background: '#f8f9fa' }}>
<h3>انیمیشن دستوری Canvas با createRef</h3>
<p>این انیمیشن canvas مستقیماً با استفاده از APIهای مرورگر از طریق یک ref کنترل می‌شود.</p>
<canvas ref={this.canvasRef} width="300" height="200" style={{ border: '1px solid #adb5bd', background: 'white' }}>
مرورگر شما از تگ canvas HTML5 پشتیبانی نمی‌کند.
</canvas>
<p><em>چنین کنترل مستقیمی برای گرافیک‌های با کارایی بالا، بازی‌ها، یا تجسم‌های داده تخصصی که در صنایع مختلف جهانی استفاده می‌شوند، حیاتی است.</em></p>
</div>
);
}
}

این کامپوننت یک عنصر canvas را فراهم می‌کند و از یک ref برای به دست آوردن دسترسی مستقیم به زمینه رندرینگ 2D آن استفاده می‌کند. حلقه انیمیشن، که توسط `requestAnimationFrame` قدرت می‌گیرد، سپس به صورت دستوری یک مربع چرخان را ترسیم و به‌روز می‌کند. این الگو برای ساخت داشبوردهای داده تعاملی، ابزارهای طراحی آنلاین، یا حتی بازی‌های ساده که نیاز به رندر دقیق فریم به فریم دارند، صرف نظر از موقعیت جغرافیایی کاربر یا قابلیت‌های دستگاه، بنیادی است.

۳. ادغام با کتابخانه‌های DOM شخص ثالث: یک پل یکپارچه

یکی از قانع‌کننده‌ترین دلایل برای استفاده از ref ها، ادغام ری‌اکت با کتابخانه‌های جاوا اسکریپت خارجی است که مستقیماً DOM را دستکاری می‌کنند. بسیاری از کتابخانه‌های قدرتمند، به ویژه قدیمی‌ترها یا آن‌هایی که بر روی وظایف رندر خاص (مانند نمودارها، نقشه‌برداری، یا ویرایش متن غنی) متمرکز هستند، با گرفتن یک عنصر DOM به عنوان هدف و سپس مدیریت محتوای آن توسط خودشان عمل می‌کنند. ری‌اکت، در حالت اعلانی خود، در غیر این صورت با تلاش برای کنترل همان زیردرخت DOM با این کتابخانه‌ها تضاد پیدا می‌کرد. Ref ها با فراهم کردن یک 'کانتینر' مشخص برای کتابخانه خارجی، از این تضاد جلوگیری می‌کنند.

import React from 'react';
import * as d3 from 'd3'; // با فرض اینکه D3.js نصب و وارد شده است

class D3BarChart extends React.Component {
constructor(props) {
super(props);
this.chartContainerRef = React.createRef();
}

// وقتی کامپوننت mount می‌شود، نمودار را ترسیم کنید
componentDidMount() {
this.drawChart();
}

// وقتی کامپوننت به‌روز می‌شود (مثلاً props.data تغییر می‌کند)، نمودار را به‌روز کنید
componentDidUpdate(prevProps) {
if (prevProps.data !== this.props.data) {
this.drawChart();
}
}

// وقتی کامپوننت unmount می‌شود، عناصر D3 را برای جلوگیری از نشت حافظه پاکسازی کنید
componentWillUnmount() {
d3.select(this.chartContainerRef.current).selectAll('*').remove();
}

drawChart = () => {
const data = this.props.data || [40, 80, 20, 100, 60, 90]; // داده‌های پیش‌فرض
const node = this.chartContainerRef.current;
if (!node) return; // اطمینان حاصل کنید که ref در دسترس است

// هر عنصر نمودار قبلی که توسط D3 ترسیم شده را پاک کنید
d3.select(node).selectAll('*').remove();

const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 460 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;

const svg = d3.select(node)
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);

// تنظیم مقیاس‌ها
const x = d3.scaleBand()
.range([0, width])
.padding(0.1);

const y = d3.scaleLinear()
.range([height, 0]);

x.domain(data.map((d, i) => i)); // استفاده از ایندکس به عنوان دامنه برای سادگی
y.domain([0, d3.max(data)]);

// افزودن ستون‌ها
svg.selectAll('.bar')
.data(data)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', (d, i) => x(i))
.attr('width', x.bandwidth())
.attr('y', d => y(d))
.attr('height', d => height - y(d))
.attr('fill', '#17a2b8');

// افزودن محور X
svg.append('g')
.attr('transform', `translate(0,${height})`)
.call(d3.axisBottom(x));

// افزودن محور Y
svg.append('g')
.call(d3.axisLeft(y));
};

render() {
return (
<div style={{ textAlign: 'center', margin: '30px auto', border: '1px solid #00a0b2', padding: '20px', borderRadius: '8px', background: '#e0f7fa' }}>
<h3>ادغام نمودار D3.js با React createRef</h3>
<p>این تجسم داده توسط D3.js در یک کانتینر مدیریت شده توسط ری‌اکت رندر می‌شود.</p>
<div ref={this.chartContainerRef} /> // D3.js در این div رندر خواهد شد
<p><em>ادغام چنین کتابخانه‌های تخصصی برای برنامه‌های سنگین داده حیاتی است و ابزارهای تحلیلی قدرتمندی را برای کاربران در صنایع و مناطق مختلف فراهم می‌کند.</em></p>
</div>
);
}
}

این مثال گسترده، ادغام یک نمودار میله‌ای D3.js را در یک کامپوننت کلاسی ری‌اکت نشان می‌دهد. chartContainerRef به D3.js گره DOM خاصی را که برای انجام رندرینگ خود نیاز دارد، فراهم می‌کند. ری‌اکت چرخه حیات کانتینر <div> را مدیریت می‌کند، در حالی که D3.js محتوای داخلی آن را مدیریت می‌کند. متدهای `componentDidUpdate` و `componentWillUnmount` برای به‌روزرسانی نمودار هنگام تغییر داده‌ها و برای انجام پاکسازی لازم، جلوگیری از نشت حافظه و تضمین یک تجربه واکنش‌گرا حیاتی هستند. این الگو به طور جهانی قابل اجرا است و به توسعه‌دهندگان اجازه می‌دهد تا از بهترین‌های مدل کامپوننت ری‌اکت و کتابخانه‌های تجسم تخصصی و با کارایی بالا برای داشبوردهای جهانی و پلتفرم‌های تحلیلی استفاده کنند.

۴. اندازه‌گیری ابعاد یا موقعیت عنصر برای طرح‌بندی‌های دینامیک

برای طرح‌بندی‌های بسیار دینامیک یا واکنش‌گرا، یا برای پیاده‌سازی ویژگی‌هایی مانند لیست‌های مجازی که فقط آیتم‌های قابل مشاهده را رندر می‌کنند، دانستن ابعاد و موقعیت دقیق عناصر حیاتی است. Ref ها به شما امکان می‌دهند به متد getBoundingClientRect() دسترسی پیدا کنید، که این اطلاعات حیاتی را مستقیماً از DOM فراهم می‌کند.

import React from 'react';

class ElementDimensionLogger extends React.Component {
constructor(props) {
super(props);
this.measurableDivRef = React.createRef();
this.state = {
width: 0,
height: 0,
top: 0,
left: 0,
message: 'برای اندازه‌گیری روی دکمه کلیک کنید!'
};
}

componentDidMount() {
// اندازه‌گیری اولیه اغلب مفید است، اما می‌تواند توسط عمل کاربر نیز فعال شود
this.measureElement();
// برای طرح‌بندی‌های دینامیک، ممکن است به رویدادهای تغییر اندازه پنجره گوش دهید
window.addEventListener('resize', this.measureElement);
}

componentWillUnmount() {
window.removeEventListener('resize', this.measureElement);
}

measureElement = () => {
if (this.measurableDivRef.current) {
const rect = this.measurableDivRef.current.getBoundingClientRect();
this.setState({
width: Math.round(rect.width),
height: Math.round(rect.height),
top: Math.round(rect.top),
left: Math.round(rect.left),
message: 'ابعاد به‌روز شد.'
});
} else {
this.setState({ message: 'عنصر هنوز رندر نشده است.' });
}
};

render() {
const { width, height, top, left, message } = this.state;
const boxStyle = {
width: '70%',
minHeight: '150px', border: '3px solid #ffc107', margin: '25px auto', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', background: '#fff3cd', borderRadius: '8px', textAlign: 'center' };
return (
<div style={{ maxWidth: '700px', margin: '30px auto', padding: '25px', boxShadow: '0 4px 12px rgba(0,0,0,0.08)', borderRadius: '10px', background: 'white' }}>
<h3>اندازه‌گیری ابعاد عنصر با createRef</h3>
<p>این مثال به صورت دینامیک اندازه و موقعیت یک عنصر هدف را دریافت و نمایش می‌دهد.</p>
<div ref={this.measurableDivRef} style={boxStyle}>
<p><strong>من عنصری هستم که اندازه‌گیری می‌شود.</strong></p>
<p>پنجره مرورگر خود را تغییر اندازه دهید تا ببینید اندازه‌گیری‌ها در هنگام تازه‌سازی/فعال‌سازی دستی تغییر می‌کنند.</p>
</div>
<button
onClick={this.measureElement}
style={{ padding: '10px 20px', background: '#6c757d', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginBottom: '15px' }}
>
اکنون اندازه‌گیری کن
</button>
<div style={{ background: '#f0f0f0', padding: '15px', borderRadius: '6px' }}>
<p><strong>ابعاد زنده:</strong></p>
<ul style={{ listStyleType: 'none', padding: 0, textAlign: 'left', margin: '0 auto', maxWidth: '300px' }}>
<li>عرض: <b>{width}px</b></li>
<li>ارتفاع: <b>{height}px</b></li>
<li>موقعیت بالا (Viewport): <b>{top}px</b></li>
<li>موقعیت چپ (Viewport): <b>{left}px</b></li>
</ul>
<p><em>اندازه‌گیری دقیق عنصر برای طراحی‌های واکنش‌گرا و بهینه‌سازی عملکرد در دستگاه‌های متنوع جهانی حیاتی است.</em></p>
</div>
</div>
);
}
}

این کامپوننت از createRef برای به دست آوردن getBoundingClientRect() یک عنصر div استفاده می‌کند و ابعاد و موقعیت بلادرنگ آن را فراهم می‌کند. این اطلاعات برای پیاده‌سازی تنظیمات پیچیده طرح‌بندی، تعیین قابلیت مشاهده در یک لیست اسکرول مجازی، یا حتی برای اطمینان از اینکه عناصر در یک ناحیه viewport خاص قرار دارند، بسیار ارزشمند است. برای مخاطبان جهانی، که در آن اندازه‌های صفحه، رزولوشن‌ها و محیط‌های مرورگر به شدت متفاوت است، کنترل دقیق طرح‌بندی بر اساس اندازه‌گیری‌های واقعی DOM یک عامل کلیدی در ارائه یک تجربه کاربری یکنواخت و با کیفیت بالا است.

بهترین شیوه‌ها و نکات مهم برای استفاده از `createRef`

در حالی که createRef کنترل دستوری قدرتمندی را ارائه می‌دهد، استفاده نادرست از آن می‌تواند منجر به کدی شود که مدیریت و اشکال‌زدایی آن دشوار است. پایبندی به بهترین شیوه‌ها برای بهره‌برداری مسئولانه از قدرت آن ضروری است.

۱. اولویت‌بندی رویکردهای اعلانی: قانون طلایی

همیشه به یاد داشته باشید که ref ها یک «راه فرار» هستند، نه حالت اصلی تعامل در ری‌اکت. قبل از اینکه به سراغ یک ref بروید، از خود بپرسید: آیا این کار را می‌توان با state و props انجام داد؟ اگر پاسخ مثبت است، آن تقریباً همیشه رویکرد بهتر و «ری‌اکت-ایدیوماتیک» است. به عنوان مثال، اگر می‌خواهید مقدار یک ورودی را تغییر دهید، از کامپوننت‌های کنترل‌شده با state استفاده کنید، نه یک ref برای تنظیم مستقیم inputRef.current.value.

۲. Ref ها برای تعاملات دستوری هستند، نه مدیریت State

Ref ها برای وظایفی که شامل اقدامات مستقیم و دستوری بر روی عناصر DOM یا نمونه‌های کامپوننت هستند، مناسب‌ترند. آن‌ها دستوراتی هستند: «این ورودی را فوکوس کن»، «این ویدیو را پخش کن»، «به این بخش اسکرول کن». آن‌ها برای تغییر UI اعلانی یک کامپوننت بر اساس state در نظر گرفته نشده‌اند. دستکاری مستقیم استایل یا محتوای یک عنصر از طریق یک ref زمانی که آن را می‌توان با props یا state کنترل کرد، می‌تواند منجر به ناهماهنگی DOM مجازی ری‌اکت با DOM واقعی شود و باعث رفتار غیرقابل پیش‌بینی و مشکلات رندرینگ شود.

۳. Ref ها و کامپوننت‌های تابعی: از `useRef` و `forwardRef` استقبال کنید

برای توسعه مدرن ری‌اکت در کامپوننت‌های تابعی، React.createRef() ابزاری نیست که شما استفاده خواهید کرد. در عوض، شما به هوک useRef تکیه خواهید کرد. هوک useRef یک شیء ref قابل تغییر مشابه createRef را فراهم می‌کند که خاصیت .current آن را می‌توان برای همان تعاملات دستوری استفاده کرد. این هوک مقدار خود را در طول رندرهای مجدد کامپوننت حفظ می‌کند بدون اینکه خود باعث رندر مجدد شود، که آن را برای نگهداری ارجاع به یک گره DOM یا هر مقدار قابل تغییری که نیاز به پایداری در طول رندرها دارد، عالی می‌سازد.

import React, { useRef, useEffect } from 'react';

function FunctionalComponentWithRef() {
const myInputRef = useRef(null); // با null مقداردهی اولیه کنید

useEffect(() => {
// این پس از mount شدن کامپوننت اجرا می‌شود
if (myInputRef.current) {
myInputRef.current.focus();
console.log('Functional component input focused!');
}
}, []); // آرایه وابستگی خالی تضمین می‌کند که فقط یک بار در mount اجرا می‌شود

const handleLogValue = () => {
if (myInputRef.current) {
alert(`Input value: ${myInputRef.current.value}`);
}
};

return (
<div style={{ margin: '20px', padding: '20px', border: '1px solid #009688', borderRadius: '8px', background: '#e0f2f1' }}>
<h3>استفاده از useRef در یک کامپوننت تابعی</h3>
<label htmlFor="funcInput">چیزی تایپ کنید:</label><br />
<input id="funcInput" type="text" ref={myInputRef} placeholder="من به طور خودکار فوکوس می‌شوم!" style={{ padding: '8px', margin: '10px 0', borderRadius: '4px', border: '1px solid #ccc' }} /><br />
<button onClick={handleLogValue} style={{ padding: '10px 15px', background: '#009688', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>
ثبت مقدار ورودی
</button>
<p><em>برای پروژه‌های جدید، `useRef` انتخاب ایدیوماتیک برای ref ها در کامپوننت‌های تابعی است.</em></p>
</div>
);
}

اگر نیاز دارید که یک کامپوننت والد یک ref به یک عنصر DOM داخل یک کامپوننت فرزند تابعی را به دست آورد، آنگاه React.forwardRef راه‌حل شماست. این یک کامپوننت مرتبه بالاتر است که به شما امکان می‌دهد یک ref را از یک والد به یکی از عناصر DOM فرزندانش «ارسال» کنید، در حالی که کپسوله‌سازی کامپوننت تابعی را حفظ کرده و در عین حال دسترسی دستوری را در صورت نیاز فعال می‌کند.

import React, { useRef, useEffect } from 'react';

// کامپوننت تابعی که به صراحت یک ref را به عنصر input بومی خود ارسال می‌کند
const ForwardedInput = React.forwardRef((props, ref) => (
<input type="text" ref={ref} className="forwarded-input" placeholder={props.placeholder} style={{ padding: '10px', margin: '8px 0', border: '1px solid #ccc', borderRadius: '4px', width: '100%' }} />
));

class ParentComponentUsingForwardRef extends React.Component {
constructor(props) {
super(props);
this.parentInputRef = React.createRef();
}

componentDidMount() {
if (this.parentInputRef.current) {
this.parentInputRef.current.focus();
console.log('Input inside functional component focused from parent (class component) via forwarded ref!');
}
}

render() {
return (
<div style={{ margin: '20px', padding: '20px', border: '1px solid #6f42c1', borderRadius: '8px', background: '#f5eef9' }}>
<h3>مثال ارسال Ref با createRef (کامپوننت والد کلاسی)</h3>
<label>جزئیات را وارد کنید:</label>
<ForwardedInput ref={this.parentInputRef} placeholder="این ورودی داخل یک کامپوننت تابعی است" />
<p><em>این الگو برای ایجاد کتابخانه‌های کامپوننت قابل استفاده مجدد که نیاز به افشای دسترسی مستقیم به DOM دارند، حیاتی است.</em></p>
</div>
);
}
}

این نشان می‌دهد که چگونه یک کامپوننت کلاسی با استفاده از createRef می‌تواند به طور مؤثر با یک عنصر DOM که در یک کامپوننت تابعی قرار دارد، با استفاده از forwardRef تعامل داشته باشد. این باعث می‌شود کامپوننت‌های تابعی نیز در صورت نیاز قادر به شرکت در تعاملات دستوری باشند و اطمینان می‌دهد که کدهای مدرن ری‌اکت همچنان می‌توانند از ref ها بهره‌مند شوند.

۴. چه زمانی از Ref ها استفاده نکنیم: حفظ یکپارچگی ری‌اکت

• برای کنترل state کامپوننت فرزند: هرگز از یک ref برای خواندن یا به‌روزرسانی مستقیم state یک کامپوننت فرزند استفاده نکنید. این کار مدیریت state ری‌اکت را دور می‌زند و برنامه شما را غیرقابل پیش‌بینی می‌کند. در عوض، state را به عنوان props به پایین ارسال کنید و از callback ها برای اجازه دادن به فرزندان برای درخواست تغییرات state از والدین استفاده کنید.
• به عنوان جایگزینی برای props: در حالی که شما می‌توانید متدهایی را روی یک کامپوننت کلاسی فرزند از طریق یک ref فراخوانی کنید، در نظر بگیرید که آیا ارسال یک event handler به عنوان prop به فرزند، همان هدف را به روشی «ری‌اکت-ایدیوماتیک»تر به دست می‌آورد یا خیر. Props جریان داده واضح را ترویج می‌کند و تعاملات کامپوننت را شفاف می‌سازد.
• برای دستکاری‌های ساده DOM که ری‌اکت می‌تواند انجام دهد: اگر می‌خواهید متن، استایل یک عنصر را تغییر دهید، یا یک کلاس را بر اساس state اضافه/حذف کنید، آن را به صورت اعلانی انجام دهید. به عنوان مثال، برای تغییر یک کلاس active، آن را به صورت شرطی در JSX اعمال کنید: <div className={isActive ? 'active' : ''}>، به جای divRef.current.classList.add('active').

۵. ملاحظات عملکرد و دسترسی جهانی

در حالی که createRef خود عملکرد بالایی دارد، عملیاتی که با استفاده از current انجام می‌شود می‌تواند پیامدهای عملکردی قابل توجهی داشته باشد. برای کاربران با دستگاه‌های ضعیف‌تر یا اتصالات شبکه کندتر (که در بسیاری از نقاط جهان رایج است)، دستکاری‌های ناکارآمد DOM می‌تواند منجر به پرش، UI های غیرواکنش‌گرا و تجربه کاربری ضعیف شود. هنگام استفاده از ref ها برای وظایفی مانند انیمیشن‌ها، محاسبات پیچیده طرح‌بندی، یا ادغام کتابخانه‌های سنگین شخص ثالث:

• Debounce/Throttle کردن رویدادها: اگر از ref ها برای اندازه‌گیری ابعاد در رویدادهای window.resize یا scroll استفاده می‌کنید، اطمینان حاصل کنید که این هندلرها debounced یا throttled شده‌اند تا از فراخوانی‌های بیش از حد توابع و خواندن‌های DOM جلوگیری شود.
• دسته‌بندی خواندن/نوشتن DOM: از ترکیب عملیات خواندن DOM (مانند getBoundingClientRect()) با عملیات نوشتن DOM (مانند تنظیم استایل‌ها) خودداری کنید. این می‌تواند باعث layout thrashing شود. ابزارهایی مانند fastdom می‌توانند به مدیریت کارآمد این موضوع کمک کنند.
• به تعویق انداختن عملیات غیرحیاتی: از requestAnimationFrame برای انیمیشن‌ها و setTimeout(..., 0) یا requestIdleCallback برای دستکاری‌های DOM کمتر حیاتی استفاده کنید تا اطمینان حاصل شود که آن‌ها نخ اصلی را مسدود نمی‌کنند و بر واکنش‌گرایی تأثیر نمی‌گذارند.
• هوشمندانه انتخاب کنید: گاهی اوقات، عملکرد یک کتابخانه شخص ثالث می‌تواند یک گلوگاه باشد. جایگزین‌ها را ارزیابی کنید یا بارگذاری تنبل (lazy-loading) چنین کامپوننت‌هایی را برای کاربران با اتصالات کندتر در نظر بگیرید تا اطمینان حاصل شود که یک تجربه پایه به طور جهانی عملکرد بالایی دارد.

`createRef` در مقابل Callback Refs در مقابل `useRef`: یک مقایسه دقیق

ری‌اکت در طول تکامل خود راه‌های مختلفی برای مدیریت ref ها ارائه داده است. درک تفاوت‌های هر یک، کلید انتخاب مناسب‌ترین روش برای زمینه خاص شما است.

۱. `React.createRef()` (کامپوننت‌های کلاسی - مدرن)

• مکانیسم: یک شیء ref ({ current: null }) را در سازنده نمونه کامپوننت ایجاد می‌کند. ری‌اکت پس از mount شدن، عنصر DOM یا نمونه کامپوننت را به خاصیت .current اختصاص می‌دهد.
• استفاده اصلی: منحصراً در کامپوننت‌های کلاسی. این یک بار برای هر نمونه کامپوننت مقداردهی اولیه می‌شود.
• جمعیت Ref: .current پس از mount شدن کامپوننت به عنصر/نمونه تنظیم می‌شود و در هنگام unmount شدن به null بازنشانی می‌شود.
• بهترین برای: تمام نیازهای استاندارد ref در کامپوننت‌های کلاسی که در آن نیاز به ارجاع به یک عنصر DOM یا یک نمونه کامپوننت کلاسی فرزند دارید.
• مزایا: سینتکس شیءگرای واضح و سرراست. نگرانی در مورد ایجاد مجدد تابع درون‌خطی که باعث فراخوانی‌های اضافی می‌شود (همانطور که می‌تواند با callback ref ها اتفاق بیفتد) وجود ندارد.
• معایب: با کامپوننت‌های تابعی قابل استفاده نیست. اگر در سازنده مقداردهی اولیه نشود (مثلاً در render)، ممکن است یک شیء ref جدید در هر رندر ایجاد شود که منجر به مشکلات عملکردی بالقوه یا مقادیر ref نادرست شود. نیاز به به خاطر سپردن برای اختصاص به یک خاصیت نمونه دارد.

۲. Callback Refs (کامپوننت‌های کلاسی و تابعی - انعطاف‌پذیر/قدیمی)

• مکانیسم: شما یک تابع را مستقیماً به prop ref ارسال می‌کنید. ری‌اکت این تابع را با عنصر DOM یا نمونه کامپوننت mount شده، و بعداً با null هنگام unmount شدن آن فراخوانی می‌کند.
• استفاده اصلی: می‌تواند در هر دو کامپوننت کلاسی و تابعی استفاده شود. در کامپوننت‌های کلاسی، callback معمولاً به this متصل می‌شود یا به عنوان یک خاصیت کلاسی تابع فلشی تعریف می‌شود. در کامپوننت‌های تابعی، اغلب به صورت درون‌خطی تعریف یا memoize می‌شود.
• جمعیت Ref: تابع callback مستقیماً توسط ری‌اکت فراخوانی می‌شود. شما مسئول ذخیره ارجاع هستید (مانند this.myInput = element;).
• بهترین برای: سناریوهایی که نیاز به کنترل دقیق‌تری بر روی زمان تنظیم و لغو تنظیم ref ها دارند، یا برای الگوهای پیشرفته مانند لیست‌های ref دینامیک. این روش اصلی مدیریت ref ها قبل از createRef و useRef بود.
• مزایا: حداکثر انعطاف‌پذیری را فراهم می‌کند. به شما دسترسی فوری به ref را هنگام در دسترس بودن آن می‌دهد (در داخل تابع callback). می‌توان از آن برای ذخیره ref ها در یک آرایه یا map برای مجموعه‌های دینامیک از عناصر استفاده کرد.
• معایب: اگر callback به صورت درون‌خطی در متد render تعریف شود (مانند ref={el => this.myRef = el})، در طول به‌روزرسانی‌ها دو بار فراخوانی می‌شود (یک بار با null، سپس با عنصر)، که می‌تواند باعث مشکلات عملکردی یا عوارض جانبی غیرمنتظره شود اگر با دقت مدیریت نشود (مثلاً با تبدیل callback به یک متد کلاسی یا استفاده از useCallback در کامپوننت‌های تابعی).

class CallbackRefDetailedExample extends React.Component {
constructor(props) {
super(props);
this.inputElement = null;
}

// این متد توسط ری‌اکت برای تنظیم ref فراخوانی خواهد شد
setInputElementRef = element => {
if (element) {
console.log('Ref element is:', element);
}
this.inputElement = element; // ذخیره عنصر واقعی DOM
};

componentDidMount() {
if (this.inputElement) {
this.inputElement.focus();
}
}

render() {
return (
<div>
<label>ورودی Callback Ref:</label>
<input type="text" ref={this.setInputElementRef} />
</div>
);
}
}

۳. هوک `useRef` (کامپوننت‌های تابعی - مدرن)

• مکانیسم: یک هوک ری‌اکت که یک شیء ref قابل تغییر ({ current: initialValue }) را برمی‌گرداند. شیء بازگشتی برای تمام طول عمر کامپوننت تابعی باقی می‌ماند.
• استفاده اصلی: منحصراً در کامپوننت‌های تابعی.
• جمعیت Ref: مشابه createRef، ری‌اکت عنصر DOM یا نمونه کامپوننت (اگر ارسال شده باشد) را به خاصیت .current پس از mount شدن اختصاص می‌دهد و در هنگام unmount آن را به null تنظیم می‌کند. مقدار .current را می‌توان به صورت دستی نیز به‌روز کرد.
• بهترین برای: تمام مدیریت ref در کامپوننت‌های تابعی. همچنین برای نگهداری هر مقدار قابل تغییری که نیاز به پایداری در طول رندرها بدون ایجاد رندر مجدد دارد، مفید است (مانند شناسه‌های تایمر، مقادیر قبلی).
• مزایا: ساده، ایدیوماتیک برای هوک‌ها. شیء ref در طول رندرها باقی می‌ماند و از مشکلات ایجاد مجدد جلوگیری می‌کند. می‌تواند هر مقدار قابل تغییری را ذخیره کند، نه فقط گره‌های DOM.
• معایب: فقط در کامپوننت‌های تابعی کار می‌کند. نیاز به useEffect صریح برای تعاملات ref مرتبط با چرخه حیات دارد (مانند فوکوس کردن در mount).

به طور خلاصه:

• اگر در حال نوشتن یک کامپوننت کلاسی هستید و به یک ref نیاز دارید، React.createRef() انتخاب توصیه شده و واضح‌ترین است.
• اگر در حال نوشتن یک کامپوننت تابعی هستید و به یک ref نیاز دارید، هوک useRef راه‌حل مدرن و ایدیوماتیک است.
• Callback ref ها هنوز معتبر هستند اما به طور کلی پرجزئیات‌تر و مستعد مشکلات ظریف هستند اگر با دقت پیاده‌سازی نشوند. آن‌ها برای سناریوهای پیشرفته یا هنگام کار با کدهای قدیمی‌تر یا زمینه‌هایی که هوک‌ها در دسترس نیستند، مفید هستند.
• برای ارسال ref ها از طریق کامپوننت‌ها (به ویژه تابعی‌ها)، React.forwardRef() ضروری است، که اغلب در ترکیب با createRef یا useRef در کامپوننت والد استفاده می‌شود.

ملاحظات جهانی و دسترس‌پذیری پیشرفته با Ref ها

در حالی که اغلب در یک خلاء فنی مورد بحث قرار می‌گیرد، استفاده از ref ها در یک زمینه برنامه جهانی، پیامدهای مهمی را به همراه دارد، به ویژه در مورد عملکرد و دسترس‌پذیری برای کاربران متنوع.

۱. بهینه‌سازی عملکرد برای دستگاه‌ها و شبکه‌های متنوع

تأثیر خود createRef بر اندازه بسته نهایی حداقل است، زیرا بخش کوچکی از هسته ری‌اکت است. با این حال، عملیاتی که شما با خاصیت current انجام می‌دهید می‌تواند پیامدهای عملکردی قابل توجهی داشته باشد. برای کاربران با دستگاه‌های ضعیف‌تر یا اتصالات شبکه کندتر (که در بسیاری از نقاط جهان رایج است)، دستکاری‌های ناکارآمد DOM می‌تواند منجر به پرش، UI های غیرواکنش‌گرا و تجربه کاربری ضعیف شود. هنگام استفاده از ref ها برای وظایفی مانند انیمیشن‌ها، محاسبات پیچیده طرح‌بندی، یا ادغام کتابخانه‌های سنگین شخص ثالث:

• Debounce/Throttle کردن رویدادها: اگر از ref ها برای اندازه‌گیری ابعاد در رویدادهای window.resize یا scroll استفاده می‌کنید، اطمینان حاصل کنید که این هندلرها debounced یا throttled شده‌اند تا از فراخوانی‌های بیش از حد توابع و خواندن‌های DOM جلوگیری شود.
• دسته‌بندی خواندن/نوشتن DOM: از ترکیب عملیات خواندن DOM (مانند getBoundingClientRect()) با عملیات نوشتن DOM (مانند تنظیم استایل‌ها) خودداری کنید. این می‌تواند باعث layout thrashing شود. ابزارهایی مانند fastdom می‌توانند به مدیریت کارآمد این موضوع کمک کنند.
• به تعویق انداختن عملیات غیرحیاتی: از requestAnimationFrame برای انیمیشن‌ها و setTimeout(..., 0) یا requestIdleCallback برای دستکاری‌های DOM کمتر حیاتی استفاده کنید تا اطمینان حاصل شود که آن‌ها نخ اصلی را مسدود نمی‌کنند و بر واکنش‌گرایی تأثیر نمی‌گذارند.
• هوشمندانه انتخاب کنید: گاهی اوقات، عملکرد یک کتابخانه شخص ثالث می‌تواند یک گلوگاه باشد. جایگزین‌ها را ارزیابی کنید یا بارگذاری تنبل (lazy-loading) چنین کامپوننت‌هایی را برای کاربران با اتصالات کندتر در نظر بگیرید تا اطمینان حاصل شود که یک تجربه پایه به طور جهانی عملکرد بالایی دارد.

۲. بهبود دسترس‌پذیری (ویژگی‌های ARIA و ناوبری با صفحه‌کلید)

Ref ها در ساخت برنامه‌های وب بسیار قابل دسترس، به ویژه هنگام ایجاد کامپوننت‌های UI سفارشی که معادل‌های بومی مرورگر ندارند یا هنگام نادیده گرفتن رفتارهای پیش‌فرض، نقش اساسی دارند. برای مخاطبان جهانی، پایبندی به دستورالعمل‌های دسترس‌پذیری محتوای وب (WCAG) نه تنها یک عمل خوب، بلکه اغلب یک الزام قانونی است. Ref ها امکان‌پذیر می‌سازند:

• مدیریت فوکوس برنامه‌ریزی‌شده: همانطور که با فیلدهای ورودی مشاهده شد، ref ها به شما امکان می‌دهند فوکوس را تنظیم کنید، که برای کاربران صفحه‌کلید و ناوبری با صفحه‌خوان حیاتی است. این شامل مدیریت فوکوس در داخل modal ها، منوهای کشویی، یا ویجت‌های تعاملی می‌شود.
• ویژگی‌های دینامیک ARIA: شما می‌توانید از ref ها برای اضافه کردن یا به‌روزرسانی دینامیک ویژگی‌های ARIA (Accessible Rich Internet Applications) (مانند aria-expanded, aria-controls, aria-live) روی عناصر DOM استفاده کنید. این اطلاعات معنایی را به فناوری‌های کمکی ارائه می‌دهد که ممکن است از UI بصری به تنهایی قابل استنباط نباشد.

  class CollapsibleSection extends React.Component {
  constructor(props) {
  super(props);
  this.buttonRef = React.createRef();
  this.state = { isExpanded: false };
  }
  
  toggleExpanded = () => {
  this.setState(prevState => ({ isExpanded: !prevState.isExpanded }), () => {
  if (this.buttonRef.current) {
  // به‌روزرسانی دینامیک ویژگی ARIA بر اساس state
  this.buttonRef.current.setAttribute('aria-expanded', this.state.isExpanded);
  }
  });
  };
  
  componentDidMount() {
  if (this.buttonRef.current) {
  this.buttonRef.current.setAttribute('aria-controls', `section-${this.props.id}`);
  this.buttonRef.current.setAttribute('aria-expanded', this.state.isExpanded);
  }
  }
  
  render() {
  const { id, title, children } = this.props;
  const { isExpanded } = this.state;
  return (
  <div style={{ margin: '20px auto', maxWidth: '600px', border: '1px solid #0056b3', borderRadius: '8px', background: '#e7f0fa', overflow: 'hidden' }}>
  <h4>
  <button
  ref={this.buttonRef} // Ref به دکمه برای ویژگی‌های ARIA
  onClick={this.toggleExpanded}
  style={{ background: 'none', border: 'none', padding: '15px 20px', width: '100%', textAlign: 'left', cursor: 'pointer', fontSize: '1.2em', color: '#0056b3', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
  id={`section-header-${id}`}
  >
  {title} <span>▼</span>
  </button>
  </h4>
  {isExpanded && (
  <div id={`section-${id}`} role="region" aria-labelledby={`section-header-${id}`} style={{ padding: '0 20px 20px', borderTop: '1px solid #a7d9f7' }}>
  {children}
  </div>
  )}
  </div>
  );
  }
  }

• کنترل تعامل با صفحه‌کلید: برای منوهای کشویی سفارشی، اسلایدرها، یا سایر عناصر تعاملی، ممکن است نیاز به پیاده‌سازی هندلرهای رویداد صفحه‌کلید خاص داشته باشید (مانند کلیدهای جهت‌نما برای ناوبری در یک لیست). Ref ها دسترسی به عنصر DOM هدف را فراهم می‌کنند که در آن این شنوندگان رویداد می‌توانند متصل و مدیریت شوند.

با استفاده متفکرانه از ref ها، توسعه‌دهندگان می‌توانند اطمینان حاصل کنند که برنامه‌هایشان برای افراد دارای معلولیت در سراسر جهان قابل استفاده و فراگیر هستند و دسترسی و تأثیر جهانی آن‌ها را به شدت گسترش می‌دهند.

۳. بین‌المللی‌سازی (I18n) و تعاملات محلی‌سازی شده

هنگام کار با بین‌المللی‌سازی (i18n)، ref ها می‌توانند نقش ظریف اما مهمی ایفا کنند. به عنوان مثال، در زبان‌هایی که از اسکریپت راست به چپ (RTL) استفاده می‌کنند (مانند عربی، عبری یا فارسی)، ترتیب طبیعی تب و جهت اسکرول می‌تواند با زبان‌های چپ به راست (LTR) متفاوت باشد. اگر شما به صورت برنامه‌ریزی‌شده فوکوس یا اسکرول را با استفاده از ref ها مدیریت می‌کنید، بسیار مهم است که اطمینان حاصل کنید منطق شما به جهت متن سند یا عنصر (ویژگی dir) احترام می‌گذارد.

• مدیریت فوکوس آگاه از RTL: در حالی که مرورگرها به طور کلی ترتیب تب پیش‌فرض را برای RTL به درستی مدیریت می‌کنند، اگر شما در حال پیاده‌سازی تله‌های فوکوس سفارشی یا فوکوس متوالی هستید، منطق مبتنی بر ref خود را به طور کامل در محیط‌های RTL آزمایش کنید تا از یک تجربه یکنواخت و شهودی اطمینان حاصل کنید.
• اندازه‌گیری طرح‌بندی در RTL: هنگام استفاده از getBoundingClientRect() از طریق یک ref، آگاه باشید که خواص left و right نسبت به viewport هستند. برای محاسبات طرح‌بندی که به شروع/پایان بصری بستگی دارند، document.dir یا استایل محاسبه شده عنصر را در نظر بگیرید تا منطق خود را برای طرح‌بندی‌های RTL تنظیم کنید.
• ادغام کتابخانه شخص ثالث: اطمینان حاصل کنید که هر کتابخانه شخص ثالثی که از طریق ref ها ادغام شده است (مانند کتابخانه‌های نمودار) خودشان از i18n آگاه هستند و طرح‌بندی‌های RTL را به درستی مدیریت می‌کنند اگر برنامه شما از آن‌ها پشتیبانی می‌کند. مسئولیت اطمینان از این موضوع اغلب بر عهده توسعه‌دهنده‌ای است که کتابخانه را در یک کامپوننت ری‌اکت ادغام می‌کند.

نتیجه‌گیری: تسلط بر کنترل دستوری با `createRef` برای برنامه‌های جهانی

React.createRef() چیزی بیش از یک «راه فرار» در ری‌اکت است؛ این یک ابزار حیاتی است که شکاف بین پارادایم اعلانی قدرتمند ری‌اکت و واقعیت‌های دستوری تعاملات DOM مرورگر را پر می‌کند. در حالی که نقش آن در کامپوننت‌های تابعی جدیدتر تا حد زیادی توسط هوک useRef گرفته شده است، createRef همچنان روش استاندارد و ایدیوماتیک‌ترین برای مدیریت ref ها در کامپوننت‌های کلاسی است، که هنوز بخش قابل توجهی از بسیاری از برنامه‌های سازمانی در سراسر جهان را تشکیل می‌دهند.

با درک کامل ایجاد، اتصال و نقش حیاتی خاصیت .current، توسعه‌دهندگان می‌توانند با اطمینان با چالش‌هایی مانند مدیریت فوکوس برنامه‌ریزی‌شده، کنترل مستقیم رسانه، ادغام یکپارچه با کتابخانه‌های متنوع شخص ثالث (از نمودارهای D3.js تا ویرایشگرهای متن غنی سفارشی)، و اندازه‌گیری دقیق ابعاد عنصر مقابله کنند. این قابلیت‌ها فقط شاهکارهای فنی نیستند؛ آن‌ها برای ساخت برنامه‌هایی که عملکرد بالا، قابل دسترس و کاربرپسند در طیف وسیعی از کاربران، دستگاه‌ها و زمینه‌های فرهنگی جهانی هستند، بنیادی هستند.

به یاد داشته باشید که این قدرت را با احتیاط به کار بگیرید. همیشه ابتدا سیستم state و prop اعلانی ری‌اکت را ترجیح دهید. هنگامی که کنترل دستوری واقعاً مورد نیاز است، createRef (برای کامپوننت‌های کلاسی) یا useRef (برای کامپوننت‌های تابعی) یک مکانیسم قوی و به خوبی تعریف شده برای دستیابی به آن ارائه می‌دهد. تسلط بر ref ها به شما قدرت می‌دهد تا با موارد خاص و پیچیدگی‌های توسعه وب مدرن مقابله کنید و اطمینان حاصل کنید که برنامه‌های ری‌اکت شما می‌توانند تجربیات کاربری استثنایی را در هر کجای دنیا ارائه دهند، در حالی که مزایای اصلی معماری مبتنی بر کامپوننت زیبای ری‌اکت را حفظ می‌کنند.

یادگیری و کاوش بیشتر

• مستندات رسمی ری‌اکت در مورد Ref ها: برای به‌روزترین اطلاعات مستقیماً از منبع، به <em>https://react.dev/learn/manipulating-the-dom-with-refs</em> مراجعه کنید
• درک هوک `useRef` ری‌اکت: برای عمیق‌تر شدن در معادل کامپوننت تابعی، <em>https://react.dev/reference/react/useRef</em> را کاوش کنید
• ارسال Ref با `forwardRef`: یاد بگیرید چگونه ref ها را به طور مؤثر از طریق کامپوننت‌ها ارسال کنید: <em>https://react.dev/reference/react/forwardRef</em>
• دستورالعمل‌های دسترس‌پذیری محتوای وب (WCAG): ضروری برای توسعه وب جهانی: <em>https://www.w3.org/WAI/WCAG22/quickref/</em>
• بهینه‌سازی عملکرد ری‌اکت: بهترین شیوه‌ها برای برنامه‌های با عملکرد بالا: <em>https://react.dev/learn/optimizing-performance</em>