Kuinka saada reaktiivisuus reagoimaan valtioiden kanssa

Kuva @igorovsyannykov, Unsplash
Tämä on osa ”React aloittelijoille” -sarjaani, joka käsittelee Reaktia, sen keskeisiä ominaisuuksia ja seuraavia parhaita käytäntöjä. Lisää artikkeleita on tulossa!

Jos tiedät kuinka näyttää React-komponentti - se on hienoa. Annetaan nyt komponenteillemme omat tiedot.

Vastuuvapauslauseke: Tämä artikkeli keskittyy Reaktin sisäänrakennettuun tilaan. Huomaa, että komponentin tila ja Redux eivät ole yhteensopimattomia, koska niiden tarkoitus on erilainen.

Mielestäni komponentin tila on erityinen komponentin laajuudelle (lomakkeen täyttämistä varten). Lisäksi Redux-tila auttaa jakamaan saman tilan useiden komponenttien kesken.

Tarvitsenko valtion?

Luodaan kysymyskomponentti oppiaksesi tiloja. Se näyttää kyllä ​​/ ei kysymyksen ja kysyy vastausta.

Kysymyskomponentti sisältää vain kolme toimintoa:

  • rakentaja alustamiseen (rekvisiitta ja tila),
  • answerQuestion on takaisinsoitto, joka laukaistaan, kun käyttäjä vastaa
  • tehdä siitä, että luultavasti jo tiedät - se tuottaa komponentin mallin.

Tällä komponentilla on kaksi erillistä tilaa. Kysymykseen ei ole vastattu, tai kysymykseen on vastaus.

Rekvisiittaa käytetään vain kysymysmerkinnässä, ja lisäksi valtion tarkoitus on paljon mielenkiintoisempi.

Tila on komponenttimuisti, joka muistaa, jos kysymykseen on vastaus. Jos on, se tietää myös vastauksen.

Muunna tila rekvisiittaksi

Tilan käyttäminen komponentissa on helppoa. Sinun on alustettava tila ja soitettava setStatefunction aina, kun haluat päivittää sen sisältöä.

Kuvittele olevansa osa. Jos tilasi muuttui, reaktio olisi tarkistaa, onko sinun päivitettävä näyttö.

Näin se toimii. Reagoi puhelut tulisiComponentUpdate ennen soittamista (katso ohjeet). Tämä toinen toiminto luo seuraavan virtuaalisen DOM-tilan (viimeinen artikkeli puhuu siitä).

Komponentit saavat rekvisiitta muista komponenteista. Jos nämä rekvisiitta muuttuu, komponentti päivittyy.

Itse asiassa tiedät jo, miten se toimii - mutta otamme esimerkiksi esimerkki kyselystä, joka sisältää jonkin kysymyksen.

Kysely sisältää sen tilassa tilamerkinnät ja antaa sen kysymykseksi omaisuutena.

Kun kysely päivittää tilaa (kutsuu setState), renderöintitoiminto käynnistyy. Jos näin on, se lähettää kyselyn kyselypyynnön (yksityiskohdat Reakt-asiakirjassa).

Hyväksy säiliökuvio

Näkymän ja muun koodin irrottaminen tuotannosta on aina ollut suuri huolenaihe. Siksi suurin osa puitteissa käytetyistä suunnittelumallista ulottuu MVC-kuviosta.

Jos käytät Reactia Reduxin kanssa, tiedät jo säilökuvion. Itse asiassa se on sisäänrakennettu Redux-ominaisuus yhteystoiminnon kautta.

On aika jakaa kysymyskomponentti kahteen osaan.

Kysymys vastaa rekvisiittien tekemisestä. Tällaista komponenttia kutsutaan joko funktionaaliseksi, esitysmuotoiseksi tai tyhmäksi.

QuestionContainer käsittelee valtionhallintaa.

Verrattuna MVC-suunnittelumalliin, kysymys on näkymä ja kysymyskontrolleri on ohjain.

Muut komponentit, jotka tarvitsevat kyselyn, käyttävät nyt kysymysten sijasta kysymyskoodia. Tämä huomio on hyvin hyväksytty yhteisössä.

Ole varovainen setState-anti-kuvion suhteen

Tämän setStaten käyttäminen on melko yksinkertaista.

Seuraava tila välitetään ensimmäisenä ja ainoana parametrina. Se päivittää nykyiset tilaominaisuudet uusilla läpäistetyillä arvoilla.

Yhteenvetona, älä käytä tätä.valtiota ja tätä.pysäkki setState-puheluita.

Näillä muuttujilla ei ehkä ole odotettuja arvoja. Reaktio optimoi tilamuutokset. Se hajottaa kerrannaiset muutokset yhdeksi suorituskykyongelmiin (ennen Virtual DOM -optimointeja).

Sinun tulisi suosia muuta setState-muotoa. Anna toiminto ainoana parametrina ja käytä prop- ja tilaparametreja (katso ohjeet).

Koko kyselykomponentti

Tässä artikkelissa olemme käsittäneet tärkeimmät valtion käytännöt Reaktissa. Löydät kyselykomponentin täydellisen koodin seuraavasta Codepenista.

Se koski kaikkia valtioita. Olet kohdannut komponentit, rekvisiitta ja tilat, ja nyt sinulla on aloittelijapakkaus pelata Reaktin kanssa.

Toivottavasti nautit tämän artikkelin lukemisesta ja oppit paljon asioita!

Jos pidit artikkelista hyödyllisen, napsauta -painiketta muutaman kerran, jotta muut löytävät artikkelin ja näyttääksesi tukeasi!

Älä unohda seurata minua saadaksesi ilmoituksen tulevista artikkeleistani

Tämä on osa ”React aloittelijoille” -sarjaani, joka käsittelee Reaktia, sen keskeisiä ominaisuuksia ja seuraavia parhaita käytäntöjä.

Tutustu muihin artikkeleihini

➥ JavaScript

  • Kuinka parantaa JavaScript-taitojasi kirjoittamalla oma Web-kehityskehys
  • Yleiset virheet, joita vältetään Vue.js: n kanssa työskennellessä

➥ Vinkkejä

  • Lopeta tuskallinen JavaScript-virheenkorjaus ja kiinnitä Intellij lähdekartalla
  • Kuinka vähentää valtavia JavaScript-kimppuja ilman vaivaa