Hinzufügen von Zuständen zu einer Anwendung

Abgeschlossen

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.

1. 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 zustandsbehaftete recipe-Objekt.

2. Erstellen Sie das zustandsbehaftete recipe-Objekt und die Funktion setRecipe aus useState. Fügen Sie hierzu den folgenden Code nach der Zeile TODO: Create recipe state hinzu.

   const [ recipe, setRecipe ] = useState(initialRecipe);
   

   In diesem Code ist recipe das zustandsbehaftete Objekt. Die Funktion setRecipe wird verwendet, um recipe durch neue Versionen zu ersetzen.

3. Sie können recipe verwenden, um Eigenschaften an Komponenten zu übergeben. Im folgenden Code wird die Komponente RecipeTitle verwendet, um den Titel und das Feedback anzuzeigen. Übergeben Sie die Werte title und feedback an RecipeTitle, indem Sie den folgenden Code nach dem Kommentar TODO: Pass recipe metadata to RecipeTitle hinzufügen.

   <RecipeTitle title={recipe.title} feedback={recipe.feedback} />
   

4. Öffnen Sie die Datei RecipeTitle.jsx. Beachten Sie die vorhandene Komponente, die die Eigenschaften title und feedback anzeigt.

Testen der Seite

1. Speichern Sie alle Dateien.

2. Wechseln Sie zurück in Ihren Browser, und aktualisieren Sie die Anzeige. Nun sollten die Rezeptmetadaten auf der Seite angezeigt werden.