Hantering av Tillstånd med useState

Hooken useState är en grundläggande React-hook som gör det möjligt för funktionella komponenter att ha ett tillstånd. Den tillhandahåller ett sätt att deklarera och uppdatera tillståndsvariabler inom en komponent.

Syntax:

För att använda hooken useState anropar vi den och skickar in det initiala tillståndet (initialState) som argument. Den returnerar en array med två element: det aktuella tillståndsvärdet (state) och en funktion (setState) för att uppdatera tillståndet.

const [state, setState] = useState(initialState);

• Vi kan välja vilket ord som helst som namn för en state-variabel. Det rekommenderas att använda ett variabelnamn som tydligt beskriver vilket tillstånd som lagras eller uppdateras, såsom inputValue, page, number, name och så vidare;

• På samma sätt har vi flexibilitet när vi namnger funktionen setState. Det är dock standard att följa ett specifikt mönster: namnet på setState-funktionen bör börja med "set" följt av namnet på motsvarande tillståndsvariabel. Till exempel, om state-variabeln är mail, skulle motsvarande setState-funktion vanligtvis heta setMail.

Exempel 1:

Bygg komponenten Counter, som hanterar sitt eget tillstånd. När knappen Increment klickas uppdateras tillståndet och komponenten renderas om.

import React, { useState } from "react";

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

I detta exempel används hooken useState för att deklarera en tillståndsvariabel count med initialvärdet 0. Funktionen setCount används för att uppdatera variabeln count varje gång knappen klickas.

Rad-för-rad-förklaring:

• Rad 1: Vi importerar hooken useState från React-biblioteket för att använda dess funktionalitet;
• Rad 3: Vi definierar komponenten Counter med konventionell funktionssyntax;
• Rad 4: Vi initierar tillståndet med hooken useState;

1. count representerar värdet för räknaren. Dess initialvärde är 0, angivet inom parentesen i useState(0);
2. setCount är funktionen som uppdaterar tillståndet vid behov.

• Raderna 6-8: Denna JavaScript-arrowfunktion hanterar logiken för att uppdatera tillståndet. Den körs när knappen "increment" klickas. Inuti funktionen används setCount för att uppdatera tillståndet;
• Raderna 10-15: Renderar komponentens markup. På rad 12 visas det aktuella tillståndsvärdet (count). Knappen på rad 13 använder attributet onClick för att definiera vilken funktion som ska köras vid klick. I detta fall skickas funktionen increment.

Komplett appkod:

Exempel 2:

Vi konstruerar Form-komponenten med dess oberoende tillstånd. Användaren uppmanas att ange sitt namn i inmatningsfältet, och beroende på deras inmatning ändras det visade innehållet.

import React, { useState } from "react";

const Form = () => {
  const [userName, setUserName] = useState("");

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setUserName(inputValue);
  };

  return (
    <div>
      <input
        type="text"
        value={userName}
        onChange={handleChange}
        placeholder="Your name"
      />
      <p>Hello, {userName}!</p>
    </div>
  );
};

I detta exempel används hooken useState för att deklarera en tillståndsvariabel userName med ett initialt värde som en tom sträng. Funktionen setUserName uppdaterar variabeln userName när det behövs.

Rad-för-rad-förklaring:

• Rad 1: Import av hooken useState från React-biblioteket för att använda dess funktionalitet;
• Rad 3: Definition av komponenten Form med standardfunktion-syntax;
• Rad 4: Sättning av initialt tillstånd med hooken useState;

1. userName representerar värdet i inmatningsfältet, initialt satt till en tom sträng (""), specificerat inom parentesen för useState("");
2. setUserName är funktionen som möjliggör uppdatering av tillståndet vid behov.

• Raderna 6-9: Denna JavaScript arrow-funktion hanterar logiken för att uppdatera tillståndet. Den triggas när användaren skriver något i fältet. Inmatningsvärdet hämtas i funktionen via event.target.value. Därefter används funktionen setUserName för att uppdatera tillståndet med värdet från inmatningsfältet;
• Raderna 11-21: Komponentens markup renderas.

1. På rad 15 tilldelas userName som initialt värde för inmatningen via attributet value;
2. På rad 16 används attributet onChange för att ange vilken funktion som ska anropas vid förändring i inmatningen.

Fullständig appkod: