دانلود ویدیو

در این مطلب هوک useRef در React و موارد استفاده از آن را بررسی خواهیم کرد. همچنین توصیه‌هایی برای استفاده از آن ارائه خواهد شد. لطفاً در ادامه مطلب با ما همراه باشید.

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

const refContainer = useRef(initialValue)

هوک useRef در React دو کاربرد اصلی دارد. این ۲ کاربرد عبارت‌اند از:

• دسترسی به مقادیر DOM یا المنت‌های React
• نگه داشتن متغیر قابل تغییر

دسترسی به مقادیر DOM یا المنت‌های React

اگر با React کار کرده باشید، برای دسترسی به مقادیر DOM یا المنت‌های React از Refها استفاده کرده‌اید. در اینجا مثالی از استفاده از Ref در یک کامپوننت توسعه داده شده با کلاس آورده شده است.

import React, { Component, createRef } from 'react'

class CustomTextInput extends Component {
  textInput = createRef()

  focusTextInput = () => this.textInput.current.focus()

  render() {
    return (
      <>
        <input type="text" ref={this.textInput} />
        <button onClick={this.focusTextInput}>Focus the text input</button>
      </>
    );
  }
}

مشابه به آن در یک کامپوننت توسعه داده شده با تابع این صورت است.

import React, { useRef } from 'react'

const CustomTextInput = () => {
  const textInput = useRef()

  focusTextInput = () => textInput.current.focus()

  return (
    <>
      <input type="text" ref={textInput} />
      <button onClick={focusTextInput}>Focus the text input</button>
    </>
  );
}

توجه داشته باشید که با یک کامپوننت تابعی، به جای CreateRef از useRef استفاده می‌کنیم. اگر در یک کامپوننت تابعی از createRef استفاده کنید، React به جای نگه داشتن آن، در هر بار رندر دوباره آن را ایجاد خواهد کرد.

نگه داشتن متغیر قابل تغییر

در کامپوننت‌هایی که با کلاس و یا تابع با استفاده از هوک‌ها توسعه داده می‌شوند، ۲ راه برای نگهداری داده‌ها بین رندرهای مجدد وجود دارد:

کلاس کامپوننت‌ها

• در State کامپوننت: هر زمان که State تغییر کند، کامپوننت مجدداً رندر خواهد شد. 
• در یک متغیر نمونه: مقدار این متغیر در طول برنامه باقی خواهد ماند و ایجاد تغییر در یک متغیر نمونه، باعث رندر مجدد نخواهد شد. 

فانکشنال کامپوننت‌ها

• در یک متغیر مربوطه به State: استفاده از useState یا useReducer. بروزرسانی‌های موجود در مقادیر State، باعث رندر مجدد کامپوننت خواهد شد.
• در یک ref: مشابه متغیرهای نمونه‌ در کلاس کامپوننت‌ها. تغییر مقدار current باعث رندر مجدد نخواهد شد.

در اینجا مثالی از نگهداری یک متغیر قابل تغییر در یک Ref آورده شده است. کامپوننت <Timer> در هر بار رندر مجدد، یک setInterval را آغاز می‌کند و برای متوقف کردن فاصله زمانی، نیاز به اجرای یک تابع Callback دارد.

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

const Timer = () => {
  const intervalRef = useRef()

  useEffect(() => {
    const id = setInterval(() => {
      console.log("A second has passed")
    }, ۱۰۰۰)
    
    intervalRef.current = id
    
    return () => clearInterval(intervalRef.current)
  });

  const handleCancel = () => clearInterval(intervalRef.current)
  
  return (
    <>
      //...
    </>
  )
}