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 en standardkonvention 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:

Vi bygger komponenten Counter, som kommer att hantera sitt eget tillstånd. När knappen Increment klickas uppdaterar vi tillståndet och utlöser en omrendering av komponenten.

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 den konventionella funktionssyntaxen;
• Rad 4: Vi initierar tillståndet med hooken useState;

1. count representerar värdet på räknaren. Dess initialvärde är 0, specificerat 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.

Exempel 2:

Vi konstruerar komponenten Form med sitt egna tillstånd. Vi ber användaren att ange sitt namn i inmatningsfältet, och beroende på deras inmatning ändrar vi 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 initialvärdet en tom sträng. Funktionen setUserName uppdaterar variabeln userName när det behövs.

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 Form med den vanliga funktionssyntaxen;
• Rad 4: Vi sätter det initiala tillståndet med hooken useState;

1. userName representerar värdet i inmatningsfältet, initialt satt till en tom sträng (""), specificerat inom parentesen i useState("");
2. setUserName är funktionen som låter oss uppdatera tillståndet vid behov.

• Raderna 6-9: Denna JavaScript-pilfunktion hanterar logiken för att uppdatera tillståndet. Den triggas när en användare skriver något i fältet. Vi hämtar inmatningsvärdet i funktionen med event.target.value. Vi använder sedan 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 tilldelar vi userName som initialt värde för inmatningen med attributet value;
2. På rad 16 använder vi attributet onChange för att ange vilken funktion som ska anropas när det sker en förändring i inmatningen.