ReactJS - State Management

Hallo liebe zukünftigen React-Superstars! ? Heute tauchen wir in eines der wichtigsten Konzepte von React ein: State Management. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind; ich werde Sie auf dieser Reise Schritt für Schritt führen. Holen Sie sich Ihr Lieblingsgetränk und los geht's!

Was ist State?

Stellen Sie sich vor, Sie bauen ein Kartenhaus. Jede Karte repräsentiert einen Informationensteil Ihrer App. Was passiert, wenn Sie die Position einer Karte ändern müssen? Richtig, es beeinflusst die gesamte Struktur! In React nennen wir diese dynamische, veränderbare Information "State".

State ist wie das Gedächtnis Ihres React-Komponenten. Es enthält Daten, die im Laufe der Zeit ändern können, und wenn sie sich ändern, aktualisiert React effizient Ihre Benutzeroberfläche, um diese Änderungen widerzuspiegeln.

Schauen wir uns ein einfaches Beispiel an:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Sie haben {count} Mal geklickt</p>
<button onClick={() => setCount(count + 1)}>
Klicken Sie mich
</button>
</div>
);
}

In diesem Beispiel ist count unser State. Er startet bei 0 und erhöht sich jedes Mal, wenn wir auf den Knopf klicken. Die Magie hierbei ist, dass React unseren Komponenten automatisch neu rendert, wenn count sich ändert, und aktualisiert, was wir auf dem Bildschirm sehen.

Definition eines State

Nun, da wir verstanden haben, was State ist, lernen wir, wie man ihn in unseren React-Komponenten definiert. In modernem React verwenden wir den useState Hook, um State zu definieren. Machen Sie sich keine Sorgen, wenn "Hook" abschreckend klingt – es ist nur eine spezielle Funktion, die es uns ermöglicht, React-Funktionen zu unseren Komponenten hinzuzufügen.

Hier ist die grundlegende Syntax:

const [stateName, setStateName] = useState(initialValue);

Lassen Sie uns das aufschlüsseln:

• stateName: Dies ist der Name Ihrer State-Variablen.
• setStateName: Dies ist eine Funktion, die es Ihnen ermöglicht, den State zu aktualisieren.
• initialValue: Dies ist der Startwert Ihres States.

Schauen wir uns das in Aktion mit einem komplexeren Beispiel an:

import React, { useState } from 'react';

function UserProfile() {
const [name, setName] = useState('');
const [age, setAge] = useState(0);
const [isStudent, setIsStudent] = useState(false);

return (
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Geben Sie Ihren Namen ein"
/>
<input
type="number"
value={age}
onChange={(e) => setAge(parseInt(e.target.value))}
placeholder="Geben Sie Ihr Alter ein"
/>
<label>
<input
type="checkbox"
checked={isStudent}
onChange={(e) => setIsStudent(e.target.checked)}
/>
Sind Sie ein Student?
</label>
<p>Name: {name}</p>
<p>Alter: {age}</p>
<p>Student: {isStudent ? 'Ja' : 'Nein'}</p>
</div>
);
}

In diesem Beispiel haben wir drei State-Variablen definiert: name, age und isStudent. Jede davon verwendet einen anderen Datentyp (String, Zahl und Boolean), was zeigt, wie vielseitig State sein kann.

Erstellung eines State-Objekts

Manchmal möchten Sie möglicherweise verwandte State-Variablen zusammenfassen. In solchen Fällen können Sie ein State-Objekt erstellen. Dies ist besonders nützlich, wenn Sie viele State-Variablen haben oder wenn sie eine logische Gruppe bilden.

Hier ist, wie Sie das tun können:

import React, { useState } from 'react';

function BookForm() {
const [book, setBook] = useState({
title: '',
author: '',
year: 2023,
isPublished: false
});

const handleInputChange = (e) => {
const { name, value, type, checked } = e.target;
setBook(prevBook => ({
...prevBook,
[name]: type === 'checkbox' ? checked : value
}));
};

return (
<form>
<input
type="text"
name="title"
value={book.title}
onChange={handleInputChange}
placeholder="Buchtitel"
/>
<input
type="text"
name="author"
value={book.author}
onChange={handleInputChange}
placeholder="Name des Autors"
/>
<input
type="number"
name="year"
value={book.year}
onChange={handleInputChange}
placeholder="Erscheinungsjahr"
/>
<label>
<input
type="checkbox"
name="isPublished"
checked={book.isPublished}
onChange={handleInputChange}
/>
Ist veröffentlicht?
</label>
<p>Buchdetails: {JSON.stringify(book)}</p>
</form>
);
}

In diesem Beispiel haben wir ein State-Objekt book erstellt, das alle Informationen über ein Buch enthält. Die Funktion handleInputChange verwendet den Spread-Operator (...), um ein neues Objekt mit allen bestehenden Eigenschaften von book zu erstellen und dann die spezifische Eigenschaft zu aktualisieren, die sich geändert hat.

Dieser Ansatz ist besonders nützlich, wenn Sie mit Formularen oder jeder Situation arbeiten, in der Sie mehrere verwandte State-Variablen haben.

Methoden zur State-Verwaltung

Hier ist eine Tabelle, die die Hauptmethoden zusammenfasst, die wir besprochen haben, um den State in React zu verwalten:

Erinnern Sie sich daran, dass das Beherrschen der State-Verwaltung der Schlüssel zum werden eines React-Ninjas ist! ? Es mag initially schwierig erscheinen, aber mit Übung wird es zur zweiten Natur. Weiter codieren, weiter experimentieren und vor allem: Spaß dabei haben!

In meinen Jahren des Unterrichtens habe ich herausgefunden, dass der beste Weg zum Lernen das Tun ist. Daher ermutige ich Sie, diese Beispiele zu nehmen, sie zu verändern, zu brechen und wieder aufzubauen. So werden Sie wirklich die Macht von Reacts State-Verwaltung verstehen.

Frohes Coden und möge der State mit Ihnen sein! ?

Credits: Image by storyset