State: Memorija komponente

Komponente često trebaju promeniti prikaz na ekranu u zavisnosti od interakcija. Pisanje u formu bi trebalo da osveži input polje, klik na “naredno” u carousel-u za slike treba promeniti prikazanu sliku, klik na “kupi” bi trebao da stavi proizvod u korpu. Komponente trebaju da “pamte” stvari: trenutnu vrednost input-a, trenutnu sliku, korpu sa proizvodima. U React-u, ova vrsta memorije koja je specifična za komponentu se naziva state.

Naučićete:

Kako da dodate state promenljivu sa useState Hook-om
Koji par vrednosti vraća useState Hook
Kako da dodate više od jedne state promenljive
Zašto se state naziva lokalnim

Kad obična promenljiva nije dovoljna

Ovde je komponenta koja renderuje sliku skulpture. Klikom na dugme “Naredno” trebala bi se prikazati naredna skulptura promenom index promenljive na 1, pa na 2 i tako dalje. Međutim, ovo neće raditi (možete probati!):

Fork

import { sculptureList } from './data.js';

export default function Gallery() {
  let index = 0;

  function handleClick() {
    index = index + 1;
  }

  let sculpture = sculptureList[index];
  return (
    <>
      <button onClick={handleClick}>
        Naredno
      </button>
      <h2>
        <i>{sculpture.name} </i> 
        napravio/la {sculpture.artist}
      </h2>
      <h3>  
        ({index + 1} od {sculptureList.length})
      </h3>
      <img 
        src={sculpture.url} 
        alt={sculpture.alt}
      />
      <p>
        {sculpture.description}
      </p>
    </>
  );
}

handleClick event handler ažurira lokalnu promenljivu index. Ali, dve stvari sprečavaju tu promenu da bude primenjena:

Lokalne promenljive se ne čuvaju između rendera. Kada React renderuje komponentu drugi put, renderuje je iznova—ne uzima u obzir nikakve promene u lokalnim promenljivama.
Promene lokalnih promenljiva neće okinuti renderovanje. React ne shvata da treba da renderuje komponentu ponovo sa novim podacima.

Da biste ažurirali komponentu sa novim podacima, potrebne su dve stvari:

Zadržavanje podataka između rendera.
Okidanje renderovanja komponente sa novim podacima (ponovno renderovanje).

useState Hook omogućava te dve stvari:

state promenljiva zadržava podatke između rendera.
state setter funkcija ažurira promenljivu i tera React da okine renderovanje komponente ponovo.

Dodavanje state promenljive

Da bi ste dodali state promenljivu, import-ujte useState iz React-a na vrhu fajla:

import { useState } from 'react';

Onda, zamenite ovu liniju:

let index = 0;

const [index, setIndex] = useState(0);

index je state promenljiva, a setIndex je setter funkcija.

Sintaksa sa [ i ] se naziva dekonstruisanje niza i omogućava vam da čitate vrednosti iz niza. Niz koji useState vraća uvek ima tačno dva člana.

Evo kako rade zajedno u handleClick:

function handleClick() {
  setIndex(index + 1);
}

Sada, klikom na dugme “Naredno” promeniće se odabrana skulptura:

Fork

import { useState } from 'react';
import { sculptureList } from './data.js';

export default function Gallery() {
  const [index, setIndex] = useState(0);

  function handleClick() {
    setIndex(index + 1);
  }

  let sculpture = sculptureList[index];
  return (
    <>
      <button onClick={handleClick}>
        Naredno
      </button>
      <h2>
        <i>{sculpture.name} </i> 
        napravio/la {sculpture.artist}
      </h2>
      <h3>  
        ({index + 1} od {sculptureList.length})
      </h3>
      <img 
        src={sculpture.url} 
        alt={sculpture.alt}
      />
      <p>
        {sculpture.description}
      </p>
    </>
  );
}

Upoznajte svoj prvi Hook

U React-u, useState, kao i ostale funkcije koje počinju sa “use”, naziva se Hook.

Hook-ovi su specijalne funkcije koje su dostupne isključivo u toku React renderovanja (što ćemo objasniti detaljnije na narednoj stranici). Omogućavaju vam da “se zakačite” za različite funkcionalnosti React-a.

State je samo jedna od tih funkcionalnosti, ali ćete upoznati i ostale Hook-ove kasnije.

Pitfall

Hook-ovi—funkcije koje počinju sa use—mogu biti pozvane samo na početku vaših komponenata ili vaših Hooks-ova. Ne možete pozivati Hook-ove unutar uslova, petlji, ili drugih ugnježdenih funkcija. Hook-ovi su funkcije, ali je korisno da na njih gledate kao bezuslovne deklaracije onoga što je komponenti potrebno. “Koristite” React funkcionalnosti na vrhu komponente slično kao što “import-ujete” module na vrhu fajla.

Anatomija `useState`-a

Kada pozovete useState, govorite React-u da želite da ta komponenta nešto zapamti:

const [index, setIndex] = useState(0);

U ovom slučaju, želite da React zapamti index.

Napomena

Konvencija je da se par nazove ovako const [something, setSomething]. Možete staviti bilo koja imena, ali konvencije čine kod lakšim za razumevanje na različitim projektima.

Jedini argument u useState je inicijalna vrednost vaše state promenljive. U ovom primeru, inicijalna vrednost index-a je postavljena na 0 sa useState(0).

Svaki put kad se komponenta renderuje, useState vam daje niz koji sadrži dve vrednosti:

state promenljiva (index) sa vrednošću koju ste sačuvali.
state setter funkcija (setIndex) koja može da ažurira state promenljivu i natera React da okine renderovanje komponente ponovo.

Evo toga i u praksi:

const [index, setIndex] = useState(0);

Vaša komponenta se renderuje prvi put. Pošto ste prosledili 0 u useState kao inicijalnu vrednost za index, vratiće [0, setIndex]. React pamti da je 0 poslednja state vrednost.
Ažurirate state. Kada korisnik klikne na dugme poziva se setIndex(index + 1). index je 0, tako da je to setIndex(1). Ovo govori React-u da zapamti da je index sada 1 i okida novi render.
Drugo renderovanje vaše komponente. React i dalje vidi useState(0), ali zato što React pamti da ste setovali index na 1, vratiće [1, setIndex].
I tako dalje!

Davanje komponenti više state promenljivih

Možete imati koliko god state promenljivih sa koliko god tipova podataka želite u jednoj komponenti. Ova komponenta ima dve state promenljive, broj index i boolean showMore koji se menja klikom na “Prikaži detalje”:

Fork

import { useState } from 'react';
import { sculptureList } from './data.js';

export default function Gallery() {
  const [index, setIndex] = useState(0);
  const [showMore, setShowMore] = useState(false);

  function handleNextClick() {
    setIndex(index + 1);
  }

  function handleMoreClick() {
    setShowMore(!showMore);
  }

  let sculpture = sculptureList[index];
  return (
    <>
      <button onClick={handleNextClick}>
        Naredno
      </button>
      <h2>
        <i>{sculpture.name} </i> 
        napravio/la {sculpture.artist}
      </h2>
      <h3>  
        ({index + 1} od {sculptureList.length})
      </h3>
      <button onClick={handleMoreClick}>
        {showMore ? 'Sakrij' : 'Prikaži'} detalje
      </button>
      {showMore && <p>{sculpture.description}</p>}
      <img 
        src={sculpture.url} 
        alt={sculpture.alt}
      />
    </>
  );
}

Dobra je ideja imati više state promenljivih ako im state-ovi nisu povezani, kao index i showMore u ovom primeru. Ali, ako primetite da često menjate dve state promenljive zajedno, može biti lakše da ih grupišete u jednu. Na primer, ako imate formu sa mnogo polja, zgodnije je imati jednu state promenljivu koja drži ceo objekat, umesto jedne state promenljive po polju. Pročitajte Odabir state strukture za više detalja.

Deep Dive

Kako React zna koji state da vrati?

Možda ste već primetili da useState poziv ne prima informaciju o tome na koju state promenljivu se odnosi. Ne postoji “identifikator” koji se prosleđuje u useState, pa kako onda zna koju od state promenljivih da vrati? Da li se oslanja na neku magiju poput parsiranja vaših funkcija? Odgovor je ne.

Umesto toga, da bi omogućili svoju konciznu sintaksu, Hook-ovi se oslanjaju na stabilan redosled poziva pri svakom renderovanju jedne komponente. Ovo radi veoma dobro u praksi, jer ako pratite pravilo od gore (“pozivajte Hook-ove samo na početku”), Hook-ovi će uvek biti pozvani u istom redosledu. Dodatno, linter plugin hvata većinu grešaka.

Interno, React čuva niz state parova za svaku komponentu. Takođe održava i trenutni indeks para koji je postavljen na 0 pre renderovanja. Svaki put kad pozovete useState, React vam daje naredni state par i povećava indeks. Možete pročitati više o ovom mehanizmu u React Hook-ovi: Nije magija, već samo nizovi.

Ovaj primer ne koristi React, ali vam daje ideju kako useState zapravo radi:

Fork

let componentHooks = [];
let currentHookIndex = 0;

// Kako useState radi unutar React-a (pojednostavljeno).
function useState(initialState) {
  let pair = componentHooks[currentHookIndex];
  if (pair) {
    // Ovo nije prvi render,
    // tako da state par već postoji.
    // Vrati ga i pripremi se za naredni Hook poziv.
    currentHookIndex++;
    return pair;
  }

  // Ovo je prvi put da renderujemo,
  // tako da kreiraj state par i sačuvaj ga.
  pair = [initialState, setState];

  function setState(nextState) {
    // Kada korisnik zatraži promenu state-a,
    // postavi novu vrednost u par.
    pair[0] = nextState;
    updateDOM();
  }

  // Sačuvaj par za naredna renderovanja
  // i pripremi se za naredni Hook poziv.
  componentHooks[currentHookIndex] = pair;
  currentHookIndex++;
  return pair;
}

function Gallery() {
  // Svaki useState() poziv će dobiti naredni par.
  const [index, setIndex] = useState(0);
  const [showMore, setShowMore] = useState(false);

  function handleNextClick() {
    setIndex(index + 1);
  }

  function handleMoreClick() {
    setShowMore(!showMore);
  }

  let sculpture = sculptureList[index];
  // Ovaj primer ne koristi React, pa
  // vrati objekat umesto JSX-a kao rezultat.
  return {
    onNextClick: handleNextClick,
    onMoreClick: handleMoreClick,
    header: `${sculpture.name} napravio/la ${sculpture.artist}`,
    counter: `${index + 1} od ${sculptureList.length}`,
    more: `${showMore ? 'Sakrij' : 'Prikaži'} detalje`,
    description: showMore ? sculpture.description : null,
    imageSrc: sculpture.url,
    imageAlt: sculpture.alt
  };
}

function updateDOM() {
  // Resetuj trenutni indeks Hook-a
  // pre renderovanja komponente.
  currentHookIndex = 0;
  let output = Gallery();

  // Osveži DOM da se poklapa sa rezultatom.
  // Ovo je deo koji React radi za vas.
  nextButton.onclick = output.onNextClick;
  header.textContent = output.header;
  moreButton.onclick = output.onMoreClick;
  moreButton.textContent = output.more;
  image.src = output.imageSrc;
  image.alt = output.imageAlt;
  if (output.description !== null) {
    description.textContent = output.description;
    description.style.display = '';
  } else {
    description.style.display = 'none';
  }
}

let nextButton = document.getElementById('nextButton');
let header = document.getElementById('header');
let moreButton = document.getElementById('moreButton');
let description = document.getElementById('description');
let image = document.getElementById('image');
let sculptureList = [{
  name: 'Homenaje a la Neurocirugía',
  artist: 'Marta Colvin Andrade',
  description: 'Iako je Marta Colvin pretežno poznata po apstraktnim temama koje aludiraju na pre-hispanske simbole, ova ogromna skulptura, koja je omaž neurohirurgiji, jedna je od njenih najpoznatijih remek dela.',
  url: 'https://i.imgur.com/Mx7dA2Y.jpg',
  alt: 'Bronzana statua dve skrštene ruke koje pažljivo drže ljudski mozak vrhovima prstiju.'  
}, {
  name: 'Floralis Genérica',
  artist: 'Eduardo Catalano',
  description: 'Ovaj ogromni (75 ft. ili 23m) srebrni cvet se nalazi u Buenos Ajresu. Dizajniran je da se pomera, zatvarajući svoje latice uveče ili kada duvaju jaki vetrovi, a otvarajući ih ujutru.',
  url: 'https://i.imgur.com/ZF6s192m.jpg',
  alt: 'Velika metalna skulptura cveta sa reflektujućim laticama nalik na ogledalo i snažnim prašnicima.'
}, {
  name: 'Eternal Presence',
  artist: 'John Woodrow Wilson',
  description: 'Wilson je poznat po svojoj preokupiranosti jednakošću, socijalnom pravdom, kao i suštinskim i duhovnim kvalitetima čovečanstva. Ova masivna (7ft. ili 2,13m) bronzana skulptura predstavlja ono što je on objasnio kao "simbolično crno prisustvo prožeto osećajem univerzalne humanosti".',
  url: 'https://i.imgur.com/aTtVpES.jpg',
  alt: 'Skulptura ljudske glave koja deluje sveprisutno i svečano. Zrači mirnoćom i spokojstvom.'
}, {
  name: 'Moai',
  artist: 'Nepoznati umetnik',
  description: 'Nalazi se na Uskršnjem ostrvu, gde postoji oko 1,000 moai očuvanih monumentalnih skulptura, koje su napravili prvobitni Rapa Nui ljudi, za koje se veruje da predstavljaju pretke Bogova.',
  url: 'https://i.imgur.com/RCwLEoQm.jpg',
  alt: 'Tri monumentalne biste sa neproporcionalno velikim glavama i namrštenim licima.'
}, {
  name: 'Blue Nana',
  artist: 'Niki de Saint Phalle',
  description: 'Nane su trijumfalna stvorenja, simboli ženstvenosti i majčinstva. Inicijalno, Saint Phalle je koristila tkaninu i pronađene objekte za Nane, ali je kasnije uvela poliester kako bi napravila živopisniji dojam.',
  url: 'https://i.imgur.com/Sd1AgUOm.jpg',
  alt: 'Velika mozaička skulptura neobične ženske figure u raznobojnom kostimu koji odiše radošću.'
}, {
  name: 'Ultimate Form',
  artist: 'Barbara Hepworth',
  description: 'Ova apstraktna bronzana skulptura je deo The Family of Man serije koja se nalazi u Jorkširskom parku skulptura. Hepworth je odlučila da ne pravi bukvalne reprezentacije sveta, već apstraktne forme inspirisane ljudima i pejzažima.',
  url: 'https://i.imgur.com/2heNQDcm.jpg',
  alt: 'Visoka skulptura tri elementa jedna na drugom koja podseća na ljudsku figuru.'
}, {
  name: 'Cavaliere',
  artist: 'Lamidi Olonade Fakeye',
  description: "Pošto potiče od četiri generacije drvorezbara, Fakeye-ova dela su mešavina tradicionalne i savremene Joruba tematike.",
  url: 'https://i.imgur.com/wIdGuZwm.png',
  alt: 'Složena drvena skulptura ratnika čije lice je fokusirano na konja ukrašenim šarama.'
}, {
  name: 'Big Bellies',
  artist: 'Alina Szapocznikow',
  description: "Alina je poznata po skulpturama izdeljenog tela kao metafore za krhkost i nestalnost mladosti i lepote. Ova skulptura prikazuje dva veoma realistična velika stomaka jednog na drugom, gde je svaki visok oko 5 stopa (1,5m).",
  url: 'https://i.imgur.com/AlHTAdDm.jpg',
  alt: 'Ova skulptura podseća na slapove nabora i dosta se razlikuje od stomaka na klasičnim skulpturama.'
}, {
  name: 'Terracotta Army',
  artist: 'Nepoznati umetnik',
  description: 'Terracotta Army je kolekcija terakota skulptura koje predstavljaju armiju Qin Shi Huang-a, prvog cara Kine. Armija se sastojala od preko 8,000 vojnika, 130 kola sa 520 konja i 150 članova konjice.',
  url: 'https://i.imgur.com/HMFmH6m.jpg',
  alt: '12 terakota skulptura svečanih vojnika, od kojih svaki ima jedinstvenu facijalnu ekspresiju i oklop.'
}, {
  name: 'Lunar Landscape',
  artist: 'Louise Nevelson',
  description: 'Nevelson je poznata po uklanjanju objekata iz ruševina Njujorka, od kojih je kasnije pravila monumentalne konstrukcije. Za ovo je koristila rasparene delove poput noge od kreveta, palice za žongliranje i delove sedišta, zakucavajući ih i lepeći u kutije koje podsećaju na kubističku geometrijsku apstrakciju prostora i forme.',
  url: 'https://i.imgur.com/rN7hY6om.jpg',
  alt: 'Crna mat skulptura gde su pojedinačni delovi na početku bili neprimetni.'
}, {
  name: 'Aureole',
  artist: 'Ranjani Shettar',
  description: 'Shettar spaja tradicionalno i moderno, prirodno i industrijsko. Njena umetnost se fokusira na vezu između čoveka i prirode. Njen rad se opisuje kao ubedljiv i apstraktno i figurativno, prokoseći gravitaciji, kao i "dobra sinteza neobičnih materijala".',
  url: 'https://i.imgur.com/okTpbHhm.jpg',
  alt: 'Bleda skulptura nalik na žicu postavljena na betonski zid spuštajući se na pod. Izgleda lako.'
}, {
  name: 'Hippos',
  artist: 'Taipei Zoo',
  description: 'Zoološki vrt u Tajpeju je naručio trg nilskih konja koji se igraju zaronjeni.',
  url: 'https://i.imgur.com/6o5Vuyu.jpg',
  alt: 'Grupa bronzanih skulptura nilskih konja koji kao da isplivavaju na trotoar.'
}];

// Učini da UI prikazuje inicijalni state.
updateDOM();

Ne morate ovo razumeti da bi koristili React, ali vam može koristiti kao mentalni model.

State je izolovan i privatan

State je lokalan za instancu komponente na ekranu. Drugim rečima, ako jednu komponentu renderujete dvaput, svaka će imati potpuno izolovan state! Promenom jednog nećete uticati na drugi.

U ovom primeru, Gallery komponenta od ranije je renderovana dvaput bez promena u njenoj logici. Probajte da kliknete dugmiće u svakoj galeriji. Primetite da su njihovi state-ovi nezavisni:

Fork

import Gallery from './Gallery.js';

export default function Page() {
  return (
    <div className="Page">
      <Gallery />
      <Gallery />
    </div>
  );
}

Ovo je ono što state čini drugačijim od običnih promenljivih koje biste deklarisali na vrhu modula. State nije vezan za određeni poziv funkcije niti za mesto u kodu, već je “lokalan” za specifično mesto na ekranu. Renderovali ste dve <Gallery /> komponente, pa im se state čuva odvojeno.

Primetite i da Page komponenta ne “zna” ništa o Gallery state-u niti da li on uopšte postoji. Za razliku od props-a, state je potpuno privatan u komponenti koja ga deklariše. Roditeljska komponenta ga ne može promeniti. Ovo vam omogućava da dodate ili uklonite state iz neke komponente bez uticaja na ostale komponente.

Šta ako poželite da obe galerije sinhronizuju state? Pravilan način da to uradite u React-u je da uklonite state iz dečjih komponenata i dodate ga u najbližeg zajedničkog roditelja. Narednih nekoliko stranica će se fokusirati na organizaciju state-a u jednoj komponenti, ali vratićemo se na ovu temu u Podela state-a među komponentama.

Recap

Koristite state promenljivu kada komponenta treba da “upamti” neke informacije između rendera.
State promenljive su deklarisane pozivanjem useState Hook-a.
Hook-ovi su specijalne funkcije koje počinju sa use. Omogućavaju vam da “se zakačite” za React funkcionalnosti poput state-a.
Hook-ovi mogu podsećati na import-e: moraju biti pozvani bezuslovno. Pozivanje Hook-ova, uključujući i useState, dozvoljeno je samo na početku komponenata ili drugog Hook-a.
useState Hook vraća par vrednosti: trenutni state i funkciju koja ga ažurira.
Možete imati više od jedne state promenljive. Interno, React ih prepoznaje po redosledu.
State je privatan za komponentu. Ako je renderujete na dva mesta, svaka će imati svoj state.

Probajte da rešite par izazova

Izazov 1 od 4:
Kompletirati galeriju

Kada pritisnete “Naredno” na poslednjoj skulpturi, kod prestaje da radi. Popravite logiku da biste to sprečili. Možete ovo rešiti dodavanjem dodatne logike u event handler ili onemogućavanjem dugmeta kada akcija nije moguća.

Kada ovo popravite, dodajte dugme “Prethodno” koje prikazuje prethodnu skulpturu. Ne bi trebalo da se skrši na prvoj skulpturi.

Fork

import { useState } from 'react';
import { sculptureList } from './data.js';

export default function Gallery() {
  const [index, setIndex] = useState(0);
  const [showMore, setShowMore] = useState(false);

  function handleNextClick() {
    setIndex(index + 1);
  }

  function handleMoreClick() {
    setShowMore(!showMore);
  }

  let sculpture = sculptureList[index];
  return (
    <>
      <button onClick={handleNextClick}>
        Naredno
      </button>
      <h2>
        <i>{sculpture.name} </i> 
        napravio/la {sculpture.artist}
      </h2>
      <h3>  
        ({index + 1} od {sculptureList.length})
      </h3>
      <button onClick={handleMoreClick}>
        {showMore ? 'Sakrij' : 'Prikaži'} detalje
      </button>
      {showMore && <p>{sculpture.description}</p>}
      <img 
        src={sculpture.url} 
        alt={sculpture.alt}
      />
    </>
  );
}

PreviousResponding to Events

NextRender and Commit

State: Memorija komponente

Naučićete:

Kad obična promenljiva nije dovoljna

Dodavanje state promenljive

Upoznajte svoj prvi Hook

Pitfall

Anatomija useState-a

Napomena

Davanje komponenti više state promenljivih

Deep Dive

Kako React zna koji state da vrati?

State je izolovan i privatan

Recap

Probajte da rešite par izazova

Izazov 1 od 4: Kompletirati galeriju

Anatomija `useState`-a

Izazov 1 od 4:
Kompletirati galeriju