هوک useRef در React

مسعود صدری

مرداد 9, 1399

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

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

const refContainer = useRef(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 (

<button onClick={this.focusTextInput}>Focus the text input</button>

</>

);

}

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, { 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 (

<button onClick={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> </> ); }

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 (

//...

</>

)

}

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 ( <> //... </> ) }

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 (
    <>
      //...
    </>
  )
}

دیدگاه‌ها:

بهزاد احمدی

خرداد 27, 1401 در 12:40 ق.ظ

سلام
ممنون از شما.

چرا باید برای نگه داشتن مقدار interval از useRef استفاده کرد؟ آیا نمیشه یک متغیر سراسری تعریف کرد و interval رو در آن ذخیره کرد تا در تمام کامپوننت به آن دسترسی داشت؟

مسعود صدری

خرداد 28, 1401 در 11:53 ب.ظ

سلام
استفاده از useRef برای مسايل گسترده‌تری در نظر گرفته شده، طرفا بحث نگهداری یک مقداری سراسری نیست.

افزودن دیدگاه جدید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.