ReactJS - Komponenten-Lebenszyklus

Hallo da draußen, zukünftige React-Entwickler! Heute machen wir uns auf eine aufregende Reise durch den Lebenszyklus von React-Komponenten. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Ihr freundlicher Guide sein und alles Schritt für Schritt erklären. Am Ende dieses Tutorials werden Sie ein solides Verständnis dafür haben, wie React-Komponenten zum Leben erwachen, wachsen und schließlich Abschied nehmen. Lassen Sie uns eintauchen!

Was ist ein Komponenten-Lebenszyklus?

Bevor wir uns dem Code zuwenden, lassen Sie uns darüber sprechen, was wir mit "Lebenszyklus" meinen. Genau wie wir Menschen durch verschiedene Lebensphasen gehen (Geburt, Wachstum und, na ja, Sie wissen schon...), haben auch React-Komponenten ihre eigenen Lebensphasen. Diese Phasen werden als Komponenten-Lebenszyklus bezeichnet.

Stellen Sie sich eine React-Komponente wie ein virtuelles Haustier vor. Wenn Sie es zuerst erstellen, wird es geboren. Dann wächst und ändert es sich, wenn Sie mit ihm interagieren. Schließlich verschwindet es, wenn Sie es nicht mehr benötigen. Das Verständnis dieses Lebenszyklus ist entscheidend für die Erstellung dynamischer und effizienter React-Anwendungen.

Die drei Hauptphasen eines Komponenten-Lebenszyklus

React-Komponenten durchlaufen drei Hauptphasen:

1. Montage (Geburt)
2. Aktualisierung (Wachstum)
3. Demontage (Abschied)

Lassen Sie uns jede dieser Phasen und die damit verbundenen Methoden erkunden.

1. Montage-Phase

Dies ist der Moment, in dem unsere Komponente geboren wird und zum DOM (Document Object Model – stellen Sie es sich als den Familienstammbaum Ihrer Webseite vor) hinzugefügt wird.

Wichtige Methoden in dieser Phase:

Methode	Beschreibung
constructor()	Der Konstruktor der Komponente, aufgerufen bevor sie montiert wird
render()	Die Methode, die die Komponente tatsächlich rendert
componentDidMount()	Aufgerufen, nachdem die Komponente in das DOM montiert wurde

Sehen wir uns ein einfaches Beispiel an:

import React, { Component } from 'react';

class BabyComponent extends Component {
constructor(props) {
super(props);
this.state = { message: "Ich bin gerade geboren!" };
console.log("Konstruktor: Hallo, ich werde erstellt!");
}

componentDidMount() {
console.log("componentDidMount: Ich bin jetzt im DOM!");
}

render() {
console.log("Render: Ich werde gerendert!");
return <h1>{this.state.message}</h1>;
}
}

export default BabyComponent;

In diesem Beispiel durchläuft unsere BabyComponent ihre Geburtphase. Der constructor wird zuerst aufgerufen, um den initialen Zustand zu setzen. Dann wird render aufgerufen, um die tatsächlichen DOM-Elemente zu erstellen. Schließlich wird componentDidMount aufgerufen, was anzeigt, dass unsere Komponente vollständig geboren und in das DOM eingefügt wurde.

2. Aktualisierungs-Phase

Diese Phase tritt auf, wenn sich der Zustand einer Komponente ändert oder sie neue Props empfängt.

Wichtige Methoden in dieser Phase:

Methode	Beschreibung
shouldComponentUpdate()	Entschließt, ob die Komponente neu gerendert werden sollte
render()	Rendert die Komponente mit aktualisierten Daten neu
componentDidUpdate()	Aufgerufen, nachdem die Komponente aktualisiert wurde

Lassen wir unser vorheriges Beispiel erweitern:

import React, { Component } from 'react';

class GrowingComponent extends Component {
constructor(props) {
super(props);
this.state = { age: 0 };
}

componentDidMount() {
this.ageInterval = setInterval(() => {
this.setState(prevState => ({ age: prevState.age + 1 }));
}, 1000);
}

shouldComponentUpdate(nextProps, nextState) {
return nextState.age % 5 === 0; // Nur alle 5 Jahre aktualisieren
}

componentDidUpdate() {
console.log(`Ich wurde ${this.state.age} Jahre alt!`);
}

render() {
return <h1$Ich bin ${this.state.age} Jahre alt</h1>;
}

componentWillUnmount() {
clearInterval(this.ageInterval);
}
}

export default GrowingComponent;

In diesem Beispiel "altert" unsere GrowingComponent jede Sekunde. Die shouldComponentUpdate-Methode stellt sicher, dass wir nur Geburtstage alle 5 Jahre feiern (um Kuchen zu sparen, wissen Sie). Wenn die Komponente tatsächlich aktualisiert wird, protokolliert componentDidUpdate eine Geburtstagsnachricht.

3. Demontage-Phase

Dies ist die Abschiedsphase, wenn eine Komponente aus dem DOM entfernt wird.

Wichtige Methode in dieser Phase:

Methode	Beschreibung
componentWillUnmount()	Aufgerufen, kurz bevor die Komponente demontiert und zerstört wird

In unserem GrowingComponent-Beispiel oben haben wir componentWillUnmount verwendet, um den Interval, den wir eingerichtet haben, zu清除, um Speicherlecks zu verhindern.

Arbeitsbeispiel der Lebenszyklus-API

Nun setzen wir alles zusammen in einem komplexeren Beispiel. Wir erstellen eine einfache "Stimmungs-Tracker"-App, die alle Lebenszyklusmethoden demonstrates.

import React, { Component } from 'react';

class MoodTracker extends Component {
constructor(props) {
super(props);
this.state = { mood: 'neutral', intensity: 5 };
console.log('Konstruktor: Mood Tracker wird erstellt');
}

componentDidMount() {
console.log('ComponentDidMount: Mood Tracker ist jetzt im DOM');
this.moodInterval = setInterval(() => {
const moods = ['glücklich', 'traurig', 'begeistert', 'nervös', 'neutral'];
const newMood = moods[Math.floor(Math.random() * moods.length)];
this.setState({ mood: newMood });
}, 5000);
}

shouldComponentUpdate(nextProps, nextState) {
return this.state.mood !== nextState.mood;
}

componentDidUpdate() {
console.log(`Stimmung aktualisiert auf: ${this.state.mood}`);
}

componentWillUnmount() {
console.log('ComponentWillUnmount: Auf Wiedersehen Mood Tracker!');
clearInterval(this.moodInterval);
}

handleIntensityChange = (e) => {
this.setState({ intensity: e.target.value });
}

render() {
console.log('Render: Mood Tracker wird gerendert');
return (
<div>
<h1>Aktuelle Stimmung: {this.state.mood}</h1>
<input
type="range"
min="1"
max="10"
value={this.state.intensity}
onChange={this.handleIntensityChange}
/>
<p>Intensität: {this.state.intensity}</p>
</div>
);
}
}

export default MoodTracker;

Diese MoodTracker-Komponente demonstrates alle Lebenszyklusmethoden, die wir besprochen haben. Sie ändert die Stimmung alle 5 Sekunden zufällig und ermöglicht es dem Benutzer, die Stimmungsintensität anzupassen.

Lebenszyklus-API in Expense Manager App

Nun betrachten wir, wie wir diese Lebenszyklusmethoden in einer praktischen Anwendung wie einem Expense Manager verwenden könnten.

import React, { Component } from 'react';

class ExpenseManager extends Component {
constructor(props) {
super(props);
this.state = { expenses: [], total: 0 };
}

componentDidMount() {
// Simulieren von expenses von einer API abrufen
setTimeout(() => {
const fetchedExpenses = [
{ id: 1, description: 'Lebensmittel', amount: 50 },
{ id: 2, description: 'Benzin', amount: 30 },
{ id: 3, description: 'Kinokarten', amount: 20 },
];
this.setState({ expenses: fetchedExpenses }, this.calculateTotal);
}, 1000);
}

shouldComponentUpdate(nextProps, nextState) {
// Nur aktualisieren, wenn sich die Summe geändert hat
return this.state.total !== nextState.total;
}

componentDidUpdate() {
console.log(`Summe der Ausgaben aktualisiert: $${this.state.total}`);
}

calculateTotal = () => {
const total = this.state.expenses.reduce((sum, expense) => sum + expense.amount, 0);
this.setState({ total });
}

render() {
return (
<div>
<h1>Expense Manager</h1>
<ul>
{this.state.expenses.map(expense => (
<li key={expense.id}>{expense.description}: ${expense.amount}</li>
))}
</ul>
<h2>Total: ${this.state.total}</h2>
</div>
);
}
}

export default ExpenseManager;

In dieser ExpenseManager-Komponente:

1. Verwenden wir componentDidMount, um Ausgabendaten von einer API abzurufen, wenn die Komponente zum ersten Mal geladen wird.
2. shouldComponentUpdate stellt sicher, dass wir nur neu rendern, wenn sich die Summe ändert, nicht für jede kleine Aktualisierung.
3. componentDidUpdate protokolliert die neue Summe, wenn sie sich ändert.

Durch die Nutzung dieser Lebenszyklusmethoden erstellen wir eine effizientere und reagierendere Ausgabenverwaltungsanwendung.

Das Verständnis des Komponenten-Lebenszyklus ist entscheidend für die Erstellung effizienter React-Anwendungen. Es ermöglicht Ihnen, zu steuern, wann bestimmte Aktionen ausgeführt werden, die Leistung zu optimieren und Ressourcen effektiv zu verwalten. Üben Sie weiter mit diesen Konzepten, und bald werden Sie komplexe, dynamische React-Anwendungen mit Leichtigkeit erstellen können!

Credits: Image by storyset