Föregående

Nästa

Lägga till tillstånd i ett program

Slutförd

React hanterar tillståndet på några olika sätt. Vi fokuserar på ett av de viktigaste sätten, React Hooks.

En hook är en mekanism som gör att du kan komma åt reacts inre funktioner. Du kan använda Hooks för att köra kod när något ändras i React. Eller använd dem för att registrera något med React, till exempel tillstånd. När vi skapar tillstånd med hjälp useState av Hook får vi till exempel tillståndsobjektet och en uppdateringsfunktion för att uppdatera Hook-värdet.

Scenario

En vanlig teknik som många kockar använder är mise en place, som är från den franska "som sätter på plats". Kockar ser till att alla föremål förbereds innan de börjar laga mat.

I vårt receptprogram vill vi att användarna ska kunna trycka på ingredienser för att markera dem som förberedda. Vi börjar med att skapa tillståndet och skicka visningsinformationen till komponenten. I nästa lektion ska vi utforska hur du hanterar händelser.

Lägg till tillstånd

Alla JavaScript-objekt eller datatyper kan registreras som tillståndskänsliga i React. Funktionen som används för att registrera objektet är useState. Funktionen useState anger det initiala värdet. Den returnerar det nyligen skapade tillståndskänsliga objektet och en annan funktion som du kan använda för att uppdatera värdet.

Kommentar

I React är tillståndet oföränderligt, vilket innebär att det inte kan ändras. Om du vill ändra värdet för ett tillståndskänsligt objekt ersätter du det med en ny instans som innehåller lämpliga värden. Funktionen som returneras av useState hanterar den här processen.

1. I VS Code Explorer expanderar du mappen src och öppnar sedan Filen App.jsx . Observera det befintliga initialRecipe objektet. Vi använder det här objektet som standardvärde för vår tillståndskänsliga recipe.

2. Skapa tillståndsobjektet recipe och setRecipe funktionen från useState. Om du vill göra det lägger du till följande kod efter raden som läser, TODO: Create recipe state.

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

   I den här koden recipe är det tillståndskänsliga objektet. Funktionen setRecipe används för att ersätta recipe med alla nya versioner.

3. Vi kan använda recipe för att skicka rekvisita till komponenter. I följande kod används komponenten RecipeTitle för att visa rubriken och feedbacken. title Skicka värdena och feedback till RecipeTitle genom att lägga till följande kod efter kommentaren som läser, TODO: Pass recipe metadata to RecipeTitle.

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

4. Öppna filen RecipeTitle.jsx. Observera den befintliga komponenten som visas title och feedback rekvisita.

Testa sidan

1. Spara alla filer.

2. Gå tillbaka till webbläsaren och uppdatera den. Nu bör du se receptmetadata som visas på sidan.

   

Fortsätt