ReactJS - Konstruktor: Der Grundbaustein von React-Komponenten

Hallo, angehende React-Entwickler! Heute tauchen wir in eines der grundlegenden Konzepte von React ein: den Konstruktor. Denkt euch den Konstruktor als Fundament eines Hauses vor – dort beginnt alles. Bis zum Ende dieser Lektion werdet ihr React-Komponenten wie ein Profi erstellen können!

Was ist ein Konstruktor?

Bevor wir uns den detailspezifischen Aspekten von React zuwenden, lassen wir uns erstmal anschauen, was ein Konstruktor im Allgemeinen Programmierjargon ist.

Ein Konstruktor ist eine spezielle Methode in einer Klasse, die automatisch aufgerufen wird, wenn ein Objekt dieser Klasse erstellt wird. Es ist sozusagen die Geburt eines Komponenten – das Erste, das passiert, wenn eure Komponente ins Leben tritt.

In React ist der Konstruktor der Ort, an dem wir den initialen Zustand unserer Komponente festlegen und Ereignisbehandler binden. Es ist die erste Gelegenheit für unsere Komponente, "Hallo, Welt!" zu sagen.

Schauen wir uns ein einfaches Beispiel an:

class Welcome extends React.Component {
constructor(props) {
super(props);
console.log("Hallo, ich bin geboren!");
}

render() {
return <h1>Willkommen bei React!</h1>;
}
}

In diesem Beispiel wird jedes Mal, wenn eine Welcome-Komponente erstellt wird, "Hallo, ich bin geboren!" in der Konsole ausgegeben. Es ist wie der erste Schrei des Komponenten!

Initialisierung von Props

Nun, lassen wir uns über Props sprechen. Props (Abkürzung für properties) sind die Art und Weise, wie Elternteile Komponenten Daten an ihre Kinder übergeben. Im Konstruktor können wir auf diese Props zugreifen und sie zur Initialisierung unserer Komponente verwenden.

Hier ist, wie wir das machen:

class Greeter extends React.Component {
constructor(props) {
super(props);
console.log(`Ich erhielt einen Namen: ${props.name}`);
}

render() {
return <h1>Hallo, {this.props.name}!</h1>;
}
}

In diesem Beispiel protokollieren wir den an unsere Greeter-Komponente übergebenen Namensprop. Beachtet den Aufruf von super(props) – das ist entscheidend! Es ruft den Konstruktor der übergeordneten Klasse (React.Component) auf und übergibt die Props. Vergesst nicht, super(props) zuerst in eurem Konstruktor aufzurufen.

Ihr könnt dies verwenden, um:

1. Empfangene Props zur Fehlersuche zu protokollieren
2. Berechnungen basierend auf Props durchzuführen
3. Den initialen Zustand basierend auf Props zu initialisieren (was wir im nächsten Abschnitt besprechen werden!)

Initialisierung des Zustands

Der Zustand ist der Ort, an dem Komponenten ihre veränderbaren Daten speichern. Der Konstruktor ist der perfekte Ort, um diesen Zustand zu initialisieren. Sehen wir uns das an:

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}

render() {
return <h1>Aktueller Zählerstand: {this.state.count}</h1>;
}
}

Hier initialisieren wir unseren Zustand mit einer count-Eigenschaft, die auf 0 gesetzt ist. Dies ist der einzige Ort, an dem ihr this.state direkt zuweisen sollt. An allen anderen Orten verwendet this.setState(), um den Zustand zu aktualisieren.

Ihr könnt auch Props verwenden, um den Zustand zu initialisieren:

class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {
secondsElapsed: 0,
interval: props.interval || 1000
};
}

// ... Rest des Komponenten
}

In diesem Beispiel verwenden wir eine Prop (interval), um unseren Zustand zu initialisieren, mit einem Standardwert von 1000, wenn keine Prop bereitgestellt wird.

Ereignisbindung

Die letzte große Verwendung des Konstruktors ist die Bindung von Ereignisbehandlern. In JavaScript sind Klassenmethoden standardmäßig nicht gebunden. Vergesst ihr die Bindung und übergibt sie an Ereignisbehandler, wird this undefined sein, wenn die Methode aufgerufen wird.

Hier ist, wie wir Methoden im Konstruktor binden:

class ClickCounter extends React.Component {
constructor(props) {
super(props);
this.state = { clicks: 0 };
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(prevState => ({
clicks: prevState.clicks + 1
}));
}

render() {
return (
<div>
<p>Clicks: {this.state.clicks}</p>
<button onClick={this.handleClick}>Klicke mich!</button>
</div>
);
}
}

In diesem Beispiel binden wir this.handleClick im Konstruktor. Dies stellt sicher, dass, wenn handleClick aufgerufen wird, this auf unsere Komponenteninstanz verweist, allowing us to call this.setState.

Alles zusammenfügen

Lassen wir uns eine Komponente erstellen, die all diese Konzepte verwendet:

class UserGreeting extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: false,
username: props.username || 'Gast'
};
this.toggleLogin = this.toggleLogin.bind(this);
}

toggleLogin() {
this.setState(prevState => ({
isLoggedIn: !prevState.isLoggedIn
}));
}

render() {
return (
<div>
<h1>Hallo, {this.state.username}!</h1>
<p>Du bist {this.state.isLoggedIn ? 'eingeloggt' : 'nicht eingeloggt'}.</p>
<button onClick={this.toggleLogin}>
{this.state.isLoggedIn ? 'Ausloggen' : 'Einloggen'}
</button>
</div>
);
}
}

Diese Komponente:

1. Initialisiert Props (username)
2. Rüstet den initialen Zustand (isLoggedIn und username) aus
3. Bindet die toggleLogin-Methode

Häufig verwendete Konstruktormethoden

Hier ist eine Tabelle der häufig verwendeten Methoden, die ihr in einem Konstruktor verwenden könnt:

Methode	Beschreibung
super(props)	Ruft den Elternkonstruktor auf
this.state = {...}	Initialisiert den Zustand
this.methodName = this.methodName.bind(this)	Binde eine Methode
console.log(props)	Protokolliert empfangene Props
this.intervalId = setInterval(...)	Rüstet Timer oder Intervalle aus

Denkt daran, der Konstruktor ist nur der Anfang der Reise eurer Komponente. Es ist der Ort, an dem ihr den Grundstein für alles andere legt. Nutzt ihn weise, und eure Komponenten werden einen großartigen Start haben!

Ich hoffe, diese Anleitung hat euch geholfen, den React-Konstruktor besser zu verstehen. Übt weiter, und bald werdet ihr React-Komponenten im Schlaf erstellen! Viel Spaß beim Coden!

Credits: Image by storyset