React je sprednji JavaScript okvir. Medtem ko lahko gradnja strani HTML in njihovo upravljanje postaneta dolgočasna, React olajša stvari tako, da razbije elemente na zaslonu in njihovo logiko na komponente.

React prinaša veliko na mizo, vendar je ena izmed najbolj uporabnih funkcij upravljanje stanja. V tem članku se boste naučili upravljati stanje s pomočjo React Hooks. Preden nadaljujete naprej, ta članek predpostavlja, da poznate osnove Reacta.

Kaj so hooks v ReactJS?

Kavelj je nov koncept, uveden v React za upravljanje stanja in drugega značilnosti Reacta. Z uporabo kavljev v Reactu se lahko izognete pisanju dolge kode, ki bi sicer uporabljala razrede. Naslednji primer prikazuje primer useState kavelj.

const [spremenljivka, setVariable] = useState (začetna vrednost);

Tukaj je spremenljivka je država in setVariable je funkcija, ki nastavi stanje. useState je kavelj, ki hrani začetno vrednost spremenljivke stanja. Ne skrbite, če vam to nima smisla. Do konca te vadnice boste dobro razumeli kljuke.

Obstajata dve vrsti kavljev:

• Osnovne kljuke
  1. useState
  2. useEffect
  3. useContext
• Dodatne kljuke
  1. uporabaRef
  2. useMemo
  3. uporabite Reducer

useState()

The useState kavelj pomaga upravljati stanje. Prej v razvoju Reacta se je upravljanje stanja izvajalo z uporabo razredov. Sintaksa stanja je bila zapisana znotraj konstruktorja in je bila uporabljena to ključna beseda. Z uvedbo kavljev React imajo razvijalci svobodo upravljanja stanja z uporabo funkcionalnih komponent.

Za sintakso kavljev React se lahko obrnete na prejšnji primer. Najenostavnejši primer za razlago useState() je primer spremenljivke štetja:

uvozi {useState} iz "react";
funkcija App() {
const [count, setCount] = useState (0);
vrnitev (


Primer kavljev

{count}

setCount (count+1)}>Dodaj
setCount (count-1)}>Odštej



);
}

The useState hook ima spremenljivko in metodo, ki se uporabljata za nastavitev vrednosti spremenljivke. The useState hook sprejme začetno vrednost stanja kot parameter. Za spremenljivko count lahko nastavite poljubno vrednost z uporabo setCount metoda.

V zgornji kodi sta dva gumba za povečanje in zmanjšanje vrednosti šteti spremenljivka. Med povečevanjem lahko dodate +1 trenutnemu stanju štetja in -1, da štetje zmanjšate za 1.

useEffect

The useEffect hook posodobi stanje na spletni strani po vsaki spremembi stanja. The useEffect Hook je bil uveden za odstranitev stranskih učinkov komponent, ki temeljijo na razredu. Pred uvedbo komponent, ki temeljijo na funkcijah, smo spremljali spremembe stanja s komponentami življenjskega cikla: componentDidMount in componentDidUpdate. The useEffect kavelj sprejme matriko odvisnosti. Vse spremembe v spremenljivkah stanja, omenjenih v nizu odvisnosti, se spremljajo in prikažejo s pomočjo useEffect kavelj.

Klasičen primer uporabe useEffect kavelj je pridobivanje podatkov iz API-ja ali izračun všečkov ali naročnin na objavo.

useEffect(()=>{
// Koda
},[matrika odvisnosti]);

Glede na zgornji primer

import { useState, useEffect } iz "react";
funkcija App() {
const [count, setCount] = useState (0);
useEffect(() => {
document.title = `Kliknili ste ${count}-krat`;
}, [šteto]);
vrnitev (


Primer kavljev

{count}

 setCount (število + 1)}>Dodaj



);
}

Ob prehodu šteti spremenljivka stanja v useEffect matrika odvisnosti, preveri, ali se je stanje spremenilo ali ne. Nato nastavi naslov dokumenta na spremenljivko count.

useContext

The useContext kavelj pomaga prenašati podatke skozi komponento, ne da bi to naredili ročno prek rekvizitov. Z njim je uporaba Context API hitra in enostavna. Po ogledu primera boste bolje razumeli.

Najprej razumejte, kako izgleda koda brez uporabe Context. Kot lahko vidite, morate besedilo posredovati podrejeni komponenti prek rekvizitov. Da bi se izognili zapletenosti, lahko uporabite useContext kavelj.

izvozi privzeto funkcijo App() {
let text = "Pozdravljeni, dobrodošli v MUO";
vrnitev (






);
}
const ChildComponent = ({ text }) => {
vrnitev 
{text}
;
};

Najprej ustvarite ponudnika v svoji glavni datoteki (App.js).

const Kontekst = React.createContext (nič);

The App komponenta je komponenta najvišje ravni ali "nadrejena" komponenta. Celotno komponento morate zaviti v in posredujte predmet ali podatke, ki jih želite upodobiti na podrejeno komponento.

izvozi privzeto funkcijo App() {
let text = "Pozdravljeni, dobrodošli v MUO";
vrnitev (








);
}

Zdaj ustvarite podrejeno komponento in dostopajte do besedilnega propa z uporabo useContext kavelj. Podaj Kontekst uporabo spremenljivke createContext.

const ChildComponent = () => {
pusti besedilo = useContext (kontekst);
console.log (besedilo);
vrnitev 
{text}
;
};

Povezano: Ogrodje JavaScript, ki jih je vredno naučiti​​​​​

Veliko več za raziskovanje z Reactom

Pravkar ste se naučili osnov kavljev. To je ena najboljših funkcij Reacta in tudi precej prijazna do razvijalcev. React je eden najboljših ogrodij frontend, ki se jih danes lahko naučite za zaposlitvene priložnosti, ustvarjanje enostranskih aplikacij ali preprosto za razširitev znanja programiranja.

Ko že govorimo o razširitvi znanja, je upravljanje stanja le ena veščina, ki jo morajo razvijalci Reacta vaditi. Druge ključne lastnosti, kot so rekviziti, si zaslužijo prav toliko vaše pozornosti.

Kako uporabljati rekvizite v ReactJS

Če iščete nasvete o uporabi rekvizitov v ReactJS, ste na pravem mestu.

Preberite Naprej

O avtorju