useRef() 🪝

useRef() مشابه useSate() است به ما اجازه می دهد تا مقادیر بین رندرها را حفظ کنیم (بدون تغییر باقی بمانیم). اما برخلاف useState()، the Ref هنگامی که مقدار قابل تغییر تغییر می کند هوک باعث رندر مجدد نمی شود.

useRef() یک شی قابل تغییر را برمی گرداند که ویژگی فعلی آن با مقدار اولیه تنظیم شده است که به عنوان آرگومان به تابع Ref ارسال می شود.

const refObject = useRef(initial_value);

در مثال بالا، refObject شیء برگشتی است. این شی دارای یک current ویژگی که می تواند برای به دست آوردن مقدار شی ارجاع شده در هر زمان استفاده شود.

دو کاربرد اصلی از useRef() وجود دارد –

1. برای ایجاد متغیرهای قابل تغییر ماندگار (اینها refs یا مراجع نامیده می شوند).
2. برای دسترسی به عناصر DOM (یا عناصر React).

بیایید به اینها شیرجه بزنیم.

1. useRef() برای ایجاد متغیرهای قابل تغییر پایدار

تلاش برای شمارش تعداد دفعاتی که یک مؤلفه با استفاده از useState رندر می شود، به یک حلقه بی نهایت منجر می شود زیرا useState خود باعث رندر مجدد می شود. این در مثال زیر نشان داده شده است.

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

function App() {

  const [text, setText] = useState('')
  const [count, setCount] = useState(0)

  useEffect(() => {
    setCount(prevStateCount => prevStateCount + 1)
  })

  return (
    <div>
      <input value={text} onChange={e=>setText(e.target.value)} />
      <div>Type some text in the box</div>
      <div>Component rendered {count} times</div>
    </div>
  )
}

export default App

در طول رندر مولفه اولیه، “count” افزایش می یابد که باعث می شود کامپوننت دوباره رندر شود و از این رو تعداد دوباره افزایش می یابد که منجر به رندر مجدد مولفه می شود. اساساً این یک حلقه نامحدود از افزایش تعداد و رندر مجدد مؤلفه است.

رجوع به نجات 🛟…
از Refs می توان برای حل مشکل حلقه بی نهایت که به دلیل رندر مجدد هنگام استفاده از حالت هوک ایجاد می شود استفاده کرد.

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

function App() {

  const [text, setText] = useState('')
  const count = useRef(1)

  useEffect(() => {
    count.current = count.current + 1
  })

  return (
    <div>
      <input value={text} onChange={e=>setText(e.target.value)} />
      <div>Type some text in the box</div>
      <div>Component rendered {count.current} times</div>
    </div>
  )
}

export default App

useRef() جایگزین useState() و count یک شی با a است current ویژگی. را current ویژگی همچنان با به روز شدن بین رندرهای مختلف باقی می ماند.

از تصویر زیر می‌توانیم مشاهده کنیم، هر بار که یک کاراکتر در قسمت ورودی وارد می‌شود، شمارش افزایش می‌یابد. از آنجایی که “apple” وارد شده است، تعداد 6 بار افزایش می یابد (1 در رندر اولیه + افزایش 1 برای هر کاراکتر). صرف نظر از تعداد دفعاتی که تعداد تغییر می کند، مؤلفه ما دوباره رندر نمی شود زیرا از چرخه رندر مؤلفه ما جدا شده است.

2. دسترسی به عناصر DOM

استفاده رایج تر Refs زمانی است که ما نیاز به ارجاع به عناصر HTML داریم.

هر عنصر HTML دارای یک است ref صفت. ما می توانیم اضافه کنیم ref برای دسترسی مستقیم به عنصر در DOM به عنصر نسبت داده شود.

بیایید این مورد استفاده را با یک مثال درک کنیم. کدی را برای سناریویی در نظر بگیرید که در آن می خواهیم روی یک ورودی با کلیک روی دکمه ای تمرکز کنیم.

import React,{useRef} from 'react'

function App() {

  const inputRef = useRef()

  const focus = () => {
    inputRef.current.focus()
  }
  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focus}>Click to focus</button>
    </div>
  )
}

export default App

هر بار که ‘inputRef’ روی صفحه نمایش داده می شود، متغیر ‘inputRef’ روی input عنصر بنابراین، در focus تابع، ما به ویژگی فعلی متغیر ‘inputRef’ دسترسی داریم (این مربوط به input عنصر) و سپس تمرکز روی آن.

از اسکرین شات ضمیمه شده در زیر، می‌توانیم مشاهده کنیم که چگونه کلیک روی دکمه روی ورودی متمرکز می‌شود.

هک دیگری با userRef() 💡 –>
تصور کنید که هنگام برخورد با فرم ها، وضعیت را با هر شخصیت به روز کنید. این می تواند کمی بیش از حد باشد. با استفاده از Refs، می‌توانیم بین عنصر HTML که در نهایت رندر می‌شود و سایر کدهای جاوا اسکریپت، ارتباط برقرار کنیم.

👏 تبریک و پیشرفت عالی 👏. شما اکنون سه قلاب React را پوشش داده اید. این نکته خوبی برای جمع آوری مجدد درک خود از این قلاب ها خواهد بود.

اگر احساس اعتماد به نفس دارید، مستقیماً وارد قسمت 4 شوید، جایی که من useReducer() را پوشش می‌دهم.