Tepki useRefKancası

Kanca , useRefişlemeler arasında değerleri kalıcı hale getirmenize olanak tanır.

Güncellendiğinde yeniden işlemeye neden olmayan değiştirilebilir bir değeri saklamak için kullanılabilir.

Bir DOM öğesine doğrudan erişmek için kullanılabilir.

Yeniden oluşturmalara neden olmaz

Uygulamamızın Hook'u kullanarak kaç kez render ettiğini saymaya çalışırsak useState, bu Hook'un kendisi yeniden render işlemine neden olduğu için sonsuz bir döngüye yakalanırdık.

Bunu önlemek için useRefHook'u kullanabiliriz.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

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

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

useRef()yalnızca bir öğe döndürür. adlı bir Object döndürür current.

Başlattığımızda useRef, başlangıç ​​değerini ayarladık: useRef(0).

Bunu bilgisayarınızda çalıştırın ve uygulama oluşturma sayısının artışını görmek için girişi yazmayı deneyin.

DOM Öğelerine Erişim

Genel olarak, React'in tüm DOM manipülasyonunu yönetmesine izin vermek istiyoruz.

useRefAncak sorunlara neden olmadan kullanılabilecek bazı durumlar vardır .

refReact'te, bir öğeye doğrudan DOM'den erişmek için bir nitelik ekleyebiliriz .

import { useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Durum Değişikliklerini İzleme

Kanca , useRefönceki durum değerlerinin kaydını tutmak için de kullanılabilir.

Bunun nedeni, oluşturmalar useRefarasında değerleri kalıcı hale getirebilmemizdir.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Bu sefer önceki durumu takip etmek için useState, useEffectve kombinasyonunu kullanıyoruz.useRef

içinde , giriş alanına metin girerek her useEffectgüncellendiğinde useRefmevcut değeri güncelliyoruz.inputValue