Kako dovesti reaktivnost u reakciju sa državama

Slika @igorovsyannykov iz tvrtke Unsplash
Ovo je dio moje serije „React za početnike“ o uvođenju Reacta, njegovih glavnih karakteristika i najboljih praksi koje treba slijediti. Dolazi još članaka!

Ako znate kako prikazati komponentu React - to je sjajno. A sada, dajmo našim komponentama vlastite podatke.

Izjava o odricanju odgovornosti: Ovaj se članak fokusira na ugrađeno stanje Reacta. Imajte na umu da stanje komponente i Redux nisu nespojivi jer je njihova svrha različita.

Po mom mišljenju, stanje komponente je specifično za područje komponente (za popunjavanje obrasca). Osim toga, Redux država pomaže u dijeljenju iste države među mnogim komponentama.

Trebam li državu?

Da biste naučili države, stvorimo komponentu Pitanja. Prikazat će pitanje da / ne i pitati za odgovor.

Naš upitnik sadrži samo tri funkcije:

  • konstruktor za inicijalizaciju (rekviziti i stanje),
  • answerQuestion je povratni poziv koji se pokreće kada korisnik odgovori
  • čine da vjerojatno već znate - prikazuje predložak komponente.

Ova komponenta ima dva različita stanja. Na pitanje nije odgovoreno, ili na pitanje ima odgovor.

Podupirači se koriste samo za oznaku pitanja, a osim toga, svrha države daleko je zanimljivija.

Stanje je komponenta memorije koja se pamti ako na pitanje ima odgovor. Ako je tako, zna se i odgovor.

Pretvorite stanje u rekvizite

Korištenje stanja u komponenti je jednostavno. Morate inicijalizirati stanje i pozvati setStatefunction kad god želite ažurirati njegov sadržaj.

Zamislite da ste sastavni dio. Ako se vaše stanje promijenilo, vaša bi reakcija bila da provjerite morate li ažurirati zaslon.

Tako to radi Reagirajte pozive ako seComponentUpdate prije upućivanja poziva (pogledajte dokumentaciju). Ova druga funkcija generirat će sljedeće virtualno DOM stanje (moj posljednji članak govori o tome).

Komponente dobivaju rekvizite iz drugih komponenti. Ako se ti rekviziti promijene, komponenta će se ažurirati.

Zapravo već znate kako to funkcionira - ali uzmimo za primjer anketu koja sadrži neko pitanje.

Istraživanje sadrži oznake pitanja u svom stanju i daje ga pitanju kao svojstvu.

Kada Anketa ažurira svoje stanje (poziva setState), aktivira se funkcija prikazivanja. Ako je to slučaj, šalje zahtjev za postavljanje pitanja (detalji u React doc).

Usvojite uzorak spremnika

Prekidanje razdvajanja pogleda i ostatka koda oduvijek je bila velika briga među programerima. Zato se većina dizajnerskih obrazaca koji se koriste u okvirima proteže od MVC uzorka.

Ako koristite React with Redux, već znate obrazac spremnika. Zapravo, to je ugrađena značajka Reduxa putem funkcije povezivanja.

Vrijeme je da podijelite komponentu Pitanja na dvije komponente.

Pitanje će biti odgovorno za prikazivanje rekvizita. Ova vrsta komponente naziva se ili funkcionalna, prezentacijska ili glupa komponenta.

QuestionContainer će se baviti upravljanjem državom.

Za usporedbu s MVC dizajnom, Question is View, a QuestionContainer je kontroler.

Ostale komponente kojima je potrebno QuestionContainer sada umjesto QuestionContainer-a koriste QuestionContainer. To je razmatranje prilično prihvaćeno u zajednici.

Pazite na setState anti-pattern

Upotreba ovog skupaStata prilično je jasna.

Sljedeće stanje proslijedite kao prvi i jedini parametar. Ažurirat će svojstva trenutnog stanja s novim prenesenim vrijednostima.

Ukratko, ne koristite this.stateand this.propsinside setState pozive.

Te varijable možda nemaju vrijednosti koje očekujete. React optimizira promjene stanja. Ono smanjuje višestruke promjene u jednu zbog problema s performansama (prije Virtualnih DOM optimizacija).

Bilo bi vam draže drugi oblik setState. Omogućite funkciju kao jedini parametar i koristite parametre prop i state (pogledajte dokumentaciju).

Kompletna komponenta ankete

U ovom smo članku opisali glavne državne uporabe u React-u. Kompletan kôd za komponentu Ankete možete pronaći u sljedećem Codepenu.

To se odnosilo na države. Naišli ste na komponente, rekvizite i stanja, a sada imate komplet za početnike za igranje s Reactom.

Nadam se da ste uživali čitajući ovaj članak i naučili ste puno stvari!

Ako vam je ovaj članak koristan, kliknite nekoliko puta gumb on da bi drugi pronašli članak i pokazali vam podršku!

Ne zaboravite da me pratite kako biste bili obaviješteni o svojim nadolazećim člancima

Ovo je dio moje serije „React za početnike“ o uvođenju Reacta, njegovih glavnih karakteristika i najboljih praksi koje treba slijediti.

Pogledajte moje ostale članke

➥ JavaScript

  • Kako poboljšati svoje JavaScript vještine pisanjem vlastitog okvira za razvoj web stranica
  • Česte pogreške koje treba izbjegavati tijekom rada s Vue.js

➥ Savjeti i trikovi

  • Zaustavite bolni JavaScript ispravljanje i prigrlite Intellij s Source Mapom
  • Kako smanjiti ogromne JavaScript pakete bez napora