Šta su kuke i upotreba?

Šta je Hooks i koristi?

React je jedna od najpopularnijih biblioteka koje se danas koriste u web razvoju. Revolucionirao je način na koji su web aplikacije izgrađene, čineći ih lakšim i efikasnijim nego ikada prije. Jedan od ključnih razloga njegove popularnosti je uvođenje kukica, koje su programerima olakšale upravljanje stanjem u svojim aplikacijama.

U ovom članku ćemo detaljnije pogledati šta su hookovi i kako se mogu koristiti u React aplikacijama. Počećemo tako što ćemo raspravljati o konceptu stanja u React-u, pre nego što pređemo na objašnjenje šta su kuke i kako rade. Također ćemo dati primjere kako se kuke mogu koristiti u različitim tipovima React aplikacija.

Stanje u Reactu

Prije nego što budemo mogli raspravljati o kukicama, prvo moramo razumjeti koncept stanja u Reactu. U Reactu se stanje koristi za upravljanje podacima koje koristi komponenta. Ovi podaci mogu biti bilo šta od niza ili broja do niza ili objekta. Kada se stanje komponente promijeni, React automatski renderira komponentu kako bi odražavala novo stanje.

Postoje dva načina upravljanja stanjem u Reactu: korištenjem komponenti klase i korištenjem funkcionalnih komponenti. Komponente klase koriste posebnu metodu zvanu setState za ažuriranje stanja komponente, dok se funkcionalne komponente oslanjaju na kuke za upravljanje stanjem.

Šta su kuke?

Hooks su nova karakteristika u Reactu koja je predstavljena u verziji 16.8. Oni dozvoljavaju programerima da koriste stanje i druge React karakteristike u funkcionalnim komponentama. To znači da programeri sada mogu kreirati komponente koje koriste stanje bez potrebe da koriste komponente klase.

Kuke dolaze u različitim oblicima, od kojih svaka služi različitoj namjeni. Najčešće korištene kuke su useState, useEffect, useContext i useReducer. U nastavku ćemo detaljnije razgovarati o svakoj od ovih udica.

useState

UseState kuka se koristi za upravljanje stanjem u funkcionalnim komponentama. Uzima početnu vrijednost kao argument i vraća niz koji sadrži trenutno stanje i funkciju koja se može koristiti za ažuriranje stanja. Evo primjera kako se useState može koristiti:

```javascript
import React, { useState } iz "react";

function Primjer() {
const [broj, setCount] {{0}} useState(0);

povratak (

U ovom primjeru koristimo useState za upravljanje stanjem brojača. Početna vrijednost brojača je postavljena na 0 koristeći useState. Zatim koristimo setCount da ažuriramo vrijednost brojača svaki put kada se klikne na dugme.

useEffect

UseEffect kuka se koristi za izvođenje nuspojava u funkcionalnim komponentama. Nuspojave su sve radnje koje se izvode izvan komponente, kao što je dohvaćanje podataka iz API-ja ili ažuriranje naslova stranice.

UseEffect kuka uzima dva argumenta: funkciju koja izvodi nuspojavu i niz zavisnosti. Funkcija se poziva svaki put kada se komponenta renderira, a ovisnosti se koriste za određivanje kada treba pozvati funkciju. Evo primjera kako se useEffect može koristiti:

```javascript
import React, { useState, useEffect } iz "react";

function Primjer() {
const [broj, setCount] {{0}} useState(0);

useEffect(() => {
document.title=`Kliknuli ste ${count} puta`;
}, [broj]);

povratak (

U ovom primjeru koristimo useEffect za ažuriranje naslova stranice svaki put kada se brojač ažurira. Niz koji sadrži varijablu count prosljeđujemo u useEffect, koji govori Reactu da pozove funkciju samo kada se broj promijeni.

useContext

UseContext kuka se koristi za pristup podacima koji su pohranjeni u provajderu konteksta. Kontekst je način dijeljenja podataka između komponenti bez njihovog prosljeđivanja kroz props.

Da bismo koristili useContext, prvo moramo kreirati pružatelja konteksta pomoću funkcije createContext. Tada možemo koristiti useContext za pristup podacima pohranjenim u provajderu. Evo primjera kako se useContext može koristiti:

```javascript
import React, { useState, useContext } iz "react";

const ThemeContext=React.createContext("light");

function Primjer() {
const [tema, setTheme]=useState("light");

povratak (

setTheme("dark")}>Prebacite se na tamnu temu


);
}

funkcija Toolbar() {
const theme=useContext(ThemeContext);

povratak (

U ovom primjeru koristimo useContext za pristup varijabli teme pohranjenoj u ThemeContext provajderu. Varijablu teme možemo ažurirati klikom na dugme u komponenti Primer.

useReducer

UseReducer kuka se koristi za upravljanje složenim stanjem u funkcionalnim komponentama. Sličan je kukici useState, ali umjesto direktnog ažuriranja stanja, koristi funkciju reduktora za ažuriranje stanja.

Funkcija reduktora uzima dva argumenta: trenutno stanje i objekt akcije. Vraća novo stanje na osnovu akcije koja je izvršena. UseReducer kuka uzima funkciju reduktora i početno stanje kao argumente i vraća niz koji sadrži trenutno stanje i dispečersku funkciju koja se može koristiti za izvođenje radnji. Evo primjera kako se useReducer može koristiti:

```javascript
import React, { useReducer } iz "react";

reduktor funkcije (stanje, akcija) {
switch (action.type) {
"inkrement":
return { count: state.count + 1 };
"dekrement":
return { count: state.count - 1 };
zadano:
izbaciti novu grešku();
}
}

function Primjer() {
const [stanje, otprema] {{0}} useReducer(reducer, { count: 0 });

povratak (

U ovom primjeru koristimo useReducer za upravljanje stanjem brojača. Mi prosljeđujemo reduktorsku funkciju koja ažurira varijablu brojanja na osnovu akcije koja je izvršena. Zatim koristimo funkciju otpreme da izvršimo radnje.

Zaključak

Hooks je olakšao upravljanje stanjem u React aplikacijama nego ikad. Oni nam omogućavaju da kreiramo funkcionalne komponente koje mogu koristiti stanje i druge React karakteristike, bez potrebe da koristimo komponente klase. U ovom članku smo raspravljali o najčešće korištenim zakačivanjima u Reactu: useState, useEffect, useContext i useReducer. Također smo dali primjere kako se ove kuke mogu koristiti u različitim tipovima React aplikacija.

Razumijevanjem kako funkcionišu zakačice i kako ih koristiti, možete napisati efikasniji i održiviji kod u svojim React aplikacijama. Ako već niste, podstičemo vas da počnete koristiti kuke u vlastitim projektima i iskusite prednosti koje one donose vašem toku razvoja.