React er en front-end JavaScript-ramme. Mens det kan blive kedeligt at bygge HTML-sider og administrere dem, gør React tingene lettere ved at bryde elementer på skærmen og deres logik ned i komponenter.

React bringer meget til bordet, men en af ​​de mest nyttige funktioner er tilstandsstyring. I denne artikel lærer du, hvordan du administrerer tilstand ved hjælp af React Hooks. Før du fortsætter videre, antager denne artikel, at du kender det grundlæggende i React.

Hvad er kroge i ReactJS?

Krogen er et nyt koncept introduceret i React til styring af tilstand og andet funktioner i React. Ved at bruge hooks i React kan du undgå at skrive lang kode, som ellers ville bruge klasser. Det følgende eksempel viser et eksempel på useState krog.

const [variabel, sætVariable] = useState (startværdi);

Her er variabel er staten og sætVariabel er den funktion, der sætter tilstanden. useState er krogen, der holder startværdien af ​​tilstandsvariablen. Bare rolig, hvis dette ikke giver nogen mening for dig. Ved slutningen af ​​denne øvelse har du et solidt greb om kroge.

Der er to typer kroge:

• Grundlæggende kroge
  1. useState
  2. useEffect
  3. brug kontekst
• Yderligere kroge
  1. brugRef
  2. brug Memo
  3. brug Reducer

useState()

Det useState krog hjælper med at styre tilstanden. Tidligere i React-udvikling blev statsforvaltningen udført ved hjælp af klasser. Tilstandssyntaksen blev skrevet inde i konstruktøren og brugte det her søgeord. Med introduktionen af ​​React hooks har udviklere frihed til at styre tilstand ved hjælp af funktionelle komponenter.

Du kan henvise til det foregående eksempel for syntaksen for React hooks. Det enkleste eksempel at forklare useState() er tællevariablen eksempel:

importer {useState} fra "react";
funktion App() {
const [count, setCount] = useState (0);
Vend tilbage (


Kroge eksempel

{tælle}

setCount (count+1)}>Tilføj
setCount (count-1)}>Stræk fra



);
}

Det useState hook har en variabel og metode, der bruges til at indstille værdien af ​​variablen. Det useState hook accepterer startværdien af ​​tilstanden som parameter. Du kan indstille enhver værdi for tællevariablen ved hjælp af setCount metode.

Der er to knapper i ovenstående kode til at øge og formindske værdien af tælle variabel. Mens du øger, kan du tilføje +1 til den aktuelle optællingstilstand og -1 for at formindske optællingen med 1.

useEffect

Det useEffect hook opdaterer tilstanden på websiden efter hver ændring i tilstanden. Det useEffect krog blev introduceret for at fjerne bivirkningerne af klassebaserede komponenter. Før introduktionen af ​​funktionsbaserede komponenter blev ændringer i tilstanden sporet ved hjælp af livscykluskomponenterne: componentDidMount og componentDidUpdate. Det useEffect hook accepterer et afhængighedsarray. Alle ændringer i tilstandsvariablerne nævnt i afhængighedsarrayet spores og vises ved hjælp af useEffect krog.

Et klassisk eksempel på brug af useEffect krog er hente data fra en API eller udregning af likes eller abonnementer på et opslag.

useEffect(()=>{
// kode
},[afhængighedsarray]);

I betragtning af ovenstående eksempel

importer { useState, useEffect } fra "react";
funktion App() {
const [count, setCount] = useState (0);
useEffect(() => {
document.title = `Du har klikket ${count} gange`;
}, [tælle]);
Vend tilbage (


Kroge eksempel

{tælle}

 setCount (count + 1)}>Tilføj



);
}

Ved at passere tælle tilstandsvariabel i useEffect afhængighedsarray, kontrollerer den, om tilstanden er ændret eller ej. Det sætter derefter dokumenttitlen til tællevariablen.

brug kontekst

Det brug kontekst hook hjælper med at sende data gennem komponenten uden at gøre det manuelt via rekvisitter. Det gør det hurtigt og nemt at bruge Context API. Du får en bedre forståelse efter at have gennemgået et eksempel.

Forstå først, hvordan koden ser ud uden at bruge Context. Som du kan se, skal du sende teksten via rekvisitter til underordnet komponent. For at undgå kompleksiteter kan du bruge brug kontekst krog.

eksporter standardfunktion App() {
let text = "Hej, velkommen til MUO";
Vend tilbage (






);
}
const ChildComponent = ({ tekst }) => {
Vend tilbage 
{tekst}
;
};

Først skal du oprette en udbyder i din hovedfil (App.js).

const Context = React.createContext (nul);

Det App komponent er komponenten på øverste niveau eller "overordnet" komponent. Du skal pakke hele komponenten ind i og videregive det eller de data, du vil rendere, til den underordnede komponent.

eksporter standardfunktion App() {
let text = "Hej, velkommen til MUO";
Vend tilbage (








);
}

Opret nu en underordnet komponent og få adgang til tekstrekvisiten ved hjælp af brug kontekst krog. Bestå Sammenhæng variabel ved hjælp af skabekontekst.

const ChildComponent = () => {
lad tekst = brugeKontekst (Kontekst);
console.log (tekst);
Vend tilbage 
{tekst}
;
};

Relaterede: JavaScript-rammer, der er værd at lære​​​​​

Meget mere at udforske med React

Du har lige lært det grundlæggende i kroge. Det er en af ​​de bedste funktioner i React, og det er også ret udviklervenligt. React er en af ​​de bedste frontend-rammer at lære i dag for jobmuligheder, oprettelse af enkeltside-apps eller blot for at udvide din programmeringsviden.

Når vi taler om at udvide din viden, så er administration af tilstand kun én færdighed, som React-udviklere skal øve sig på. Andre nøglefunktioner, såsom rekvisitter, fortjener lige så meget af din opmærksomhed.

Sådan bruges rekvisitter i ReactJS

Hvis du leder efter tips til, hvordan du bruger rekvisitter i ReactJS, er du på det rigtige sted.

Læs Næste

Om forfatteren