Was ist useRef(). Einer der wichtigsten und unterschätzten React Hooks

Heute werden wir über einen der wichtigsten React Hook useRef() sprechen.

Reaktionshaken: useRef()
Was ist useRef()?
useRef() ist ein React-Hook, mit dem Sie auf einen Wert verweisen können, der zum Rendern nicht benötigt wird.

UseCase
Es wird verwendet, um auf ein Objekt innerhalb einer funktionalen Komponente zu verweisen, und bewahrt den Zustand des referenzierten Objekts zwischen erneutem Rendern.
Es kann verwendet werden, um einen veränderlichen Wert zu speichern, der beim Aktualisieren kein -re-render verursacht.

Wenn wir versuchen würden zu zählen, wie oft unsere Anwendung mit dem Hook useState() rendert, würden wir in einer Endlosschleife gefangen sein, da dieser Hook selbst ein erneutes Rendern verursacht.
Um dies zu vermeiden, verwenden wir useRef() Hook:
//Code
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>
);
}

Ausgabe

Bei jedem Tastendruck im Eingabefeld wird
die Zahl erhöht.
DOM-Manipulation:
Deklarieren Sie ein Ref-Objekt mit einem Anfangswert von null:
//Code
import { useRef} from 'react';
function MyComponent() {
const inputRef = useRef(null);
…

Übergeben Sie dann Ihr Ref-Objekt als Ref-Attribut an die JSX des DOM-Knotens, den Sie bearbeiten möchten:
//Code
return <input ref={inputRef} />;

Nachdem React den DOM-Knoten erstellt und auf dem Bildschirm platziert hat, setzt React die aktuelle Eigenschaft Ihres Ref-Objekts auf diesen DOM-Knoten. Jetzt können Sie auf den DOM-Knoten von <input> zugreifen und Methoden wie focus aufrufen:
//Code
function handleClick() {
inputRef.current.focus();
}
React setzt die aktuelle Eigenschaft auf null zurück, wenn der Knoten vom Bildschirm entfernt wird.