React createRef: تسلط بر ایجاد شیء مرجع

در دنیای پویای توسعه ری‌اکت، مدیریت و تعامل کارآمد با عناصر DOM و نمونه‌های کامپوننت‌ها بسیار حیاتی است. API createRef در ری‌اکت مکانیزم قدرتمندی برای ایجاد اشیاء مرجع فراهم می‌کند که به شما امکان دسترسی و دستکاری مستقیم عناصر را می‌دهد. این راهنمای جامع به بررسی هدف، کاربرد، مزایا و بهترین شیوه‌های استفاده از createRef می‌پردازد و شما را با دانش لازم برای بهره‌برداری مؤثر از آن در پروژه‌های ری‌اکت خود مجهز می‌کند.

شیء مرجع در ری‌اکت چیست؟

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

دو راه اصلی برای ایجاد اشیاء مرجع در ری‌اکت وجود دارد:

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

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

چرا از اشیاء مرجع استفاده کنیم؟

در حالی که ری‌اکت رویکردی اعلانی (declarative) برای مدیریت UI را تشویق می‌کند، موقعیت‌هایی وجود دارد که دسترسی مستقیم به DOM ضروری یا کارآمدتر است. در اینجا برخی از موارد استفاده رایج برای اشیاء مرجع آورده شده است:

• مدیریت فوکوس، انتخاب متن یا پخش رسانه: تنظیم دستوری فوکوس روی یک فیلد ورودی، انتخاب متن در یک textarea، یا کنترل پخش رسانه (پخش، توقف، حجم صدا) همگی سناریوهایی هستند که دستکاری مستقیم DOM اغلب ساده‌ترین رویکرد است. به عنوان مثال، یک نوار جستجو را تصور کنید. پس از اینکه کاربر متنی را وارد و ارسال کرد، ممکن است بخواهید به طور خودکار فیلد ورودی را برای جستجوی جدید فوکوس کنید. یک ref این کنترل دقیق را ممکن می‌سازد.
• راه‌اندازی انیمیشن‌های دستوری: اگر در حال ادغام با یک کتابخانه انیمیشن شخص ثالث هستید که به مراجع مستقیم عناصر DOM نیاز دارد، اشیاء مرجع دسترسی لازم را فراهم می‌کنند. به عنوان مثال، GSAP (GreenSock Animation Platform) برای انیمیشن‌های پیچیده‌تر، به طور قابل توجهی از دسترسی مستقیم به عناصر که توسط refها فراهم می‌شود، سود می‌برد.
• ادغام با کتابخانه‌های DOM شخص ثالث: برخی از کتابخانه‌های خارجی (مانند آنهایی که با مصورسازی داده‌های پیچیده یا تعاملات UI تخصصی سروکار دارند) ممکن است برای عملکرد صحیح به مراجع مستقیم عناصر DOM نیاز داشته باشند. کتابخانه‌ای را در نظر بگیرید که نقشه‌های تعاملی تولید می‌کند. این کتابخانه به یک مرجع به عنصر DOM خاصی نیاز دارد تا بتواند نقشه را در آنجا رندر کند.
• اندازه‌گیری ابعاد یا موقعیت گره DOM: تعیین ابعاد یا موقعیت یک عنصر DOM در داخل ویوپورت نیازمند دسترسی مستقیم به آن عنصر است. این قابلیت به طور مکرر برای پیاده‌سازی ویژگی‌هایی مانند بارگذاری تنبل (lazy loading) تصاویر یا تنظیم پویا طرح‌بندی‌ها بر اساس قابل مشاهده بودن عناصر استفاده می‌شود.
• دسترسی به نمونه‌های کامپوننت: اگرچه کمتر رایج است، refها می‌توانند برای دسترسی به متدها یا خواص یک نمونه کامپوننت فرزند استفاده شوند. این کار به طور کلی به نفع ارسال داده‌ها و callbackها توصیه نمی‌شود، اما می‌تواند در سناریوهای خاص، مانند کنترل یک کامپوننت پخش‌کننده ویدیوی سفارشی، مفید باشد.

React.createRef(): یک بررسی عمیق

ایجاد یک شیء مرجع

استفاده از API React.createRef() ساده است. در یک کامپوننت کلاسی، شما یک شیء مرجع جدید را در داخل سازنده (constructor) اعلام می‌کنید:

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

  render() {
    return (
      <input type="text" ref={this.myRef} />
    );
  }
}

            

              
                Copy
              
            
          

در این مثال، this.myRef اکنون یک شیء مرجع را نگه می‌دارد. ویژگی ref در عنصر <input> به این شیء مرجع اختصاص داده شده است. ری‌اکت خاصیت current از this.myRef را با نمونه واقعی عنصر DOM هنگام mount شدن کامپوننت پر می‌کند.

دسترسی به عنصر DOM

پس از اینکه کامپوننت mount شد (یعنی پس از متد چرخه حیات componentDidMount)، می‌توانید از طریق خاصیت current شیء مرجع به عنصر DOM دسترسی پیدا کنید:

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

  componentDidMount() {
    // Now you can access the input element
    this.myRef.current.focus();
  }

  render() {
    return (
      <input type="text" ref={this.myRef} />
    );
  }
}

            

              
                Copy
              
            
          

در این حالت، this.myRef.current به عنصر DOM <input> اشاره خواهد کرد. سپس متد focus() فراخوانی می‌شود تا به صورت برنامه‌نویسی، فیلد ورودی هنگام mount شدن کامپوننت فوکوس شود. این کار برای دسترسی‌پذیری (accessibility) بسیار مفید است و توجه کاربر را در زمان مناسب به مکان درست هدایت می‌کند.

مثال: پیاده‌سازی دکمه اسکرول به بالا

در اینجا یک مثال عملی‌تر ارائه می‌شود که نشان می‌دهد چگونه می‌توان از createRef برای پیاده‌سازی دکمه اسکرول به بالا استفاده کرد:

            class ScrollToTop extends React.Component {
  constructor(props) {
    super(props);
    this.containerRef = React.createRef();
    this.scrollToTop = this.scrollToTop.bind(this);
  }

  componentDidMount() {
    // Simulate a long page
    for (let i = 0; i < 100; i++) {
      const newDiv = document.createElement('div');
      newDiv.textContent = `Item ${i + 1}`;
      this.containerRef.current.appendChild(newDiv);
    }
  }

  scrollToTop() {
    this.containerRef.current.scrollTop = 0;
  }

  render() {
    return (
      <div ref={this.containerRef} style={{ height: '200px', overflow: 'auto' }}>
        <button onClick={this.scrollToTop}>Scroll to Top</button>
      </div>
    );
  }
}

            

              
                Copy
              
            
          

در این مثال:

• containerRef یک مرجع به <div> قابل اسکرول است.
• componentDidMount، <div> را با محتوای کافی پر می‌کند تا آن را قابل اسکرول کند.
• متد scrollToTop خاصیت scrollTop از <div> را برابر با 0 قرار می‌دهد، که به طور مؤثر محتوا را به بالا اسکرول می‌کند.

بهترین شیوه‌ها و ملاحظات

• از استفاده بیش از حد خودداری کنید: از اشیاء مرجع به ندرت استفاده کنید. مکانیزم جریان داده (data flow) ری‌اکت باید راه اصلی برای مدیریت به‌روزرسانی‌های UI باشد. فقط زمانی از refها استفاده کنید که دستکاری مستقیم DOM واقعاً ضروری باشد.
• دسترسی پس از Mount شدن: اطمینان حاصل کنید که به خاصیت current شیء مرجع فقط پس از mount شدن کامپوننت (مثلاً در componentDidMount یا متدهای چرخه حیات بعدی) دسترسی پیدا می‌کنید. دسترسی به آن قبل از mount شدن منجر به مقدار null خواهد شد.
• بررسی Null بودن: همیشه قبل از تلاش برای دسترسی به خواص یا متدهای this.myRef.current، بررسی کنید که null نباشد. این موضوع به ویژه هنگام کار با عناصری که به صورت شرطی رندر می‌شوند، اهمیت دارد.
• درک چرخه حیات: هنگام استفاده از refها، به چرخه حیات کامپوننت توجه داشته باشید. عنصر DOM فقط پس از mount شدن کامپوننت در دسترس است و ممکن است در هر زمانی unmount یا دوباره رندر شود.
• کامپوننت‌های تابعی و useRef: در کامپوننت‌های تابعی، به جای React.createRef() از هوک useRef استفاده کنید. useRef به طور خاص برای کامپوننت‌های تابعی طراحی شده است و راهی زیباتر برای مدیریت مراجع فراهم می‌کند.
• از تغییر مستقیم و غیرضروری DOM خودداری کنید: در حالی که refها دسترسی مستقیم به DOM را فراهم می‌کنند، از دستکاری مستقیم DOM مگر در موارد کاملاً ضروری خودداری کنید. DOM مجازی ری‌اکت برای مدیریت کارآمد به‌روزرسانی‌های UI طراحی شده است و دستکاری مستقیم DOM می‌تواند در این فرآیند تداخل ایجاد کند.
• ملاحظات دسترسی‌پذیری: از refها برای بهبود دسترسی‌پذیری استفاده کنید. به عنوان مثال، فوکوس خودکار یک فیلد ورودی پس از تعامل کاربر می‌تواند تجربه کاربری را برای افرادی که از فناوری‌های کمکی استفاده می‌کنند، به شدت بهبود بخشد. با این حال، به تله‌های صفحه‌کلید (keyboard traps) توجه داشته باشید و اطمینان حاصل کنید که کاربران می‌توانند به راحتی از عنصر فوکوس‌شده خارج شوند.
• بین‌المللی‌سازی (i18n) و محلی‌سازی (l10n): هنگام کار با عناصری که متن نمایش می‌دهند، از ملاحظات بین‌المللی‌سازی و محلی‌سازی آگاه باشید. عرض متن می‌تواند بین زبان‌های مختلف به طور قابل توجهی متفاوت باشد، که ممکن است بر موقعیت یا اندازه عناصری که با استفاده از createRef به آنها ارجاع داده می‌شود، تأثیر بگذارد. کامپوننت‌های خود را طوری طراحی کنید که انعطاف‌پذیر و سازگار با طول‌ها و طرح‌بندی‌های مختلف متن باشند. به عنوان مثال، هنگام فوکوس برنامه‌نویسی شده روی یک پیام خطا، اطمینان حاصل کنید که پیام در همه زبان‌ها کاملاً قابل مشاهده است.
• زبان‌های راست به چپ (RTL): اگر برنامه شما از زبان‌های راست به چپ مانند عربی یا عبری پشتیبانی می‌کند، اطمینان حاصل کنید که استفاده شما از refها با طرح‌بندی‌های RTL سازگار است. به عنوان مثال، هنگام محاسبه موقعیت یک عنصر نسبت به دیگری، جهت طرح‌بندی را در نظر بگیرید.

اشتباهات رایج که باید از آنها اجتناب کرد

• دسترسی به current قبل از Mount شدن کامپوننت: این کار منجر به خطا می‌شود زیرا عنصر DOM هنوز در دسترس نیست. همیشه به current در داخل componentDidMount یا بعد از آن دسترسی پیدا کنید.
• فراموش کردن Bind کردن متدها: هنگام استفاده از refها در داخل event handlerها، اطمینان حاصل کنید که handler به درستی به نمونه کامپوننت bind شده است (مثلاً با استفاده از this.myHandler = this.myHandler.bind(this) در سازنده). در غیر این صورت، this ممکن است در داخل handler تعریف نشده باشد (undefined).
• ایجاد Refهای جدید در render(): از ایجاد اشیاء مرجع جدید به طور مستقیم در متد render() خودداری کنید. این کار منجر به ایجاد یک ref جدید در هر بار رندر می‌شود، که باعث مشکلات عملکردی و شکستن رفتار مورد نظر می‌شود. ref را یک بار در سازنده (constructor) ایجاد کنید.
• نشت مراجع (Leaking References): اطمینان حاصل کنید که هنگام unmount شدن یک کامپوننت، مراجع را به درستی پاکسازی یا آزاد می‌کنید تا از نشت حافظه (memory leaks) جلوگیری شود. در حالی که ری‌اکت به طور کلی این موضوع را به خوبی مدیریت می‌کند، آگاهی از چرخه حیات مراجع یک عمل خوب است.

جایگزین‌های createRef

در حالی که createRef مفید است، همیشه بهترین انتخاب نیست. بسته به موقعیت، ممکن است این جایگزین‌ها را در نظر بگیرید:

• کنترل State: در بیشتر موارد، دستکاری state رویکرد بهتری نسبت به دستکاری مستقیم DOM است. اجازه دهید ری‌اکت رندرینگ را مدیریت کند.
• Refهای Callback: Refهای Callback کنترل بیشتری بر زمان تنظیم و عدم تنظیم مرجع فراهم می‌کنند. شما یک تابع را به عنوان ویژگی ref ارسال می‌کنید. ری‌اکت این تابع را با عنصر DOM هنگام mount شدن کامپوننت فراخوانی می‌کند و با null هنگام unmount شدن آن را فراخوانی می‌کند. این روش اکنون که useRef وجود دارد، کمتر رایج است.
• findDOMNode (منسوخ شده): ReactDOM.findDOMNode قبلاً برای دسترسی به گره DOM زیربنایی یک کامپوننت استفاده می‌شد، اما اکنون منسوخ شده تلقی می‌شود و به طور کلی استفاده از آن توصیه نمی‌شود. createRef رویکرد ترجیحی است.
• فوروارد کردن Refها (Ref Forwarding): فوروارد کردن Ref به یک کامپوننت والد اجازه می‌دهد تا به گره DOM یک کامپوننت فرزند دسترسی پیدا کند، حتی اگر کامپوننت فرزند یک انتزاع باشد که مستقیماً عنصر DOM را رندر نمی‌کند. این برای ایجاد کامپوننت‌های قابل استفاده مجدد که نیاز دارند گره DOM زیربنایی خود را به والد نشان دهند، مفید است.

مثال‌های واقعی از سراسر جهان

کاربرد createRef و مفاهیم آن جهانی است و از مرزهای جغرافیایی فراتر می‌رود. با این حال، مشکلات *خاصی* که آنها حل می‌کنند می‌تواند بسته به هدف برنامه و مخاطبان هدف کمی متفاوت باشد. در اینجا چند مثال آورده شده است:

• تجارت الکترونیک (جهانی): یک سایت تجارت الکترونیک با تمرکز بر تجربه کاربری ممکن است از refها برای فوکوس خودکار نوار جستجو هنگام ورود کاربر به صفحه اصلی، یا برای برجسته کردن دکمه "افزودن به سبد خرید" پس از انتخاب یک کالا، صرف نظر از مکان یا زبان کاربر، استفاده کند. آنها همچنین ممکن است از refها برای مدیریت فوکوس در فرم‌های پیچیده پیکربندی محصول استفاده کنند تا تجربه‌ای روان و شهودی را تضمین کنند.
• پلتفرم‌های آموزشی (چند زبانه): یک پلتفرم یادگیری آنلاین ممکن است از refها برای کنترل پخش سخنرانی‌های ویدیویی استفاده کند و ویژگی‌هایی مانند توقف و بازگشت به عقب را فعال کند. برای برنامه‌هایی که از چندین زبان پشتیبانی می‌کنند، مدیریت ورودی و نمایش متن با استفاده از refها نیازمند توجه دقیق به مجموعه‌های کاراکتر و جهت طرح‌بندی (زبان‌های RTL) است.
• برنامه‌های مالی (بین‌المللی): یک پلتفرم معاملاتی ممکن است از refها برای مدیریت مصورسازی داده‌های بلادرنگ استفاده کند و اطمینان حاصل کند که نمودارها و گراف‌ها به صورت روان و کارآمد به‌روز می‌شوند. در برنامه‌های مالی بین‌المللی، می‌توان از refها برای قالب‌بندی اعداد و ارزها مطابق با منطقه کاربر استفاده کرد. به عنوان مثال، نمایش صحیح نمادهای ارز (€، $، ¥) و جداکننده‌های اعشاری (,. ).
• برنامه‌های نقشه و ناوبری (جهانی): برنامه‌هایی مانند Google Maps یا Citymapper ممکن است از refها برای تعامل با کتابخانه‌های نقشه‌برداری شخص ثالث استفاده کنند و به کاربران امکان حرکت، بزرگنمایی و تعامل مستقیم با عناصر نقشه را بدهند. این برنامه‌ها نیاز به سازگاری با سیستم‌های تصویر مختلف نقشه، فرمت‌های آدرس و مکان‌های دیدنی محلی در سراسر جهان دارند.
• پلتفرم‌های رسانه‌های اجتماعی (جهانی): پلتفرم‌های رسانه‌های اجتماعی از refها برای مدیریت فوکوس در رشته‌های نظرات، اطمینان از آپلود صحیح رسانه‌ها و امکان پخش ویدیوی قابل دسترس استفاده می‌کنند. آنها همچنین باید به تفاوت‌های فرهنگی در نظارت بر محتوا و سبک‌های ارتباطی رسیدگی کنند. به عنوان مثال، اطمینان از اینکه ایموجی‌ها و شکلک‌ها در پلتفرم‌ها و مناطق مختلف به درستی نمایش داده می‌شوند.

نتیجه‌گیری

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