ReactJS - State Management Using React Hooks

Hallo zusammen, zukünftige React-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt der Zustandsverwaltung mit React Hooks. Als dein freundlicher Nachbarschaftsinformatiklehrer bin ich begeistert, dich durch dieses Abenteuer zu führen. Keine Sorge, wenn du neu im Programmieren bist – wir gehen Schritt für Schritt vor, und bevor du es merkst, wirst du den Zustand wie ein Profi verwalten!

Was ist Zustand in React?

Bevor wir ins Detail gehen, lassen wir uns klarmachen, was "Zustand" in React bedeutet. Stell dir vor, du baust eine Sandburg. Die aktuelle Form und Größe deiner Sandburg ist ihr "Zustand". Wenn du Sand hinzufügst oder entfernst, ändert sich der Zustand deiner Sandburg. Ähnlich verhält es sich in React, der Zustand repräsentiert die aktuelle Bedingung eines Komponenten – seine Daten, Erscheinungsbild oder Verhalten zu jedem Zeitpunkt.

Einführung in React Hooks

Nun lassen wir uns über React Hooks unterhalten. Stell dir Hooks als magische Werkzeuge vor, die deinen Komponenten Superkräfte verleihen. Sie ermöglichen funktionalen Komponenten, Zustände und andere React-Funktionen zu haben, ohne eine Klasse zu schreiben. Der Hook, auf den wir uns heute konzentrieren, ist useState.

Erstellen eines zustandsbehafteten Komponenten

Lassen wir mit der Erstellung eines einfachen zustandsbehafteten Komponenten beginnen. Wir werden einen Zähler erstellen, der erhöht, wenn du auf einen Button klickst.

import React, { useState } from 'react';

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

return (
<div>
<p>Du hast {count} Mal geklickt</p>
<button onClick={() => setCount(count + 1)}>
Klicke mich
</button>
</div>
);
}

Lassen wir das auseinandernehmen:

1. Wir importieren useState von React.
2. Innerhalb unserer Counter-Funktion rufen wir useState(0) auf. Dies erstellt eine Zustandsvariable count, initialisiert auf 0, und eine Funktion setCount, um sie zu aktualisieren.
3. Wir显示 den aktuellen count in einem Absatz.
4. Wenn der Button geklickt wird, rufen wir setCount(count + 1) auf, um den Zähler zu erhöhen.

Jedes Mal, wenn du auf den Button klickst, rendert React die Komponente mit dem aktualisierten Zähler neu. Es ist wie Magie, oder?

Einführung des Zustands in der Expense Manager App

Nun, da wir unsere Füße nass gemacht haben, tauchen wir tiefer ein mit einem praktischeren Beispiel – einer Expense Manager App. Wir werden einen Komponenten erstellen, der es Benutzern ermöglicht, Ausgaben hinzuzufügen.

import React, { useState } from 'react';

function ExpenseManager() {
const [expenses, setExpenses] = useState([]);
const [newExpense, setNewExpense] = useState('');
const [newAmount, setNewAmount] = useState('');

const addExpense = () => {
if (newExpense && newAmount) {
setExpenses([...expenses, { name: newExpense, amount: parseFloat(newAmount) }]);
setNewExpense('');
setNewAmount('');
}
};

return (
<div>
<h2>Expense Manager</h2>
<input
type="text"
value={newExpense}
onChange={(e) => setNewExpense(e.target.value)}
placeholder="Name der Ausgabe"
/>
<input
type="number"
value={newAmount}
onChange={(e) => setNewAmount(e.target.value)}
placeholder="Betrag"
/>
<button onClick={addExpense}>Ausgabe hinzufügen</button>
<ul>
{expenses.map((expense, index) => (
<li key={index}>{expense.name}: ${expense.amount}</li>
))}
</ul>
</div>
);
}

Wow, das ist viel aufzunehmen! Lassen wir das auseinandernehmen:

1. Wir haben drei Zustandsvariablen:

• expenses: Ein Array, um alle Ausgaben zu speichern
• newExpense: Ein String für den Namen einer neuen Ausgabe
• newAmount: Ein String für den Betrag einer neuen Ausgabe

2. Die addExpense-Funktion:

• Überprüft, ob sowohl newExpense als auch newAmount nicht leer sind
• Fügt ein neues Ausgabeanjekt in das expenses-Array ein
• Bereinigt die Eingabefelder

3. In der JSX:

• Wir haben zwei Eingabefelder für den Ausgabennamen und den Betrag
• Een Button, um die Ausgabe hinzuzufügen
• Eine Liste, die alle Ausgaben anzeigt

Erinnern dich die Sandburgen, die ich früher erwähnte? Das ist wie ein Sandkasten, in dem du jederzeit neue Burgen (Ausgaben) hinzufügen kannst. Jede Burg hat einen Namen und eine Größe (Betrag), und du kannst alle deine Burgen in der Liste unten sehen.

Methoden-Tabelle

Hier ist eine praktische Tabelle der Methoden, die wir verwendet haben:

Methode	Beschreibung
useState	Erstellt eine Zustandsvariable und eine Funktion, um sie zu aktualisieren
setExpenses	Aktualisiert das expenses-Array
setNewExpense	Aktualisiert den newExpense-String
setNewAmount	Aktualisiert den newAmount-String
map	Erstellt ein neues Array, indem eine Funktion auf jedes Element im Array aufgerufen wird

Schlussfolgerung

Glückwunsch! Du hast gerade deine ersten Schritte in die Welt der Zustandsverwaltung mit React Hooks unternommen. Wir haben gelernt, wie man zustandsbehaftete Komponenten erstellt, den Zustand aktualisiert und sogar eine kleine Expense Manager App gebaut.

Denke daran, das Lernen von React ist wie das Bauen von Sandburgen – fange klein an, experimentiere und habe keine Angst, alles umzustürzen und neu zu beginnen. Mit Übung wirst du很快 komplexere und schöne Anwendungen erstellen können.

Weiter codieren, weiter lernen und vor allem: Spaß haben! Bis zum nächsten Mal, dein freundlicher Nachbarschaftsinformatiklehrer, der sich verabschiedet. Frohes Reacten!

Credits: Image by storyset