Refs in React

Wenn wir uns eine Information merken möchten, aber nicht möchten, dass ihre Änderung ein Rendering der Komponente auslöst, dann sind Refs und entsprechend der Hook useRef, der mit ihnen arbeitet, nützlich.

Ein Ref (oder Referenz) ist ein gewöhnliches JavaScript- Objekt mit einer einzigen Eigenschaft current, die Sie lesen oder ändern können.

Wie States können Refs jeden Datentyp speichern - das können Zahlen, Strings, Objekte und sogar Funktionen sein.

Wenn Ihre Daten für das Rendering verwendet werden, dann speichern Sie sie im State. Wenn Sie kein Rendering benötigen, kann in einem solchen Fall die Verwendung von Refs effizienter sein. Zudem ändert sich der Wert eines Refs im Gegensatz zum State sofort.

Im Allgemeinen werden Refs dort eingesetzt, wo Sie von React abweichen und mit externen APIs interagieren müssen - meistens mit Browser-APIs, die nicht die Darstellung der Komponente beeinflussen. Das kann zum Beispiel das Speichern einer id eines Timers oder das Speichern eines Objekts sein, für das kein JSX berechnet werden muss, aber am häufigsten ist es die Interaktion mit DOM-Elementen. Sie können zur Steuerung des Fokus, zur Textauswahl oder zur Wiedergabe von Medien verwendet werden.

In der nächsten Lektion werden wir die Arbeit mit Refs und dem Hook useRef in der Praxis besprechen.