Acest articol se adresează persoanelor care au avut deja prima abordare a reacției și care, ca începători, au îndoieli cu privire la modul în care setState funcționează și cum se folosește corect. De asemenea, ar trebui să ajute dezvoltatorii de la mijlocul la senior să folosească modalități mai curate și mai abstracte de setare a stării și să facă funcțiile de ordin superior să gestioneze și să abstractizeze starea.

Doar citește și distrează-te!

Deci, ia o ceașcă de cafea și continuă să citești! ?

Concepte de bază ale setState ()

Componentele React vă permit să împărțiți interfața cu utilizatorul (UI) în piese independente, refolosibile, astfel încât să vă puteți gândi la fiecare piesă izolat.

Conceptual, componentele sunt ca funcțiile JavaScript. Aceștia acceptă intrări arbitrare (numite „recuzită”) și returnează elemente React care descriu ce ar trebui să apară pe ecran.

Dacă trebuie să oferiți utilizatorului posibilitatea de a introduce ceva sau de a schimba într-un fel variabilele pe care componentele le primește ca recuzită, veți avea nevoie setState.

Fie că declarați o componentă ca funcție sau clasă, aceasta nu trebuie să își modifice niciodată propriile elemente de recuzită.

Toate componentele React trebuie să acționeze ca niște funcții pure în raport cu recuzita lor. Aceasta înseamnă funcții care nu încearcă niciodată să-și schimbe intrările și să returneze întotdeauna același rezultat pentru aceleași intrări.

Desigur, interfețele de aplicație sunt dinamice și se schimbă în timp. De aceea state a fost creat.

State permite componentelor React să își schimbe rezultatele în timp, ca răspuns la acțiunile utilizatorilor, la răspunsurile din rețea și la orice altceva, fără a încălca această regulă.

Componentele definite ca clase au câteva caracteristici suplimentare. Starea locală este o caracteristică disponibilă numai pentru clasa Componente.

setState este metoda API furnizată împreună cu biblioteca, astfel încât utilizatorul să poată defini și manipula starea în timp.

Trei reguli ale degetului mare atunci când se utilizează setState ()

Nu modificați statul direct

Cum sa devii un profesionist cu React setState in
modalități greșite și corecte de stabilire a stării

Actualizările de stat pot fi asincrone

React poate fi multiplu setState() apelează la o singură actualizare pentru performanță.

pentru că this.props și this.state poate fi actualizat asincron, nu trebuie să vă bazați pe valorile lor pentru calcularea stării următoare.

1611875050 764 Cum sa devii un profesionist cu React setState in
manipulați starea cu o abordare funcțională

Ar trebui să faceți întotdeauna acest tip de manipulare cu o abordare funcțională, furnizând state și props și întorcând noul state bazat pe primul.

Actualizările de stat sunt combinate

Când suni setState(), React îmbină obiectul pe care îl furnizați cu curentul state.

În exemplul de mai jos, actualizăm variabila dogNeedsVaccination independent de celălalt state variabile.

Fuziunea este superficială, deci this.setState({ dogNeedsVaccination: true }) lasă celelalte variabile intacte, înlocuind doar valoarea lui dogNeedsVaccination.

1611875050 908 Cum sa devii un profesionist cu React setState in

Respectați fluxul de date și evitați să indicați valoarea max

Datele curg în jos! Nici componentele părinte, nici copil nu pot ști dacă o anumită componentă este statală sau apatridă și nu ar trebui să le pese dacă este definită ca o funcție sau o clasă.

De aceea state este adesea numit local sau încapsulat. Nu este accesibil niciunei alte componente decât cea care o deține și o setează.

Cand tu setState o recuzită și folosiți-o în componenta dvs., rupeți fluxul de recuzită de redare. Dacă, dintr-un anumit motiv, recuzita trecută în componenta dvs. s-a schimbat în componenta părinte, copilul nu va reda automat magia?!

Să verificăm un exemplu:

1611875050 601 Cum sa devii un profesionist cu React setState in

Aici ai un Home Componentă care generează un număr magic la fiecare 1000ms și îl setează în propriul său state.

După aceea, redă numărul și invocă trei Child Componente (frați) care vor primi numărul magic cu scopul de a-l afișa folosind trei abordări diferite:

Prima abordare

Componenta ChildOfHome respectă fluxul în cascadă de recuzită React și, având în vedere că obiectivul este doar să arate numărul magic, redă props primit direct.

1611875051 590 Cum sa devii un profesionist cu React setState in

A doua abordare

Componenta ChildOfHomeBrother primește props de la părintele său și, invocând componentDidMount, setează numărul magic în state. Apoi redă state.magicNumber.

Acest exemplu nu funcționează pentru că render() nu știe că a prop s-a schimbat, deci nu declanșează redarea componentei. Deoarece componenta nu mai este redată, componentDidMount nu este invocat și afișajul nu este actualizat.

1611875051 48 Cum sa devii un profesionist cu React setState in

A treia abordare

De obicei, atunci când încercăm să o facem să funcționeze folosind a doua abordare, credem că lipsește ceva. În loc să facem un pas înapoi, continuăm să adăugăm lucruri la cod pentru a-l face să funcționeze!

Așadar, în această a treia abordare am adăugat componentDidUpdate pentru a verifica dacă există o modificare în props pentru a declanșa redarea componentei. Acest lucru nu este necesar și ne conduce la un cod necurat. De asemenea, aduce cu sine costuri de performanță care vor fi înmulțite cu numărul de ori în care facem acest lucru într-o aplicație mare în care avem o mulțime de componente și efecte secundare înlănțuite.

Acest lucru este greșit, cu excepția cazului în care trebuie să permiteți utilizatorului să modifice valoarea primită primită.

Dacă nu este nevoie să schimbați valoarea propului, încercați întotdeauna să mențineți lucrurile în funcție de fluxul React (Prima abordare).

Puteți verifica o pagină web funcțională cu acest exemplu pe care l-am pregătit pentru dvs. Eroare. Aruncă o privire și distrează-te?

De asemenea, verificați codul din Home.js și HomeCodeCleaned.js (fără elemente HTML) în repo-ul meu despre acest articol.

Cum să setState

Deci, în acest moment cred că este timpul să ne murdărim mâinile!

Să ne jucăm puțin cu setState și îmbunătățiți asta! Doar urmează și ia o altă ceașcă de cafea!

Să creăm un mic formular pentru a actualiza datele utilizatorului:

1611875051 260 Cum sa devii un profesionist cu React setState in
Mic exercițiu pe setState ()

Iată codul pentru exemplul de mai sus:

1611875051 839 Cum sa devii un profesionist cu React setState in
Componenta inițială de acasă

Ne stabilim state ca obiect și nu există nicio problemă, deoarece starea noastră actuală nu depinde de ultima noastră stare.

Ce se întâmplă dacă creăm încă un câmp de formular pentru a introduce și afișa numele de familie?

1611875052 795 Cum sa devii un profesionist cu React setState in
Caracteristică Nume
1611875052 469 Cum sa devii un profesionist cu React setState in
handleFormChange abstractizat

Grozav! Am abstractizat handleFormChange metodă pentru a putea gestiona toate câmpurile de intrare și setState.

Ce se întâmplă dacă adăugăm un buton de comutare pentru a marca datele ca valide sau nevalide și un contor pentru a ști câte modificări am făcut statului?

1611875052 927 Cum sa devii un profesionist cu React setState in
Captură de ecran care arată consola.log a stării componentei
1611875052 966 Cum sa devii un profesionist cu React setState in
handleFormChange actualizat cu casete de selectare și contoare de gestionare

Da! Ne legănăm! Am abstractizat o mulțime de lucruri!

Hmmm … Să presupunem că nu vreau o casetă de selectare pentru a controla isValid variabil, dar un simplu buton de comutare.

Să separăm, de asemenea, gestionarul contorului de această metodă. Funcționează bine, dar în situații mai complexe în care React are nevoie de modificări în lot / grup, nu este o politică bună să te bazezi pe this.state.counter variabilă pentru a adăuga încă una. Această valoare se poate schimba fără ca tu să fii conștient de aceasta.

Folosim o copie superficială a acesteia în momentul în care este invocată operațiunea și, în acel moment, nu știți dacă valoarea ei este cea pe care o așteptați sau nu!

Să mergem puțin funcțional!

1611875053 189 Cum sa devii un profesionist cu React setState in
Captură de ecran care afișează Toggle Valid / Invalid și console.log a variabilei state.counter
1611875053 1 Cum sa devii un profesionist cu React setState in
separarea dispozitivelor de control

Bine – Am pierdut abstracția deoarece am separat separatorii, dar este dintr-un motiv întemeiat!

Deci, în acest moment păstrăm handleFormChange trecând un obiect către setState Metoda API. Cu exceptia handleCounter și handleIsValid metodele sunt acum funcționale și încep prin apucarea stării curente și apoi, în funcție de starea respectivă, trecerea la următoarea.

Acesta este modul corect de a schimba state a variabilelor care depind de starea anterioară.

Dacă vrem console.log() modificări de stare ale firstName și lastName formulare de intrare de fiecare dată când apare o modificare? Hai sa incercam!

1611875053 291 Cum sa devii un profesionist cu React setState in
metoda logFields ()

Grozav! De fiecare dată handleFormChange apare (ceea ce înseamnă că s-a întâmplat o nouă apăsare a tastei) logFields() metoda este invocată și înregistrează starea curentă în consolă!

Să verificăm consola browserului:

1611875053 83 Cum sa devii un profesionist cu React setState in
captură de ecran a console.log a stării firstName și lastName

Aștepta! Ce s-a întâmplat aici, oameni buni? Jurnalul consolei este o schimbare înainte de introducerea formularului curent! De ce se întâmplă asta?

setState este asincron !!

Știam deja acest lucru, dar acum îl vedem cu ochii noștri! Ce se întâmplă acolo? Să aruncăm o privire la handleFormChange și logFields metodele de mai sus.

Asa ca handleFormChange metoda primește numele și valoarea evenimentului, apoi face o setState din aceste date. Apoi apelează handleCounter pentru a actualiza informațiile contorului și, în cele din urmă, invocă logFields metodă. logFields metoda apucă currentState și returnează „Eduard” în loc de „Eduardo”.

Lucrul este: setState este asincron și nu acționează în acest moment. React își face treaba și execută logFields prima metodă, plecarea setState pentru următoarea buclă de evenimente.

Dar cum putem evita acest tip de situație?

Ei bine, setState API are un callback pentru a evita această situație:

1611875053 431 Cum sa devii un profesionist cu React setState in
metoda API setState

Dacă vrem logFields() pentru a ține cont de modificările recente pe care le-am făcut statului, trebuie să-l invocăm în callback, astfel:

1611875054 186 Cum sa devii un profesionist cu React setState in
folosind setState () metodă API callback handler

Bine, acum funcționează!

Îi spunem React: „Hei Reacționează! Feriți-vă că atunci când invocați logFields metodă Vreau să ai state deja actualizat bine? Am încredere în tine!”

React spune: „Bine Edo! Mă voi ocupa de toate aceste loturi de lucruri pe care le fac de obicei în curtea din spate cu setState chipeș și numai când voi termina cu asta voi invoca logFields()! Om rece! Relaxa!”

1611875054 811 Cum sa devii un profesionist cu React setState in
captură de ecran a console.log () a fullName

Și, de fapt – a funcționat!

Bine tuturor! În acest moment ne-am ocupat de capcanele majore ale setState.

Ai curajul să treci dincolo de zid? Luați o ceașcă de cafea și să luăm cu adevărat o băutură …

Noțiuni de bază cu setState ()

Acum că avem handleCounter și handleIsValid metode și setState() exprimat cu funcții, putem compune actualizarea stării cu alte funcții! Compoziția îmi place! Hai să ne distrăm!

1611875054 716 Cum sa devii un profesionist cu React setState in
mâner de abstractizareIsValid

Putem lua logica înăuntru setState la o funcție din afara componentei clasei. Să-i spunem toggleIsValid. ☝️

1611875054 268 Cum sa devii un profesionist cu React setState in
funcția toggleIsValid

Acum această funcție poate trăi în afara componentei clasei, oriunde în aplicația dvs.

Ce se întâmplă dacă folosim o funcție de ordin superior?

1611875055 605 Cum sa devii un profesionist cu React setState in
schimbarea comutării este validată de o funcție de ordin superior

Wow! Acum nu invocăm toggleIsValid funcționează mai mult. Invocăm o funcție abstractă de ordin superior numită toggleKey și trecând o cheie (șir în acest caz) în ea.

Cum trebuie să schimbăm toggleIsValid funcționează acum?

1611875055 440 Cum sa devii un profesionist cu React setState in
toggleKey funcție de comandă superioară

Ce?! Acum avem o funcție numită toggleKey care primește un key și returnează o nouă funcție care schimbă starea în funcție de tasta furnizată.

Acest toggleKey poate fi într-o bibliotecă sau într-un fișier de ajutor. Poate fi invocat într-o mulțime de contexte diferite pentru a schimba starea a ceea ce doriți în opusul său.

Grozav!

Să facem același lucru cu handlerul contorului de incrementare:

1611875055 208 Cum sa devii un profesionist cu React setState in
handleCounter abstractizare pentru a invoca o funcție de ordin superior
1611875055 544 Cum sa devii un profesionist cu React setState in
incrementCounter funcție de ordin superior

Da! Functioneaza! Atât de frumos. Hai să nebunim acum …

Împușcând Luna și Revenind

Ce se întâmplă dacă creăm un generic makeUpdater funcție care primește funcția de transformare pe care doriți să o aplicați, ia cheia și returnează funcția de stare gestionând starea cu funcția de transformare și cheia? Un pic confuz? Sa mergem!

1611875056 74 Cum sa devii un profesionist cu React setState in
makeUpdater funcție de ordin superior

Ok, e suficient … Să ne oprim aici. ?

Puteți verifica tot codul pe care l-am făcut în acest sens Repo GitHub.

Ultimul, dar nu cel din urmă

Nu uitați să evitați utilizarea maximă a stării și să respectați cascada de recuzită de redare React.

Nu uita setState este asincron.

Nu uita setState poate lua un obiect sau o funcție

Nu uitați că ar trebui să treceți o funcție atunci când următoarea dvs. stare depinde de starea anterioară.

Bibliografie

  1. Documentația React
  2. Cursuri Reach Tech de Ryan Florence, pe care chiar îl recomand.

Mulțumesc foarte mult!