React.js za početnike - objašnjeni rekviziti i stanje

React.js jedna je od najčešće korištenih JavaScript knjižnica koju bi svaki front-end programer trebao znati. Razumijevanje što su rekviziti i stanje i razlike među njima velik je korak prema učenju React-a.

U ovom postu na blogu objasnit ću što su rekviziti i stanje, a pojasnit ću i neka od najčešće postavljanih pitanja o njima:

  • Što su rekviziti?
  • Kako prenosite podatke rekvizitima?
  • Što je država?
  • Kako ažurirate stanje komponente?
  • Što se događa kada se stanje promijeni?
  • Mogu li koristiti stanje u svakoj komponenti?
  • Koje su razlike između rekvizita i države?
Ako ste potpuni početnik za React, imam niz tutorijala o Reactu za početnike.

Što su rekviziti?

Props je kratica za svojstva i koriste se za prosljeđivanje podataka između React komponenata. Reactov protok podataka između komponenata je jednosmjeran (od roditelja do djeteta).

Kako prenosite podatke rekvizitima?

Evo primjera kako se podaci mogu prosljeđivati ​​pomoću rekvizita:

class ParentComponent extends Component { render() { return (  ); } } const ChildComponent = (props) => { return 

{props.name}

; };

Prvo, moramo definirati / dobiti neke podatke od roditeljske komponente i dodijeliti ih atributu „prop“ podređene komponente.

"Ime" je ovdje definirani oslonac i sadrži tekstualne podatke. Tada podatke možemo prosljeđivati ​​rekvizitima kao da dajemo argument funkciji:

const ChildComponent = (props) => { // statements };

I na kraju, koristimo točku notacije da pristupimo podacima o rekvizitu i prikažemo ih:

return 

{props.name}

;

Također možete pogledati moj video kako biste vidjeli kako se koriste rekviziti:

Što je država?

React ima još jedan poseban ugrađeni objekt nazvan state, koji komponentama omogućuje stvaranje i upravljanje vlastitim podacima. Dakle, za razliku od rekvizita, komponente ne mogu prenositi podatke sa stanjem, ali ih mogu stvoriti i njima upravljati interno.

Evo primjera koji pokazuje kako se koristi stanje:

class Test extends React.Component { constructor() { this.state = { id: 1, name: "test" }; } render() { return ( 

{this.state.id}

{this.state.name}

); } }

Kako ažurirate stanje komponente?

Država se ne smije mijenjati izravno, ali se može modificirati pomoću posebne metode koja se naziva setState( ).

this.state.id = “2020”; // wrong this.setState({ // correct id: "2020" });

Što se događa kada se stanje promijeni?

OK, zašto moramo koristiti setState( )? Zašto nam uopće treba sam državni objekt? Ako postavljate ova pitanja, ne brinite - uskoro ćete shvatiti stanje :) Dopustite mi da odgovorim.

Promjena stanja događa se na temelju korisničkog unosa, pokretanja događaja itd. Također, React komponente (sa stanjem) generiraju se na temelju podataka u stanju. Država ima početne podatke.

Dakle, kada se stanje promijeni, React se informira i odmah ponovno prikazuje DOM - ne cijeli DOM, već samo komponentu s ažuriranim stanjem. To je jedan od razloga zašto je React brz.

A kako React dobiva obavijest? Pogađate: sa setState( ). setState( )Način aktivira proces re-renderiranje za ažuriranih dijelova. React se informira, zna koje dijelove treba promijeniti i to brzo, bez ponovnog prikazivanja cijelog DOM-a.

Ukratko, postoje dvije važne točke na koje moramo obratiti pažnju prilikom korištenja stanja:

  • Država se ne smije mijenjati izravno - setState( )treba je koristiti
  • State utječe na izvedbu vaše aplikacije i stoga je ne biste trebali upotrebljavati nepotrebno

Mogu li koristiti stanje u svakoj komponenti?

Još jedno važno pitanje koje biste mogli postaviti o državi je gdje ga točno možemo koristiti. U prvim danima država se mogla koristiti samo u komponentama klase , a ne u funkcionalnim komponentama.

Zbog toga su funkcionalne komponente bile poznate i kao komponente bez državljanstva. Međutim, nakon uvođenja React Hooks-a , stanje se sada može koristiti i u klasi i u funkcionalnim komponentama.

Ako vaš projekt ne koristi React Hooks, tada stanje možete koristiti samo u komponentama klase.

Koje su razlike između rekvizita i države?

Na kraju, sažeto ćemo vidjeti glavne razlike između rekvizita i države:

  • Komponente primaju podatke izvana rekvizitima, dok vlastite podatke mogu stvarati i upravljati njima sa stanjem
  • Rekviziti se koriste za prosljeđivanje podataka, dok je država za upravljanje podacima
  • Podaci iz rekvizita su samo za čitanje i ne mogu ih mijenjati komponenta koja ih prima izvana
  • Podaci države mogu se mijenjati vlastitom komponentom, ali su privatni (ne može im se pristupiti izvana)
  • Rekviziti se mogu prenositi samo s roditeljske komponente na dijete (jednosmjerni tok)
  • Izmjena stanja trebala bi se dogoditi s setState ( )metodom

React.js jedna je od najčešće korištenih JavaScript knjižnica koje bi svaki front-end programer trebao znati.

Nadam se da će vam ovaj članak pomoći da razumijete rekvizite i stanje. Postoje i druge važne stvari koje treba pokriti o Reactu, a o njima ću nastaviti pisati kasnije u sljedećim člancima.

Ako želite saznati više o web razvoju, slobodno me pratite na Youtubeu !

Hvala na čitanju!