Hinzufügen von Zuständen zu einer Anwendung
React verwaltet den Zustand auf verschiedene Weisen. Dieses Modul befasst sich mit einer der wichtigsten Vorgehensweisen: React-Hooks.
Ein Hook ist ein Mechanismus, der Ihnen den Zugriff auf die internen Abläufe von React ermöglicht. Sie können Hooks verwenden, um Code auszuführen, wenn Änderungen in React auftreten. Sie können Hooks auch verwenden, um etwas bei React zu registrieren, z. B. Zustände. Wenn Sie beispielsweise einen Zustand mithilfe des useState
-Hooks erstellen, erhalten Sie das Zustandsobjekt und eine Updater-Funktion zum Ändern des Hookwerts.
Szenario
Ein gängiges Verfahren, das viele Köche verwenden, ist „mise en place“, das vom französischen Ausdruck für „Put-in-Place“ stammt. Köche achten darauf, dass alle Elemente vorbereitet sind, bevor sie mit dem Kochen beginnen.
In Ihrer Rezeptanwendung möchten Sie es Benutzern ermöglichen, Zutaten als vorbereitet zu markieren. Hierzu erstellen Sie zunächst den Zustand und übergeben die Anzeigeinformationen an die Komponente. In der nächsten Lerneinheit erfahren Sie, wie Sie Ereignisse verarbeiten.
Hinzufügen des Zustands
Jedes Objekt und jeder Datentyp von JavaScript kann in React als zustandsbehaftet registriert werden. Die Funktion zum Registrieren des Objekts ist useState
. Die Funktion useState
legt den Anfangswert fest. Sie gibt das neu erstellte, zustandsbehaftete Objekt und eine andere Funktion zurück, die Sie zum Ändern des Werts verwenden können.
Hinweis
Der Zustand in React ist unveränderlich, d. h. er kann nicht geändert werden. Zum Ändern des Werts eines zustandsbehafteten Objekts ersetzen Sie dieses durch eine neue Instanz, die die entsprechenden Werte enthält. Die von useState
zurückgegebene Funktion verwaltet diesen Prozess.
Erweitern Sie im VS Code-Explorer den Ordner „src“, und öffnen Sie dann die Datei App.jsx. Beachten Sie das vorhandene
initialRecipe
-Objekt. Dieses Objekt verwenden Sie als Standardwert für das zustandsbehafteterecipe
-Objekt.Erstellen Sie das zustandsbehaftete
recipe
-Objekt und die FunktionsetRecipe
aususeState
. Fügen Sie hierzu den folgenden Code nach der ZeileTODO: Create recipe state
hinzu.const [ recipe, setRecipe ] = useState(initialRecipe);
In diesem Code ist
recipe
das zustandsbehaftete Objekt. Die FunktionsetRecipe
wird verwendet, umrecipe
durch neue Versionen zu ersetzen.Sie können
recipe
verwenden, um Eigenschaften an Komponenten zu übergeben. Im folgenden Code wird die KomponenteRecipeTitle
verwendet, um den Titel und das Feedback anzuzeigen. Übergeben Sie die Wertetitle
undfeedback
anRecipeTitle
, indem Sie den folgenden Code nach dem KommentarTODO: Pass recipe metadata to RecipeTitle
hinzufügen.<RecipeTitle title={recipe.title} feedback={recipe.feedback} />
Öffnen Sie die Datei RecipeTitle.jsx. Beachten Sie die vorhandene Komponente, die die Eigenschaften
title
undfeedback
anzeigt.
Testen der Seite
Speichern Sie alle Dateien.
Wechseln Sie zurück in Ihren Browser, und aktualisieren Sie die Anzeige. Nun sollten die Rezeptmetadaten auf der Seite angezeigt werden.