React is een front-end JavaScript-framework. Hoewel het maken van HTML-pagina's en het beheren ervan vervelend kan zijn, maakt React de zaken eenvoudiger door elementen op het scherm en hun logica op te splitsen in componenten.

React brengt veel met zich mee, maar een van de handigste functies is statusbeheer. In dit artikel leer je hoe je de status beheert met React Hooks. Voordat je verder gaat, gaat dit artikel ervan uit dat je de basis van React kent.

Wat zijn haken in ReactJS?

De haak is een nieuw concept geïntroduceerd in React voor het beheren van staat en andere kenmerken van React. Door hooks te gebruiken in React, kun je voorkomen dat je lange code schrijft die anders klassen zou gebruiken. Het volgende voorbeeld toont een voorbeeld van de gebruikStatus haak.

const [variabele, setVariable] = useState (beginwaarde);

Hier de variabele is de staat en de setVariabele is de functie die de staat instelt. gebruikStatus is de haak die de beginwaarde van de toestandsvariabele bevat. Maak je geen zorgen als je hier geen zin in hebt. Aan het einde van deze tutorial heb je de haken goed onder de knie.

Er zijn twee soorten haken:

• Basishaken
  1. gebruikStatus
  2. gebruikEffect
  3. gebruikContext
• Extra haken
  1. gebruikRef
  2. gebruikMemo
  3. gebruikReducer

useState()

De gebruikStatus hook helpt bij het beheren van de staat. Eerder in React-ontwikkeling werd state management gedaan met klassen. De state-syntaxis is geschreven in de constructor en gebruikt de dit trefwoord. Met de introductie van React hooks hebben ontwikkelaars de vrijheid om de status te beheren met behulp van functionele componenten.

U kunt verwijzen naar het vorige voorbeeld voor de syntaxis van React hooks. Het eenvoudigste voorbeeld om uit te leggen useState() is het aantal variabele voorbeeld:

importeer {useState} van "react";
functie App() {
const [count, setCount] = useState (0);
opbrengst (


Haken voorbeeld

{Graaf}

setCount (count+1)}>Toevoegen
setCount (count-1)}>Aftrekken



);
}

De gebruikStatus hook heeft een variabele en methode die wordt gebruikt om de waarde van de variabele in te stellen. De gebruikStatus hook accepteert de beginwaarde van de status als parameter. U kunt elke waarde voor de variabele count instellen met de setCount methode.

Er zijn twee knoppen in de bovenstaande code om de waarde van de. te verhogen en te verlagen Graaf variabel. Tijdens het verhogen kunt u +1 toevoegen aan de huidige telstatus en -1 om de teller met 1 te verlagen.

gebruikEffect

De gebruikEffect hook werkt de status op de webpagina bij na elke verandering in de status. De gebruikEffect hook werd geïntroduceerd om de bijwerkingen van op klassen gebaseerde componenten te verwijderen. Vóór de introductie van op functie gebaseerde componenten werden statusveranderingen bijgehouden met behulp van de levenscycluscomponenten: componentDidMount en componentDidUpdate. De gebruikEffect hook accepteert een afhankelijkheidsmatrix. Alle wijzigingen in de statusvariabelen die in de afhankelijkheidsreeks worden genoemd, worden bijgehouden en weergegeven met behulp van de gebruikEffect haak.

Een klassiek voorbeeld van het gebruik van de gebruikEffect haak is gegevens ophalen uit een API of het berekenen van vind-ik-leuks of abonnementen op een bericht.

gebruikEffect(()=>{
// code
},[afhankelijkheidsmatrix]);

Gezien het bovenstaande voorbeeld:

import { useState, useEffect } van "react";
functie App() {
const [count, setCount] = useState (0);
gebruikEffect(() => {
document.title = `Je hebt ${count} keer geklikt`;
}, [Graaf]);
opbrengst (


Haken voorbeeld

{Graaf}

 setCount (tel + 1)}>Toevoegen



);
}

bij het passeren van de Graaf toestandsvariabele in de gebruikEffect afhankelijkheidsmatrix, het controleert of de status is gewijzigd of niet. Vervolgens wordt de documenttitel ingesteld op de variabele count.

gebruikContext

De gebruikContext hook helpt bij het doorgeven van gegevens door de component zonder dit handmatig te doen via rekwisieten. Het maakt het gebruik van de Context API snel en gemakkelijk. U zult een beter begrip hebben na het doornemen van een voorbeeld.

Begrijp eerst hoe de code eruitziet zonder Context te gebruiken. Zoals je kunt zien, moet je de tekst via rekwisieten doorgeven aan de onderliggende component. Om complexiteit te voorkomen, kunt u de gebruikContext haak.

export standaardfunctie App() {
let text = "Hallo, welkom bij MUO";
opbrengst (






);
}
const ChildComponent = ({ tekst }) => {
opbrengst 
{tekst}
;
};

Maak eerst een Provider in uw hoofdbestand (App.js).

const Context = React.createContext (null);

De App component is de component op het hoogste niveau of de "bovenliggende" component. U moet het hele onderdeel in de en geef het object of de gegevens die u wilt renderen door aan de onderliggende component.

export standaardfunctie App() {
let text = "Hallo, welkom bij MUO";
opbrengst (








);
}

Maak nu een onderliggende component en open de tekstprop met de gebruikContext haak. Geef de Context variabele met behulp van maakContext.

const KindComponent = () => {
laat tekst = useContext (Context);
console.log (tekst);
opbrengst 
{tekst}
;
};

Verwant: JavaScript-frameworks die het leren waard zijn​​​​​

Veel meer te ontdekken met React

Je hebt zojuist de basis van haken geleerd. Het is een van de beste functies van React en ook behoorlijk ontwikkelaarsvriendelijk. React is een van de beste frontend-frameworks om vandaag te leren voor vacatures, het maken van apps met één pagina of gewoon om je programmeerkennis te verbreden.

Over het verbreden van je kennis gesproken, het beheren van de staat is slechts één vaardigheid die React-ontwikkelaars moeten oefenen. Andere belangrijke kenmerken, zoals rekwisieten, verdienen net zo veel van uw aandacht.

Hoe rekwisieten te gebruiken in ReactJS

Als je op zoek bent naar tips over het gebruik van rekwisieten in ReactJS, dan ben je hier op de juiste plek.

Lees volgende

Over de auteur