React je front-end JavaScript okvir. Iako izrada HTML stranica i upravljanje njima mogu postati zamorni, React olakšava stvari tako što razlaže elemente na zaslonu i njihovu logiku na komponente.

React donosi mnogo toga, ali jedna od najkorisnijih značajki je upravljanje stanjem. U ovom ćete članku naučiti kako upravljati stanjem koristeći React Hooks. Prije nego što nastavimo dalje, ovaj članak pretpostavlja da poznajete osnove Reacta.

Što su kuke u ReactJS-u?

Hook je novi koncept uveden u React za upravljanje stanjem i ostalim značajke Reacta. Korištenjem kukica u Reactu možete izbjeći pisanje dugog koda koji bi inače koristio klase. Sljedeći primjer pokazuje primjer useState kuka.

const [varijabla, setVariable] = useState (početna vrijednost);

Ovdje je varijabla je država i setVariable je funkcija koja postavlja stanje. useState je kuka koja drži početnu vrijednost varijable stanja. Ne brinite ako vam ovo nema smisla. Do kraja ovog vodiča imat ćete čvrsto razumijevanje za udice.

Postoje dvije vrste udica:

• Osnovne kuke
  1. useState
  2. useEffect
  3. useContext
• Dodatne kuke
  1. korištenjeRef
  2. useMemo
  3. koristiteReducer

useState()

The useState kuka pomaže upravljati stanjem. Ranije u razvoju Reacta, upravljanje stanjem se obavljalo pomoću klasa. Sintaksa stanja napisana je unutar konstruktora i korištena je ovaj ključna riječ. S uvođenjem React kuka, programeri imaju slobodu upravljati stanjem koristeći funkcionalne komponente.

Možete pogledati prethodni primjer za sintaksu React kuka. Najjednostavniji primjer za objašnjenje useState() je primjer varijable brojanja:

uvoz {useState} iz "react";
funkcija App() {
const [broj, setCount] = useState (0);
povratak (


Primjer udica

{računati}

setCount (broj+1)}>Dodaj
setCount (count-1)}>Subtract



);
}

The useState hook ima varijablu i metodu koja se koristi za postavljanje vrijednosti varijable. The useState hook prihvaća početnu vrijednost stanja kao parametar. Možete postaviti bilo koju vrijednost za varijablu brojanja pomoću setCount metoda.

U gornjem kodu postoje dva gumba za povećanje i smanjenje vrijednosti računati varijabla. Tijekom povećanja, možete dodati +1 trenutnom stanju brojanja i -1 za smanjenje broja za 1.

useEffect

The useEffect hook ažurira stanje na web stranici nakon svake promjene stanja. The useEffect hook je uveden kako bi se uklonile nuspojave komponenti temeljenih na klasi. Prije uvođenja komponenti temeljenih na funkcijama, promjene stanja praćene su pomoću komponenti životnog ciklusa: componentDidMount i componentDidUpdate. The useEffect hook prihvaća niz ovisnosti. Sve promjene u varijablama stanja koje se spominju u nizu ovisnosti prate se i prikazuju pomoću useEffect kuka.

Klasičan primjer korištenja useEffect kuka je dohvaćanje podataka iz API-ja ili izračunavanje lajkova ili pretplata na objavu.

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

S obzirom na gornji primjer

import { useState, useEffect } iz "react";
funkcija App() {
const [broj, setCount] = useState (0);
useEffect(() => {
document.title = `Kliknuli ste ${count} puta`;
}, [broj]);
povratak (


Primjer udica

{računati}

 setCount (broj + 1)}>Dodaj



);
}

Prilikom prolaska računati varijabla stanja u useEffect niz ovisnosti, provjerava je li se stanje promijenilo ili ne. Zatim postavlja naslov dokumenta na varijablu count.

useContext

The useContext hook pomaže u prolasku podataka kroz komponentu bez da se to radi ručno putem rekvizita. To čini korištenje Context API-ja brzom i jednostavnom. Imat ćete bolje razumijevanje nakon što prođete kroz primjer.

Prvo, shvatite kako izgleda kod bez korištenja konteksta. Kao što vidite, morate proslijediti tekst preko props-a u podređenu komponentu. Kako biste izbjegli složenosti, možete koristiti useContext kuka.

izvoz zadana funkcija App() {
let text = "Pozdrav, dobrodošli u MUO";
povratak (






);
}
const ChildComponent = ({ text }) => {
povratak 
{tekst}
;
};

Prvo, stvorite pružatelja u svojoj glavnoj datoteci (App.js).

const Kontekst = React.createContext (null);

The App komponenta je komponenta najviše razine ili "roditeljska" komponenta. Morate zamotati cijelu komponentu u i proslijedite objekt ili podatke koje želite prikazati na podređenoj komponenti.

izvoz zadana funkcija App() {
let text = "Pozdrav, dobrodošli u MUO";
povratak (








);
}

Sada stvorite podređenu komponentu i pristupite tekstualnom propu koristeći useContext kuka. Prođite Kontekst korištenje varijable createContext.

const ChildComponent = () => {
neka tekst = useContext (Kontekst);
console.log (tekst);
povratak 
{tekst}
;
};

Povezano: JavaScript okviri vrijedni učenja​​​​​

Puno više za istraživanje uz React

Upravo ste naučili osnove udica. To je jedna od najboljih značajki Reacta, a također i prilično pogodna za razvojne programere. React je jedan od najboljih frontend okvira za učenje danas za prilike za posao, izradu aplikacija na jednoj stranici ili jednostavno za proširenje znanja o programiranju.

Govoreći o proširenju vašeg znanja, upravljanje stanjem samo je jedna vještina koju React programeri trebaju prakticirati. Ostale ključne značajke, poput rekvizita, zaslužuju isto toliko vaše pažnje.

Kako koristiti rekvizite u ReactJS-u

Ako tražite savjete o tome kako koristiti props u ReactJS-u, na pravom ste mjestu.

Pročitajte dalje

O autoru