React är ett front-end JavaScript-ramverk. Även om det kan bli tråkigt att bygga HTML-sidor och hantera dem, gör React det enklare genom att bryta ner element på skärmen och deras logik i komponenter.

React ger mycket till bordet, men en av de mest användbara funktionerna är tillståndshantering. I den här artikeln kommer du att lära dig hur du hanterar tillstånd med hjälp av React Hooks. Innan du går vidare antar den här artikeln att du känner till grunderna i React.

Vad är krokar i ReactJS?

Kroken är ett nytt koncept som introducerats i React för att hantera tillstånd och annat funktioner hos React. Genom att använda krokar i React kan du undvika att skriva lång kod som annars skulle använda klasser. Följande exempel visar ett exempel på useState krok.

const [variabel, setVariable] = useState (startvärde);

Här är variabel är staten och setVariabel är funktionen som ställer in tillståndet. useState är kroken som håller initialvärdet för tillståndsvariabeln. Oroa dig inte om detta inte är meningsfullt för dig. I slutet av den här handledningen har du ett gediget grepp om krokar.

Det finns två typer av krokar:

• Basic krokar
  1. useState
  2. useEffect
  3. användContext
• Ytterligare krokar
  1. användRef
  2. användMemo
  3. användReducer

useState()

De useState krok hjälper till att hantera tillstånd. Tidigare i React-utvecklingen gjordes statlig förvaltning med hjälp av klasser. Tillståndssyntaxen skrevs inuti konstruktorn och använde detta nyckelord. Med introduktionen av React-hakar har utvecklare friheten att hantera tillstånd med hjälp av funktionella komponenter.

Du kan hänvisa till föregående exempel för syntaxen för React hooks. Det enklaste exemplet att förklara useState() är räknevariabelexemplet:

importera {useState} från "react";
function App() {
const [count, setCount] = useState (0);
lämna tillbaka (


Exempel på krokar

{räkna}

setCount (count+1)}>Lägg till
setCount (count-1)}>Subtrahera



);
}

De useState hook har en variabel och metod som används för att ställa in variabelns värde. De useState hook accepterar det initiala värdet för tillståndet som parameter. Du kan ställa in valfritt värde för räknevariabeln med hjälp av setCount metod.

Det finns två knappar i ovanstående kod för att öka och minska värdet på räkna variabel. Medan du ökar kan du lägga till +1 till det aktuella räkneläget och -1 för att minska antalet med 1.

useEffect

De useEffect hook uppdaterar tillståndet på webbsidan efter varje tillståndsändring. De useEffect krok introducerades för att ta bort biverkningarna av klassbaserade komponenter. Innan introduktionen av funktionsbaserade komponenter spårades förändringar i tillstånd med hjälp av livscykelkomponenterna: componentDidMount och componentDidUpdate. De useEffect hook accepterar en beroendematris. Alla ändringar i tillståndsvariablerna som nämns i beroendematrisen spåras och visas med hjälp av useEffect krok.

Ett klassiskt exempel på att använda useEffect krok är hämta data från ett API eller beräkna likes eller prenumerationer på ett inlägg.

useEffect(()=>{
// kod
},[beroendematris]);

Med tanke på exemplet ovan

importera { useState, useEffect } från "react";
function App() {
const [count, setCount] = useState (0);
useEffect(() => {
document.title = `Du har klickat ${count} gånger`;
}, [räkning]);
lämna tillbaka (


Exempel på krokar

{räkna}

 setCount (count + 1)}>Lägg till



);
}

När man passerar räkna tillståndsvariabel i useEffect beroendematris kontrollerar den om tillståndet har ändrats eller inte. Den ställer sedan in dokumentets titel till räknevariabeln.

användContext

De användContext hook hjälper till att skicka data genom komponenten utan att göra det manuellt via rekvisita. Det gör det snabbt och enkelt att använda Context API. Du kommer att ha en bättre förståelse efter att ha gått igenom ett exempel.

Först, förstå hur koden ser ut utan att använda Context. Som du kan se måste du skicka texten via rekvisita till barnkomponenten. För att undvika komplexitet kan du använda användContext krok.

exportera standardfunktion App() {
let text = "Hej, Välkommen till MUO";
lämna tillbaka (






);
}
const ChildComponent = ({ text }) => {
lämna tillbaka 
{text}
;
};

Skapa först en leverantör i din huvudfil (App.js).

const Context = React.createContext (null);

De App komponent är toppnivåkomponenten eller "överordnad" komponent. Du måste linda in hela komponenten i och skicka objektet eller data som du vill rendera på den underordnade komponenten.

exportera standardfunktion App() {
let text = "Hej, Välkommen till MUO";
lämna tillbaka (








);
}

Skapa nu en underordnad komponent och få åtkomst till texten med hjälp av användContext krok. Skicka Sammanhang variabel med hjälp av skapaKontext.

const ChildComponent = () => {
låt text = useContext (Kontext);
console.log (text);
lämna tillbaka 
{text}
;
};

Relaterad: JavaScript-ramverk värda att lära sig​​​​​

Mycket mer att utforska med React

Du har precis lärt dig grunderna i krokar. Det är en av de bästa funktionerna i React, och ganska utvecklarvänligt också. React är ett av de bästa frontend-ramverken att lära sig idag för jobbmöjligheter, skapa ensidiga appar eller helt enkelt för att bredda din programmeringskunskap.

På tal om att bredda din kunskap, att hantera tillstånd är bara en färdighet som React-utvecklare behöver träna på. Andra nyckelfunktioner, som rekvisita, förtjänar lika mycket av din uppmärksamhet.

Hur man använder rekvisita i ReactJS

Om du letar efter tips om hur du använder rekvisita i ReactJS har du kommit rätt.

Läs Nästa

Om författaren