ReactJS - Verwendung von useState: Ein Anfängerleitfaden

Hallo那里，未来的React-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt der React-Hooks zu sein, insbesondere den useState-Hook. Als jemand, der seit Jahren Programmierung unterrichtet, kann ich Ihnen sagen, dass das Verständnis der State-Verwaltung so ist wie das Fahrradfahren zu lernen - es mag zuerst wacklig erscheinen, aber wenn Sie den Dreh raus haben, werden Sie mit Leichtigkeit durch Ihre React-Projekte rasen!

Was ist useState und warum brauchen wir es?

Bevor wir ins Detail gehen, lassen Sie uns darüber sprechen, warum wir useState überhaupt brauchen. Stellen Sie sich vor, Sie bauen eine einfache.Counter-App. Sie möchten eine Zahl anzeigen und Schaltflächen haben, um sie zu erhöhen oder zu verringern. Wie würden Sie den aktuellen Zählerstand verfolgen? Genau hier kommt useState ins Spiel!

useState ist ein React-Hook, der es uns ermöglicht, State in unsere funktionalen Komponenten hinzuzufügen. Es ist so, als würde man seinem Komponenten ein Gedächtnis geben, um Dinge zwischen Renderungen zu erinnern.

Features von useState

Lassen Sie uns die wichtigsten Features von useState auseinandernehmen:

Feature	Beschreibung
Hinzufügen von State zu funktionalen Komponenten	useState ermöglicht es uns, State in funktionalen Komponenten zu verwenden, was zuvor nur in Klassenkomponenten möglich war.
Gibt ein Array zurück	useState gibt ein Array mit zwei Elementen zurück: den aktuellen State-Wert und eine Funktion zum Aktualisieren.
Kann jeden Wertetyp halten	Der State kann eine Zahl, eine Zeichenkette, eine Boolesche Variable, ein Objekt, ein Array oder jeden anderen JavaScript-Typ sein.
Verursacht Neurendern	Wenn der State aktualisiert wird, verursacht es ein Neurendern der Komponente, das die neuen State-Werte widerspiegelt.

Nun, da wir wissen, was useState leisten kann, lassen Sie uns es in die Tat umsetzen!

Anwendung des State-Hooks

Lassen Sie uns mit einem einfachen Beispiel beginnen - unserer Counter-App. So können wir es mit useState implementieren:

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>
);
}

Lassen Sie uns das auseinandernehmen:

1. Wir importieren useState von React.
2. Innerhalb unserer Komponente rufen wir useState(0) auf. Dies erstellt eine State-Variablen namens count mit einem初始值 von 0.
3. useState gibt ein Array zurück, das wir in count (den aktuellen State) und setCount (eine Funktion zum Aktualisieren) aufteilen.
4. In unserem JSX显示当前的计数并创建一个按钮，当点击时，调用 setCount um den Zähler zu erhöhen.

Jedes Mal, wenn der Button geklickt wird, wird setCount aufgerufen, der State aktualisiert und unsere Komponente mit dem neuen count-Wert neu gerendert.

Mehrere State-Variablen

Eine der schönen Dinge an useState ist, dass Sie es mehrmals in einer einzigen Komponente verwenden können. Lassen Sie uns unseren Counter erweitern, um einen Namen hinzuzufügen:

function NamedCounter() {
const [count, setCount] = useState(0);
const [name, setName] = useState('');

return (
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Geben Sie Ihren Namen ein"
/>
<p>{name ? `${name}'s Zähler` : 'Zähler'}: {count}</p>
<button onClick={() => setCount(count + 1)}>
Erhöhen
</button>
</div>
);
}

Hier verwenden wir useState zweimal - einmal für unseren count und einmal für die Namenseingabe. Jede State-Variablen ist完全独立， allowing uns, mehrere State-Pieces einfach zu verwalten.

Verwendung von Objekten als State

Während die Verwendung mehrerer useState-Aufrufe für unabhängige State-Teile großartig funktioniert, ist es manchmal bequemer, verwandte State in einem Objekt zu gruppieren. Lassen Sie uns sehen, wie wir das tun können:

function UserProfile() {
const [user, setUser] = useState({
name: '',
age: 0,
hobby: ''
});

const handleChange = (e) => {
const { name, value } = e.target;
setUser(prevUser => ({
...prevUser,
[name]: value
}));
};

return (
<div>
<input
name="name"
value={user.name}
onChange={handleChange}
placeholder="Name"
/>
<input
name="age"
type="number"
value={user.age}
onChange={handleChange}
placeholder="Alter"
/>
<input
name="hobby"
value={user.hobby}
onChange={handleChange}
placeholder="Hobby"
/>
<p>
{user.name} ist {user.age} Jahre alt und liebt {user.hobby}.
</p>
</div>
);
}

In diesem Beispiel verwenden wir einen einzigen useState-Aufruf, um ein Objekt mit mehreren Eigenschaften zu verwalten. Die handleChange-Funktion verwendet den Spread-Operator (...) um ein neues Objekt mit allen vorherigen Eigenschaften zu erstellen und aktualisiert die spezifische Eigenschaft, die geändert wurde.

Dieser Ansatz kann sehr nützlich sein, wenn man mit Formularen oder jeder Situation umgeht, in der man mehrere verwandte State-Teile hat.

Ein Wort der Warnung

Wenn Sie Objekte (oder Arrays) als State verwenden, denken Sie immer daran, ein neues Objekt beim Aktualisieren des States zu erstellen, anstatt das vorhandene zu修改. React verwendet Referenzgleichheit, um zu bestimmen, ob sich der State geändert hat, daher wird das direkte Ändern von Objekteigenschaften kein Neurendern auslösen.

Schlussfolgerung

Und dort haben Sie es, Leute! Wir haben die useState-Landschaft durchquert, von einfachen Zählern bis hin zur komplexen Verwaltung von Objekt-States. Erinnern Sie sich daran, dass das Beherrschen von useState wie jede neue Fähigkeit Übung erfordert. Lassen Sie sich nicht entmutigen, wenn es nicht sofort klappt - experimentieren Sie weiter, und bald werden Sie State wie ein Profi verwalten!

Bevor wir uns verabschieden, hier ist eine schnelle Zusammenfassung dessen, was wir gelernt haben:

1. useState ermöglicht es uns, State zu funktionalen Komponenten hinzuzufügen.
2. Es gibt ein Array mit dem aktuellen State und einer Funktion zum Aktualisieren zurück.
3. Wir können useState mehrmals für unabhängige State-Teile verwenden.
4. Objekte können als State verwendet werden, um verwandte Daten zu gruppieren.
5. Erstellen Sie immer neue Objekte beim Aktualisieren des Objekt-States.

Nun, gehen Sie hinaus und erstellen Sie erstaunliche, stateful React-Anwendungen! Und denken Sie daran, in der Welt von React ist die einzige Konstante der Wechsel des States!

Credits: Image by storyset