Kaip tapti „React setState ()“ profesionalu per 10 minučių

Šis straipsnis skirtas žmonėms, kurie jau turėjo pirmąjį požiūrį į „React“ ir kuriems, kaip pradedantiesiems, kyla abejonių, kaip tai setStateveikia ir kaip teisingai jį naudoti. Tai taip pat turėtų padėti vidutinio ir vyresnio amžiaus žmonėms naudoti švaresnius ir abstraktesnius valstybės nustatymo būdus bei priversti aukštesnės eilės funkcijas valdyti ir abstrakčią būseną.

Tiesiog skaitykite ir linksminkitės!

Taigi paimkite puodelį kavos ir skaitykite toliau! ?

Pagrindinės „setState“ () sąvokos

„React Components“ leidžia suskaidyti vartotojo sąsają (NS) į nepriklausomus, daugkartinio naudojimo elementus, kad galėtumėte apie kiekvieną kūrinį galvoti atskirai.

Konceptualiai komponentai yra tarsi „JavaScript“ funkcijos. Jie priima savavališkus įvestis (vadinamus „rekvizitais“) ir grąžina „React“ elementus, apibūdinančius tai, kas turėtų pasirodyti ekrane.

Jei jums reikia suteikti vartotojui galimybę ką nors įvesti arba kokiu nors būdu pakeisti kintamuosius, kuriuos komponentas gauna kaip rekvizitus, jums reikės setState.

Nesvarbu, ar deklaruojate komponentą kaip funkciją, ar klasę, jis niekada neturi modifikuoti savo atramų.

Visi reaguoti komponentaituri veikti kaip grynos funkcijos savo atramų atžvilgiu. Tai reiškia funkcijas, kurios niekada nebando pakeisti įvesties ir visada grąžina tą patį rezultatą tiems patiems įėjimams.

Žinoma, programų vartotojo sąsajos yra dinamiškos ir laikui bėgant keičiasi. Štai kodėl statebuvo sukurta.

State leidžia „React“ komponentams laikui bėgant pakeisti savo išvestį, atsižvelgiant į vartotojo veiksmus, tinklo atsakymus ir bet ką kitą, nepažeidžiant šios taisyklės.

Komponentai, apibrėžti kaip klasės, turi keletą papildomų funkcijų. Vietinė būsena yra funkcija, kurią gali naudoti tik klasės komponentai.

setState yra API metodas, pateiktas su biblioteka, kad vartotojas galėtų apibrėžti ir manipuliuoti būsena laikui bėgant.

Trys nykščio taisyklės naudojant setState ()

Nekeiskite būsenos tiesiogiai

Narių atnaujinimai gali būti asinchroniški

„Reaguoti“ gali paketuoti kelis setState()skambučius į vieną atnaujinimą, kad būtų užtikrintas našumas.

Nes this.props ir this.stategali būti atnaujintas asinchroniškai, jūs neturėtumėte pasikliauti savo vertybes apskaičiavimo kitą valstybę.

Jūs visada turėtų padaryti šį manipuliavimo natūra su funkciniu požiūriu, tiekti stateir propsgrąžindami naujasis stateremiantis buvęs.

Narių naujiniai sujungiami

Kai skambinate setState(), „React“ sujungia jūsų pateiktą objektą į dabartinį state.

Toliau pateiktame pavyzdyje kintamąjį atnaujiname dogNeedsVaccinationnepriklausomai nuo kitų statekintamųjų.

Sujungimas yra negilus, todėl this.setState({ dogNeedsVaccination: true }) kiti kintamieji lieka nepažeisti, pakeičiant tik reikšmę dogNeedsVaccination.

Laikykitės duomenų srauto ir venkite nurodyti maks

Duomenys teka žemyn! Nei tėvai, nei vaikai negali žinoti, ar tam tikras komponentas yra valstybinis, ar be pilietybės, ir jiems neturėtų rūpėti, ar jis apibrėžiamas kaip funkcija, ar klasė.

Štai kodėl statejis dažnai vadinamas vietiniu arba kapsuliu. Jis nėra prieinamas jokiam kitam komponentui, išskyrus tą, kuris jį valdo ir nustato.

Kai jūs naudojate setStateatramą ir naudojate ją savo komponente, jūs pažeidžiate perteikimo atramų srautą. Jei dėl kokių nors priežasčių jūsų komponentui perduota atrama pasikeitė pagrindiniame komponente, vaikas nebus automatiškai pateikiamas automatiškai?

Patikrinkime pavyzdį:

Čia jūs turite Homekomponentą, kuris generuoja stebuklingą skaičių kiekvienam 1000 ms ir nustato jį į savo state.

Po to jis pateikia skaičių ir pasikviečia tris Childkomponentus (brolius / seseris), kurie gaus stebuklingą skaičių, norėdami jį parodyti naudodami tris skirtingus metodus:

Pirmasis požiūris

Komponentas ChildOfHomegerbia „React props“ kaskados srautą ir, atsižvelgiant į tai, kad tikslas yra tik parodyti magišką skaičių, jis propstiesiogiai perteikia gautą.

Antrasis požiūris

Komponentas ChildOfHomeBrothergauna propsiš savo tėvų ir, pasikvietęs componentDidMount, nustato magišką skaičių state. Tada jis pateikia state.magicNumber.

Šis pavyzdys neveikia, nes render()nežino, kad a prop pasikeitė, todėl jis nesuaktyvina komponento perteikimo. Kadangi komponentas nebėra pateikiamas iš naujo, componentDidMountjis nekviečiamas ir ekranas nėra atnaujinamas.

Trečiasis požiūris

Paprastai, kai bandome, kad tai veiktų taikant antrąjį metodą, manome, kad kažko trūksta. Užuot žengę žingsnį atgal, mes vis įtraukiame į kodą dalykų, kad jis veiktų!

Taigi, componentDidUpdatetaikydami šį trečiąjį metodą, mes pridėjome, kad patikrintume, ar yra pakeitimų, propskad būtų pakeistas komponento atvaizdavimas. Tai nereikalinga ir veda mus į nešvarų kodą. Tai taip pat atneša našumo sąnaudas, kurios bus padaugintos iš kartų, kai tai darome didelėje programoje, kur turime daug grandininių komponentų ir šalutinių poveikių.

Tai neteisinga, nebent jums reikia leisti vartotojui pakeisti gautą rekvizito vertę.

Jei jums nereikia keisti rekvizito vertės, visada stenkitės, kad viskas veiktų pagal „React flow“ (pirmasis požiūris).

Veikiantį tinklalapį galite patikrinti naudodami šį pavyzdį, kurį paruošiau jums „Glitch“. Pasižvalgyti ir smagiai praleisti laiką?

Taip pat patikrinkite kodą, esantį mano repo apie šį straipsnį Home.jsir HomeCodeCleaned.js(be HTML elementų).

Kaip nustatyti valstybę

Taigi šiuo metu manau, kad laikas susitepti rankas!

Pažaiskime šiek tiek su tuo setStateir patobulinkime! Tiesiog sekite paskui ir paimkite dar vieną puodelį kavos!

Sukurkime mažą formą, kad atnaujintume vartotojo duomenis:

Štai aukščiau pateikto pavyzdžio kodas:

Mes nustatome statekaip objektą ir nėra jokių problemų, nes dabartinė būsena nepriklauso nuo paskutinės būsenos.

Ką daryti, jei sukursime dar vieną formos lauką įvesti ir rodyti pavardę?

Malonu! Abstraktas handleFormChangemetodas, kad galėtume tvarkyti visus įvesties laukus ir setState.

Ką daryti, jei pridėsime perjungimo mygtuką, kad duomenys būtų pažymėti kaip galiojantys ar neteisingi, ir skaitiklį, kad žinotume, kiek pakeitimų padarėme valstybėje?

Taip! Mes sūpuojame! Mes išskyrėme daugybę dalykų!

Hmmm ... Tarkime, kad nenoriu, kad žymimasis langelis valdytų isValidkintamąjį, o paprastas perjungimo mygtukas.

Taip pat atskirkime skaitiklio tvarkytuvą nuo šio metodo. Tai veikia gerai, tačiau sudėtingesnėse situacijose, kai „React“ reikia paketais / grupėmis atlikti pakeitimus, nėra gera politika pasikliauti this.state.counterkintamuoju ir pridėti dar vieną. Ši vertė gali pasikeisti jums to nežinant.

Mes naudojame negilią jo kopiją tuo metu, kai yra iškviečiama operacija, ir tuo metu jūs nežinote, ar jos vertė yra ta, kurios tikėjotės, ar ne!

Eikime šiek tiek funkcionaliai!

Gerai - praradome abstrakciją, nes atskyrėme tvarkytojus, bet tai yra rimta priežastis!

Taigi šiuo metu mes handleFormChangeperduodame objektą setStateAPI metodui. Bet handleCounterir handleIsValidmetodai dabar yra funkcionalūs ir prasideda griebiant dabartinę būseną, tada, priklausomai nuo tos būsenos, pakeičiant ją į kitą.

Tai yra teisingas būdas keisti statekintamuosius, kurie priklauso nuo ankstesnės būsenos.

Ką daryti, jei norime console.log()nurodyti įvesties firstNameir lastNameįvesties formų pokyčius kiekvieną kartą, kai įvyksta pokyčiai? Pabandykime!

Malonu! Kiekvieną kartą, kai handleFormChangeįvyksta (tai reiškia, kad įvyko naujas klavišo paspaudimas), logFields()iškviečiamas metodas ir užregistruojama esama būsena į konsolę!

Patikrinkime naršyklės pultą:

Laukti! Kas čia nutiko, žmonės? Konsolės žurnalas yra vienas pakeitimas prieš dabartinę formos įvestį! Kodėl tai vyksta?

„setState“ yra nesinchronizuota !!

Mes tai jau žinojome, bet dabar tai matome akimis! Kas ten vyksta? Pažvelkime į aukščiau pateiktus metodus handleFormChangeir logFieldsmetodus.

Taigi handleFormChangemetodas gauna įvykio pavadinimą ir vertę, tada atlieka setStatešių duomenų a. Tada jis kviečia handleCounteratnaujinti skaitiklio informaciją ir galų gale iškviečia logFieldsmetodą. logFieldsMetodas griebtuvai currentStateir grąžina "Eduardas" vietoj "Eduardo".

setStateReikalas toks: yra asinchroninis ir neveikia šiuo metu. „React“ atlieka savo darbą ir pirmiausia įvykdo logFieldsmetodą, palikdamas setStatekitai įvykių grandinei.

Bet kaip mes galime išvengti tokios situacijos?

Na, setStateAPI turi callbackišvengti šios situacijos:

Jei norime, kad „The“ logFields()atsižvelgtų į naujausius valstybės pakeitimus, turime juos iškviesti per atgalinį skambutį:

Gerai, dabar tai veikia!

Mes sakome React: „Ei, reaguok! Saugokitės, kad kai naudojate logFieldsmetodą, noriu, kad statejau turėtumėte atnaujintą tvarką? Aš pasitikiu tavimi!"

React sako: „Gerai Edo! Aš sutvarkysiu visą šitą daiktų partiją, kurią paprastai darau kieme su setStatedaiktu, ir pasinaudosiu tik tada, kai baigsiu logFields()! Kietas vyrukas! Atsipalaiduok! “

Tiesą sakant, tai pavyko!

Gerai visiems! Iki to laiko mes jau sutvarkėme pagrindinius spąstus setState.

Ar turite drąsos išeiti už sienos? Griebkite puodelį kavos ir gaukite iš tikrųjų alavo ...

Įmantrumas naudojant „setState“ ()

Dabar, kai turime handleCounterir handleIsValidmetodus, ir setState()išreikštus funkcijomis, galime sudaryti būsenos atnaujinimą su kitomis funkcijomis! Man patinka kompozicija! Pasilinksminkime!

Logiką galime perkelti į setStatefunkciją, nepriklausančią klasės komponentui. Pavadinkime toggleIsValid. ☝️

Dabar ši funkcija gali veikti už klasės komponento ribų, bet kurioje jūsų programos vietoje.

Ką daryti, jei mes naudojame aukštesnės eilės funkciją?

Oho! Dabar mes nebesikreipiame į šią toggleIsValidfunkciją. Mes iškviečiame abstrakčią aukštesnės eilės funkciją, kuri vadinama, toggleKeyir perduodame į ją raktą (šiuo atveju eilutę).

Kaip dabar turime pakeisti toggleIsValidfunkciją?

Ką?! Dabar turime funkciją, vadinamą, toggleKeykuri gauna keyir grąžina naują funkciją, kuri keičia būseną pagal pateiktą raktą.

Tai toggleKeygali būti bibliotekoje arba pagalbiniame faile. Tai gali būti naudojama įvairiuose kontekstuose, norint pakeisti bet ko, ko norite, būseną priešingai.

Puiku!

Padarykime tą patį su prieaugio skaitiklio valdikliu:

Taip! Tai veikia! Taip miela. Išprotėkime dabar ...

Šaudymas į mėnulį ir grįžimas

Ką daryti, jei sukursime bendrą makeUpdaterfunkciją, kuri gaus transformacijos funkciją, kurią norite pritaikyti, paims raktą ir grąžins būsenos funkciją, valdančią būseną su transformacijos funkcija ir raktu? Šiek tiek pasimetęs? Eime!

Gerai, kad pakanka ... Sustokime čia. ?

Galite patikrinti visą kodą, kurį atlikome šiame „GitHub“ repo.

Paskutinis, bet ne prasčiausias

Nepamirškite išvengti maksimalios būsenos ir gerbkite „React“ atvaizdavimo rekvizitų kaskadą.

Nepamirškite setStateyra asinchroninis.

Nepamirškite, kad setStategalite paimti daiktą ar funkciją

Nepamirškite, kad funkciją turėtumėte perduoti tada, kai kita būsena priklauso nuo ankstesnės būsenos.

Bibliografija

  1. Reaguoti dokumentaciją
  2. Pasiekite Ryano Florence'o technikos kursus, kuriuos tikrai rekomenduoju.

Labai ačiū!