React er et front-end JavaScript-rammeverk. Selv om det kan bli kjedelig å bygge HTML-sider og administrere dem, gjør React ting enklere ved å dele opp skjermelementer og deres logikk i komponenter.

React bringer mye til bordet, men en av de mest nyttige funksjonene er state management. I denne artikkelen lærer du hvordan du administrerer tilstand ved hjelp av React Hooks. Før du fortsetter videre, forutsetter denne artikkelen at du kjenner det grunnleggende om React.

Hva er kroker i ReactJS?

Kroken er et nytt konsept introdusert i React for å administrere stat og annet funksjoner til React. Ved å bruke kroker i React kan du unngå å skrive lang kode som ellers ville brukt klasser. Følgende eksempel viser et eksempel på useState krok.

const [variabel, setVariable] = useState (startverdi);

Her er variabel er staten og settVariabel er funksjonen som setter tilstanden. useState er kroken som holder startverdien til tilstandsvariabelen. Ikke bekymre deg hvis dette ikke gir noen mening for deg. Ved slutten av denne opplæringen vil du ha et solid grep om kroker.

Det finnes to typer kroker:

• Grunnleggende kroker
  1. useState
  2. useEffect
  3. brukKontekst
• Ekstra kroker
  1. brukRef
  2. bruk Memo
  3. brukReducer

useState()

De useState krok hjelper med å administrere tilstanden. Tidligere i React-utvikling ble statlig ledelse utført ved hjelp av klasser. Tilstandssyntaksen ble skrevet inne i konstruktøren og brukte dette søkeord. Med introduksjonen av React-kroker har utviklere friheten til å administrere staten ved å bruke funksjonelle komponenter.

Du kan referere til det forrige eksemplet for syntaksen til React hooks. Det enkleste eksempelet å forklare useState() er eksempelet på tellevariabelen:

importer {useState} fra "react";
funksjon App() {
const [count, setCount] = useState (0);
komme tilbake (


Kroker eksempel

{telle}

setCount (count+1)}>Legg til
setCount (count-1)}>Strekk fra



);
}

De useState hook har en variabel og metode som brukes til å angi verdien til variabelen. De useState kroken aksepterer startverdien til tilstanden som parameter. Du kan angi hvilken som helst verdi for tellevariabelen ved å bruke setCount metode.

Det er to knapper i koden ovenfor for å øke og redusere verdien av telle variabel. Mens du øker, kan du legge til +1 til gjeldende telletilstand og -1 for å redusere antallet med 1.

useEffect

De useEffect hook oppdaterer tilstanden på nettsiden etter hver endring i tilstanden. De useEffect krok ble introdusert for å fjerne bivirkningene av klassebaserte komponenter. Før introduksjonen av funksjonsbaserte komponenter, ble endringer i tilstand sporet ved hjelp av livssykluskomponentene: componentDidMount og componentDidUpdate. De useEffect hook aksepterer en avhengighetsmatrise. Alle endringer i tilstandsvariablene nevnt i avhengighetsmatrisen spores og vises ved hjelp av useEffect krok.

Et klassisk eksempel på bruk av useEffect krok er hente data fra et API eller beregne likes eller abonnementer på et innlegg.

useEffect(()=>{
// kode
},[avhengighetsmatrise]);

Med tanke på eksemplet ovenfor

importer { useState, useEffect } fra "react";
funksjon App() {
const [count, setCount] = useState (0);
useEffect(() => {
document.title = `Du har klikket ${count} ganger`;
}, [telle]);
komme tilbake (


Kroker eksempel

{telle}

 setCount (count + 1)}>Legg til



);
}

Ved å passere telle tilstandsvariabel i useEffect avhengighetsarray, sjekker den om tilstanden har endret seg eller ikke. Den setter deretter dokumenttittelen til tellevariabelen.

brukKontekst

De brukKontekst hook hjelper til med å sende data gjennom komponenten uten å gjøre det manuelt via rekvisitter. Det gjør det raskt og enkelt å bruke Context API. Du vil ha en bedre forståelse etter å ha gått gjennom et eksempel.

Først må du forstå hvordan koden ser ut uten å bruke kontekst. Som du kan se, må du sende teksten via rekvisitter til underordnet komponent. For å unngå kompleksitet, kan du bruke brukKontekst krok.

eksporter standardfunksjon App() {
let text = "Hei, Velkommen til MUO";
komme tilbake (






);
}
const ChildComponent = ({ tekst }) => {
komme tilbake 
{tekst}
;
};

Først oppretter du en leverandør i hovedfilen din (App.js).

const Context = React.createContext (null);

De App komponent er toppnivåkomponenten eller "overordnet"-komponenten. Du må pakke inn hele komponenten i og send objektet eller dataene du vil gjengi på den underordnede komponenten.

eksporter standardfunksjon App() {
let text = "Hei, Velkommen til MUO";
komme tilbake (








);
}

Lag nå en underordnet komponent og få tilgang til tekstrekvisitten ved å bruke brukKontekst krok. Send meg Kontekst variabel ved hjelp av skape kontekst.

const ChildComponent = () => {
la tekst = brukeKontekst (Kontekst);
console.log (tekst);
komme tilbake 
{tekst}
;
};

I slekt: JavaScript-rammer verdt å lære​​​​​

Mye mer å utforske med React

Du har nettopp lært det grunnleggende om kroker. Det er en av de beste funksjonene til React, og ganske utviklervennlig også. React er et av de beste frontend-rammeverkene du kan lære i dag for jobbmuligheter, for å lage enkeltside-apper eller bare for å utvide programmeringskunnskapen din.

Når vi snakker om å utvide kunnskapen din, er å administrere tilstand bare én ferdighet som React-utviklere trenger å øve på. Andre nøkkelfunksjoner, som rekvisitter, fortjener like mye av oppmerksomheten din.

Hvordan bruke rekvisitter i ReactJS

Hvis du leter etter tips om hvordan du bruker rekvisitter i ReactJS, er du på rett sted.

Les Neste

Om forfatteren