ReactJS - Refs und die DOM

Hallo, zukünftige React-Entwickler! Heute tauchen wir in ein aufregendes Thema ein, das Ihnen helfen wird, direkt mit DOM-Elementen in Ihren React-Anwendungen zu interagieren. Setzen Sie sich an den Computer, denn wir werden die Welt der Refs und der DOM erkunden!

ReactJS - Refs and the DOM

Was sind Refs?

Bevor wir ins Detail gehen, lassen Sie uns verstehen, was Refs sind. In React ist "Ref" die Abkürzung für "Referenz". Es ist so, als würden Sie einem bestimmten Element eine Namensmarke geben, damit Sie es später leicht finden können. Stellen Sie sich vor, Sie sind auf einer großen Party und möchten Ihren bestem Freund im Auge behalten. Sie könnten ihm eine besondere Mütze oder eine eindeutige Namensmarke geben. Das ist im Grunde das, was ein Ref in React macht - es hilft Ihnen, spezifische Elemente im Auge zu behalten.

Warum brauchen wir Refs?

Vielleicht fragen Sie sich, "Warum können wir nicht einfach reguläres JavaScript verwenden, um Elemente auszuwählen?" Nun, in React versuchen wir, das direkte Manipulieren des DOM (Document Object Model) zu vermeiden, weil React eine eigene effiziente Methode zur Aktualisierung der Benutzeroberfläche hat. Es gibt jedoch Zeiten, in denen wir aus dem deklarativen Paradigma von React aussteigen und direkt mit DOM-Elementen arbeiten müssen. Hier kommen Refs ins Spiel!

Erstellen von Refs mit createRef()

Lassen Sie uns damit beginnen, wie man in React einen Ref erstellt. Wir verwenden eine Methode namens createRef().

Signatur der createRef-Methode

Die Signatur von createRef() ist ziemlich einfach:

React.createRef()

Das ist alles! Keine Parameter, keine Komplikationen. Es gibt ein einfaches Objekt mit einer einzigen Eigenschaft zurück: current. Initially ist diese current-Eigenschaft auf null gesetzt.

Sehen wir uns ein Beispiel an:

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}

render() {
return <div ref={this.myRef} />;
}
}

In diesem Beispiel erstellen wir einen Ref im Konstruktor und weisen ihn this.myRef zu. Dann im render-Methoden verbinden wir diesen Ref mit einem div-Element, indem wir die ref-Eigenschaft verwenden.

Anwendung von Refs

Nun, da wir unseren Ref erstellt haben, sehen wir uns an, wie wir ihn verwenden können. Es gibt einige Möglichkeiten, einen Ref anzuwenden:

1. Refs auf DOM-Elemente

Der häufigste Fall ist die Anwendung eines Refs auf ein DOM-Element:

class AutoFocusInput extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}

componentDidMount() {
this.inputRef.current.focus();
}

render() {
return <input ref={this.inputRef} />;
}
}

In diesem Beispiel erstellen wir einen Ref für ein Eingabe-Element. Nachdem das Komponente montiert wurde, verwenden wir den Ref, um die Eingabe automatisch zu fokussieren. Die current-Eigenschaft des Refs gibt uns Zugriff auf das tatsächliche DOM-Element.

2. Refs auf Klassenkomponenten

Refs können auch mit Klassenkomponenten verwendet werden:

class AutoScrollingList extends React.Component {
constructor(props) {
super(props);
this.listRef = React.createRef();
}

componentDidUpdate() {
const node = this.listRef.current;
node.scrollToItem(0);
}

render() {
return <MyListComponent ref={this.listRef} />;
}
}

In diesem Fall zeigt this.listRef.current auf die Instanz der MyListComponent-Klasse.

3. Refs und Funktionskomponenten

Funktionskomponenten können nicht direkt Refs zugewiesen werden, aber Sie können die forwardRef-Funktion verwenden, um Refs weiterzugeben:

const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.buttonRef = React.createRef();
}

render() {
return <FancyButton ref={this.buttonRef}>Klicke mich!</FancyButton>;
}
}

In diesem Beispiel verwendet FancyButton forwardRef, um den Ref an das tatsächliche Button-Element weiterzugeben.

Anwendungsfälle von createRef

Nun, da wir wissen, wie man Refs erstellt und anwendet, schauen wir uns einige häufige Anwendungsfälle an:

1. Verwalten von Fokus, Textauswahl oder Medienwiedergabe

class TextInput extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}

focusTextInput = () => {
this.inputRef.current.focus();
}

render() {
return (
<div>
<input type="text" ref={this.inputRef} />
<button onClick={this.focusTextInput}>Fokussiere die Eingabe</button>
</div>
);
}
}

Dieses Komponenten ermöglicht es uns, die Eingabe programmatisch zu fokussieren, wenn die Schaltfläche geklickt wird.

2. Auslösen imperativer Animationen

class Animator extends React.Component {
constructor(props) {
super(props);
this.elementRef = React.createRef();
}

animate = () => {
this.elementRef.current.classList.add('animated');
}

render() {
return (
<div>
<div ref={this.elementRef}>Animation starten!</div>
<button onClick={this.animate}>Starte Animation</button>
</div>
);
}
}

Hier verwenden wir einen Ref, um eine CSS-Klasse zu einem Element hinzuzufügen, was eine Animation auslöst.

3. Integration mit Drittanbieter-DOM-Bibliotheken

class MapComponent extends React.Component {
constructor(props) {
super(props);
this.mapRef = React.createRef();
}

componentDidMount() {
const mapLibrary = new FancyMapLibrary();
mapLibrary.createMap(this.mapRef.current);
}

render() {
return <div ref={this.mapRef} style={{width: '100%', height: '400px'}} />;
}
}

In diesem Beispiel verwenden wir einen Ref, um einer Drittanbieter-Kartenbibliothek Zugriff auf einen DOM-Knoten zu geben, in dem sie eine Karte rendern kann.

Schlussfolgerung

Refs sind ein mächtiges Werkzeug in React, das es uns ermöglicht, bei Bedarf aus dem deklarativen Paradigma auszusteigen. Sie bieten eine Möglichkeit, direkt auf DOM-Knoten oder React-Elemente zuzugreifen. Es ist jedoch wichtig, Refs maßvoll zu verwenden. In den meisten Fällen können Sie das erreichen, was Sie benötigen, über die deklarativen API von React. Aber wenn Sie diese zusätzliche Kontrolle benötigen, sind Refs da, um zu helfen!

Denken Sie daran, mit großer Macht kommt große Verantwortung. Verwenden Sie Refs weise, und Ihre React-Anwendungen werden es Ihnen danken!

Hier ist eine kurze Referenztabelle der Methoden, die wir besprochen haben:

Methode	Beschreibung	Beispiel
`React.createRef()`	Erstellt ein Ref-Objekt	`this.myRef = React.createRef();`
`ref`-Eigenschaft	Verbindet einen Ref mit einem React-Element	`<div ref={this.myRef} />`
`forwardRef`	Ermöglicht Funktionskomponenten, Refs zu empfangen	`const FancyButton = React.forwardRef((props, ref) => ...)`

Frohes Coden und möge Ihre Refs stets aktuell sein!

Credits: Image by storyset

Vorheriges Tutorial:

ReactJS - Rekoniliation

Nächstes Tutorial:

ReactJS - Render Props