Kattava opas React.js-julkaisuun vuonna 2018

Tämä artikkeli julkaistiin alun perin tammikuussa 2015, mutta se päivitettiin äskettäin React 16.3: ksi ja siihen sisältyvään hyvyyteen.

Komponentit ovat Reaktin rakennuspalikoita. Jos olet lähtöisin kulmasta taustasta, komponentit ovat hyvin samanlaisia ​​kuin direktiivit. Jos olet lähtöisin eri taustalta, ne ovat pääosin widgettejä tai moduuleja.

Voit ajatella komponenttia kokoelmana HTML-, CSS-, JS- ja joitain kyseiselle komponentille ominaisia ​​sisäisiä tietoja. Haluan ajatella React-komponentteja verkon kolachesina. Heillä on kaikki tarvitsemasi, kääritty herkullisiin kompostoitaviin paketteihin.

Nämä komponentit on määritelty joko puhtaassa JavaScript-muodossa tai ne voidaan määritellä siinä, mitä React-tiimi kutsuu “JSX”. Jos päätät käyttää JSX: ää (mitä todennäköisesti käytät, se on melko vakio - ja sitä me käytämme tässä opetusohjelmassa), tarvitset jonkin käännösvaiheen JSX: n muuntamiseksi JavaScript-muotoon. Mutta pääsemme tähän myöhemmin.

Mikä tekee Reaktista niin kätevän käyttöliittymien rakentamisessa, on se, että data joko vastaanotetaan komponentin vanhemmalta komponentilta tai se sisältyy komponenttiin itse. Ennen kuin siirrymme koodiin, tarkistetaan, että meillä on korkeatasoinen ymmärrys komponenteista.

Yllä on kuva Twitter-profiilistani. Jos aiomme luoda tämän sivun uudelleen Reakt-osiossa, me jaksomme eri osiot eri osiksi (korostettu). Huomaa, että komponenteissa voi olla sisäkkäisiä komponentteja.

Voimme nimetä vasemman komponentin (vaaleanpunainen) UserInfo-komponentiksi. UserInfo-komponentin sisällä on toinen komponentti (oranssi), jota voimme kutsua UserImages-komponentiksi. Tapa, jolla tämä vanhempien ja lasten välinen suhde toimii, on UserInfo-komponentti tai emmekomponentti, missä sekä itsensä että UserImages-komponentin (lapsikomponentin) tietojen "tila" elää. Jos haluamme käyttää mitä tahansa vanhemman komponentin tietoista alakomponentissa, mitä teemme, siirrämme nämä tiedot lapsikomponentiksi määritteenä. Tässä esimerkissä lähetämme UserImages-komponentin kaikki käyttäjän kuvat (jotka tällä hetkellä elävät UserInfo-komponentissa).

Tutkitaan tarkemmin koodin yksityiskohtiin vähän, mutta haluan sinun ymmärtävän suuremman kuvan täällä tapahtuvasta. Tämä vanhempien / lasten hierarkia tekee tietojen hallinnasta suhteellisen yksinkertaisen, koska tiedämme tarkalleen missä tietomme asuu ja meidän ei pitäisi manipuloida tietoja muualla.

Alla olevat aiheet ovat mielestäni Reaktin perusta. Jos ymmärrät ne kaikki ja niiden tarkoitukset, olet erittäin hyvällä paikalla luettuasi tämän oppaan.

JSX - Antaa meille mahdollisuuden kirjoittaa HTML kuten syntaksi, joka tulee
muunnettu kevyiksiJavaScript-objekteiksi.
Virtuaalinen DOM - JavaScript-esitys todellisesta
DOM.
React.Component - Tapa, jolla luot uuden komponentin.
renderöinti (menetelmä) - kuvaa, mistä käyttöliittymä näyttää
tietty komponentti.
ReactDOM.render - tuottaa React-komponentin DOM-solmuun.
tila - komponentin sisäinen tietovarasto (objekti).
rakentaja (tämä.valtio) - tapa, jolla vakiintut
komponentin alkutila.
setState - auttajamenetelmä, jota käytetään a: n tilan päivittämiseen
komponentti ja renderoi käyttöliittymä uudelleen
rekvisiitta - Tiedot, jotka välitetään lapsikomponentille
emokomponentista.
propTypes - Voit hallita esiintymistä tai sen tyyppejä
tietyt rekvisiitta siirrettiin lapsikomponenttiin.
defaultProps - Voit asettaa komponentin oletussovellukset.
Komponentti LifeCycle
  - componentsDidMount - Käynnistetään komponentin asennuksen jälkeen
  - komponenttiWillUnmount - potkut ennen kuin komponentti irrotetaan
  - getDerivedStateFromProps - Käynnistetään, kun komponentti asennetaan ja
aina, kun rekvisiitta vaihtuu. Käytetään a: n tilan päivittämiseen
komponentti, kun sen rekvisiitta muuttuu
Tapahtumat
  - klikkaamalla
  - onSubmit
  - muutos

Tiedän, että se vaikuttaa monelta, mutta huomaat pian, kuinka jokainen pala on perusta rakentamalla vahvoja sovelluksia Reaktin kanssa (enkä myöskään ollut tosissani, kun sanoin haluavani tämän olevan kattava opas).

Tässä vaiheessa sinun pitäisi ymmärtää erittäin korkealla tasolla, kuinka React toimii. Katsotaanpa nyt jotakin koodia.

Ensimmäisen komponentin luominen (JSX, Virtual DOM, render, ReactDOM.render)

Mennään eteenpäin ja rakennetaan ensimmäinen React-komponentti.

Voit luoda React-komponentin käyttämällä ES6-luokkaa. Jos et ole perehtynyt luokkiin, voit jatkaa lukemista alla tai lue lisää niistä perusteellisesti täältä:

tuo reagoi 'reagoi'
tuo ReactDOM 'react-domista'
luokka HelloWorld laajentaa React.Component {
  tehdä () {
    palata (
      
Hei maailma!
    )   } }
ReactDOM.render (, document.getElementById ('juuri'));

Huomaa, että luokkamme ainoa menetelmä on renderöinti. Jokaisella komponentilla on oltava renderöintimenetelmä. Syynä siihen on renderöinti on komponentin käyttöliittymän (käyttöliittymän) kuvaaminen. Joten tässä esimerkissä teksti, joka näytetään näytöllä, jossa tämä komponentti renderoidaan, on Hello World!

Katsotaanpa nyt mitä ReactDOM tekee. ReactDOM.render ottaa käyttöön kaksi argumenttia. Ensimmäinen argumentti on komponentti, jonka haluat renderoida, kun taas toinen argumentti on DOM-solmu, josta haluat muodostaa komponentin.

Huomaa, että käytämme ReactDOM.render eikä React.render. Tämä oli Reakt .14: ssä tehty muutos, jonka avulla Reaktista tuli modulaarisempi. On järkevää, kun luulet, että React voi tuottaa enemmän kuin vain DOM-elementin.

Yllä olevassa esimerkissä sanomme Reaktalle ottavan HelloWorld-komponentin ja muokkaamalla sen elementille juurtunnuksella. Koska aiemmin puhuimme Reaktorin vanhempien ja lasten suhteista, joudut yleensä käyttämään ReactDOM.render-sovellusta vain kerran sovelluksessasi, koska tekemällä eniten vanhempaa komponenttia, myös kaikki alakomponentit saadaan aikaan.

Nyt tässä vaiheessa saatat tuntea olevani outo heittää “HTML” JavaScriptiisi. Siitä lähtien kun aloit oppia verkkokehitystä, sinulle on sanottu, että sinun on pidettävä logiikkasi poissa näkymästä, eli sinun on pidettävä JavaScriptiä kytkemättä HTML-koodistasi.

Tämä paradigma on vahva, mutta siinä on joitain heikkouksia. En halua pidentää tätä opetusohjelmaa enää yrittäessään vakuuttaa teille, että tämä idea on askel oikeaan suuntaan, joten jos tämä idea edelleen häiritsee sinua, voit tarkistaa tämän linkin. Kun opit lisää Reaktista, tämän levottomuuden pitäisi nopeasti lakata.

HTML-koodi, jonka kirjoitat renderöintimenetelmässä, ei ole oikeastaan ​​HTML, mutta React kutsuu sitä JSX: ksi. JSX antaa meille yksinkertaisesti kirjoittaa HTML-tyyppisen syntaksin, joka (lopulta) muuttuu kevyiksi JavaScript-objekteiksi. React pystyy sitten ottamaan nämä JavaScript-objektit ja muodostamaan niistä ”virtuaalisen DOM: n” tai JavaScript-esityksen todellisesta DOM: sta. Tämä luo win / win-tilanteen, jossa JavaScriptin avulla pääset käsiksi malleihin.

Alla olevaa esimerkkiä tarkastellaan, mistä JSX lopulta kootaan.

luokka HelloWorld laajentaa React.Component {
  tehdä () {
    palauta React.createElement ("div", nolla, "Hello World");
  }
}
Nyt voit luopua JSX -> JS -muunnosvaiheesta ja kirjoittaa React-komponentit kuten yllä oleva koodi. Mutta kuten voitte kuvitella, se olisi melko hankala. En tiedä ketään, joka ei käytä JSX: tä. Lisätietoja siitä, mihin JSX kokoaa, tarkista React Elements vs React Components.

Tähän saakka emme ole oikeasti korostaneet tämän uuden virtuaalisen DOM-paradigman merkitystä. Syy siihen, että React-ryhmä käytti tätä lähestymistapaa, on se, että koska virtuaalinen DOM on todellisen DOM: n JavaScript-esitys, React voi seurata eroa nykyisen virtuaalisen DOM: n (laskettu joidenkin tietojen muutosten jälkeen) ja edellisen virtuaalisen DOM: n välillä. (laskettu ennen joidenkin tietojen muutoksia). React eristää sitten muutokset vanhan ja uuden virtuaalisen DOM: n välillä ja päivittää sitten todellisen DOM: n vain tarvittavilla muutoksilla.

Laajemmin sanottuna, koska todellisen DOM: n manipulointi on hidasta, React pystyy minimoimaan todellisen DOM: n manipulaatiot pitämällä kirjaa virtuaalisesta DOM: sta ja päivittämällä todellisen DOM: n vain tarvittaessa ja tekemällä vain tarvittavat muutokset. (Lisätietoja täältä).

Yleensä käyttöliittymissä on paljon tiloja, jotka vaikeuttavat valtion hallintaa. Renderöimalla virtuaalinen DOM joka kerta, kun kaikki tilamuutokset tapahtuvat, React helpottaa miettiä, missä tilassa sovelluksesi on. Prosessi näyttää noin:

Jotkut käyttäjätapahtumat, jotka muuttavat sovelluksesi tilaa → Suorita virtuaalinen DOM uudelleen → Hajauta aikaisempi virtuaalinen DOM uudella virtuaalisella DOMilla → Päivitä vain todellinen DOM tarvittavilla muutoksilla.

Koska on olemassa tämä muutosprosessi JSX: stä JS: ksi, sinun on määritettävä jonkinlainen muutosvaihe kehitettäessäsi. Esitän tämän sarjan osassa 2 Webpackin ja Babelin tämän muutoksen tekemiseksi.

Katsotaanpa taaksepäin Reaktion tärkeimpiin osiin ja tarkistamme missä olemme tällä hetkellä.

 JSX - Antaa meille mahdollisuuden kirjoittaa HTML kuten syntaksi, joka tulee
muunnettu kevyiksiJavaScript-objekteiksi.
 Virtual DOM - JavaScript-esitys todellisesta
DOM.
 React.Component - Tapa, jolla luot uuden komponentin.
 renderöinti (menetelmä) - kuvailee mitä käyttöliittymä näyttää
tietty komponentti.
 ReactDOM.render - Näyttää React-komponentin DOM-solmuun.
tila - komponentin sisäinen tietovarasto (objekti).
rakentaja (tämä.valtio) - tapa, jolla vakiintut
komponentin alkutila.
setState - auttajamenetelmä, jota käytetään a: n tilan päivittämiseen
komponentti ja renderoi käyttöliittymä uudelleen
rekvisiitta - Tiedot, jotka välitetään lapsikomponentille
emokomponentista.
propTypes - Voit hallita esiintymistä tai sen tyyppejä
tietyt rekvisiitta siirrettiin lapsikomponenttiin.
defaultProps - Voit asettaa komponentin oletussovellukset.
Komponentti LifeCycle
  - componentsDidMount - Käynnistetään komponentin asennuksen jälkeen
  - komponenttiWillUnmount - potkut ennen kuin komponentti irrotetaan
  - getDerivedStateFromProps - Käynnistetään, kun komponentti asennetaan ja
aina, kun rekvisiitta vaihtuu. Käytetään a: n tilan päivittämiseen
komponentti, kun sen rekvisiitta muuttuu
Tapahtumat
  - klikkaamalla
  - onSubmit
  - muutos

Meillä on hyvä vauhti. Kaikki lihavoitu on se, mitä olemme jo käsittäneet, ja sinun pitäisi ainakin osata selittää, kuinka nämä tietyt komponentit sopivat React-ekosysteemiin.

Valtion lisääminen komponenttiin (tila)

Seuraava luettelossa on tila. Aikaisemmin puhuimme siitä, kuinka käyttöliittymien hallinta on vaikeaa, koska niillä on yleensä paljon erilaisia ​​tiloja. Tämä alue on, missä React todella alkaa paistaa. Jokaisella komponentilla on kyky hallita omaa tilaa ja tarvittaessa siirtää tila alakomponenteille.

Palaamalla aiempaan Twitter-esimerkkiin, UserInfo-komponentti (korostettuna vaaleanpunaisella yllä) on vastuussa käyttäjän tietojen tilan (tai tietojen) hallinnasta. Jos toinen osa tarvitsi myös tätä tilaa / tietoja, mutta kyseinen tila ei ollut UserInfo-komponentin suora alaosa, niin luot toisen komponentin, joka on UserInfo-sovelluksen ja toisen komponentin (tai molempien komponenttien, jotka vaativat tätä tilaa) suora emoyhtiö ). Sitten siirrät tilan alas rekvisiittaina lasten komponentteihin. Toisin sanoen, jos sinulla on monikomponenttinen hierarkia, yhteisen vanhemman komponentin tulisi hallita tilaa ja välittää se lapsikomponenteilleen rekvisiittien kautta.

Katsotaanpa esimerkkiä komponentista käyttämällä omaa sisäistä tilaa.

luokka HelloUser laajentaa React.Component {
  rakentaja (rekvisiitta) {
    Super (rekvisiitta)
tämä.valtio = {
      käyttäjänimi: 'tylermcginnis'
    }
  }
  tehdä () {
    palata (
      
        Hei {this.state.username}            )   } }

Olemme ottaneet käyttöön uuden syntaksin tämän esimerkin kanssa. Ensimmäinen huomannut on rakennusmenetelmä. Yllä olevasta määritelmästä rakentajamenetelmä on ”tapa, jolla asetat komponentin tilan”. Toisin sanoen kaikki tämän.valtion rakentajan sisällä lisäämät tiedot ovat osa kyseisen komponentin tilaa.

Yllä olevassa koodissa sanomme komponentillemme, että haluamme sen seurata käyttäjänimeä. Tätä käyttäjänimeä voidaan nyt käyttää komponentissamme tekemällä {this.state.username}, mikä on tarkalleen mitä teemme renderöintimenetelmässämme.

Viimeinen asia, josta puhutaan valtion kanssa, on, että komponentti tarvitsee kyvyn muokata omaa sisäistä tilaa. Teemme tämän menetelmällä, jota kutsutaan setState. Muistatko aiemmin, kun puhuimme virtuaalisen domin uudelleenmuodostamisesta aina, kun tiedot muuttuvat?

Signaali ilmoittaa sovelluksellemme jotkut tiedot ovat muuttuneet → Tee virtuaalinen DOM uudelleen → Hajauta aiempi virtuaalinen DOM uudella virtuaalisella DOMilla → Päivitä vain todellinen DOM tarvittavilla muutoksilla.

Se “signaali ilmoittaa sovelluksellemme, että jotkut tiedot ovat muuttuneet” on oikeastaan ​​vain setState. Aina kun setState kutsutaan, virtuaalinen DOM muuttuu, diff-algoritmi suoritetaan ja todellinen DOM päivitetään tarvittavilla muutoksilla.

Sivuhuomautuksena, kun esittelemme setState-koodin alla olevaan koodiin, aiomme myös esitellä muutamia tapahtumia, jotka ovat luettelossamme. Kaksi lintua, yksi kivi.

Joten seuraavassa koodinäytteessä meillä on nyt syöttöruutu, joka päivittää automaattisesti tilaamme ja vaihtaa käyttäjänimen aina, kun joku kirjoittaa siihen.

luokka HelloUser laajentaa React.Component {
  rakentaja (rekvisiitta) {
    Super (rekvisiitta)
tämä.valtio = {
      käyttäjänimi: 'tylermcginnis'
    }
this.handleChange = this.handleChange.bind (tämä)
  }
  handleChange (e) {
    this.setState ({
      käyttäjänimi: e.target.value
    })
  }
  tehdä () {
    palata (
      
        Hei {this.state.username}
        Vaihtaa nimeä:                     )   } }

Huomaa, että olemme ottaneet käyttöön muutama asia. Ensimmäinen asia on handleChange-menetelmä. Tämä menetelmä soitetaan aina, kun käyttäjä kirjoittaa syöttöruutuun. Kun Käsittelymuutos -sovellusta kutsutaan, se soittaa setState-käyttäjälle määritelläksesi käyttäjänimesi uudelleen syöttöruutuun kirjoitetulla tavalla (e.target.value). Muista, että aina kun setState kutsutaan, React luo uuden virtuaalisen DOM: n, suorittaa diffundin, päivittää sitten todellisen DOM: n.

Katsotaanpa nyt renderöintimenetelmäämme. Olemme lisänneet uuden rivin, joka sisältää syöttökentän. Syötekentän tyyppi on ilmeisesti teksti. Arvo tulee olemaan käyttäjänimen arvo, joka alun perin määritettiin getInitialState-menetelmässä ja päivitetään HandChange-menetelmässä.

Huomaa, että on uusi ominaisuus, jota et todennäköisesti ole koskaan nähnyt, onChange. onChange on React-asia, ja se kutsuu mitä tahansa määrittämääsi menetelmää joka kerta, kun syöttöruudun arvo muuttuu - tässä tapauksessa määrittämämme menetelmä oli handChange.

Yllä olevan koodin prosessi menisi jotain tällaista.

Käyttäjä kirjoittaa syöttöruutuun → käsittelemään muutosta kutsutaan → komponentin tila asetetaan uuteen arvoon → reagoi uudelleen virtuaalisen DOM: n → reagoi hajauttaa muutoksen → todellinen DOM päivitetään.

Myöhemmin, kun peitämme rekvisiitta, näemme joitain edistyneempiä käyttötapauksia käsittelytiloista.

Olemme menossa sinne! Jos et pysty selittämään alla lihavoituna olevia kohtia, lue tämä kohta uudelleen. Yksi vinkki reaaliaikaiseen oppimiseen: älä anna sen passiivisesti lukea antaa sinulle väärän turvatunteen, että tiedät todella mitä tapahtuu ja voit luoda uudelleen sen, mitä teemme. Siirry CodeSandboxiin ja yritä luoda (tai luoda omia) komponentteja uudelleen katsomatta mitä olen tehnyt. Se on ainoa tapa, jolla voit todella oppia rakentamaan Reaktin avulla. Tämä koskee tätä opetusohjelmaa ja seuraavia.

 JSX - Antaa meille mahdollisuuden kirjoittaa HTML kuten syntaksi, joka tulee
muunnettu kevyiksiJavaScript-objekteiksi.
 Virtual DOM - JavaScript-esitys todellisesta
DOM.
 React.Component - Tapa, jolla luot uuden komponentin.
 renderöinti (menetelmä) - kuvailee mitä käyttöliittymä näyttää
tietty komponentti.
 ReactDOM.render - Näyttää React-komponentin DOM-solmuun.
 tila - komponentin sisäinen tietovarasto (objekti).
 rakentaja (tämä.valtio) - tapa, jolla vakiinnutat
komponentin alkutila.
 setState - auttajamenetelmä, jota käytetään a: n tilan päivittämiseen
komponentti ja renderoi käyttöliittymä uudelleen
rekvisiitta - Tiedot, jotka välitetään lapsikomponentille
emokomponentista.
propTypes - Voit hallita esiintymistä tai sen tyyppejä
tietyt rekvisiitta siirrettiin lapsikomponenttiin.
defaultProps - Voit asettaa komponentin oletussovellukset.
Komponentti LifeCycle
  - componentsDidMount - Käynnistetään komponentin asennuksen jälkeen
  - komponenttiWillUnmount - potkut ennen kuin komponentti irrotetaan
  - getDerivedStateFromProps - Käynnistetään, kun komponentti asennetaan ja
aina, kun rekvisiitta vaihtuu. Käytetään a: n tilan päivittämiseen
komponentti, kun sen rekvisiitta muuttuu
Tapahtumat
  - klikkaamalla
  - onSubmit
  - muutos

Vastaanottava tila vanhemmalta komponentilta (rekvisiitta, propTypes, getDefaultProps)

Olemme puhuneet rekvisiitta jo muutaman kerran, koska on vaikea todella tehdä paljon ilman niitä. Yllä olevan määritelmämme mukaan rekvisiitta on tieto, joka välitetään alakomponentille vanhemmasta komponentista. Tämän avulla React-arkkitehtuurimme voi pysyä melko suoraviivaisena. Käsittele tilaa korkeimmassa vanhemmassa komponentissa, jonka on käytettävä tiettyä tietoa, ja jos sinulla on alakomponentti, joka tarvitsee myös kyseiset tiedot, siirrä se tiedot rekvisiittina.

Tässä on hyvin yksinkertainen esimerkki rekvisiittien käytöstä.

luokka HelloUser laajentaa React.Component {
  tehdä () {
    palata (
      
Hei, {this.props.name}
    )   } }
ReactDOM.render (
  ,
  document.getElementById ( 'root')
);

Huomaa rivillä 9, meillä on attribuutti nimeltä nimi, jonka arvo on “Tyler”. Nyt komponentissamme voimme käyttää {this.props.name} saadaksesi “Tyler”.

Katsotaanpa edistyneempää esimerkkiä. Meillä on nyt kaksi komponenttia. Yksi vanhemmista, yksi lapsi. Vanhempi aikoo seurata tilaa ja siirtää osan kyseisestä tilasta lapselle rekvisiitta. Katsotaanpa ensin sitä vanhempaa komponenttia.

Vanhempi osa:

luokan FriendsContainer laajentaa React.Component {
  rakentaja (rekvisiitta) {
    Super (rekvisiitta)
tämä.valtio = {
      nimi: 'Tyler McGinnis',
      ystävät: [
        'Jake Lingwall',
        'Sarah Drasner',
        'Merrick Christensen'
      ]
    }
  }
  tehdä () {
    palata (
      
        

Nimi: {this.state.name}

                    )   } }

Tässä komponentissa ei todellakaan ole paljon meneillään, mitä emme ole ennen nähneet. Meillä on alkutila, ja siirrämme osan alkuperäisestä tilasta toiselle komponentille. Suurin osa uudesta koodista tulee tästä alakomponentista, joten katsotaanpa tätä tarkemmin.

Lasten komponentti:

luokan ShowList laajentaa React.Component {
  tehdä () {
    palata (
      
        

Ystävät

        
              {this.props.names.map ((ystävä) =>
  • {ystävä}
  • )}                     )   } }

Muista, että renderöintimenetelmästämme palautettu koodi edustaa sitä, minkä todellisen DOM: n pitäisi näyttää. Jos et ole perehtynyt Array.prototype.map -koodiin, tämä koodi saattaa näyttää hiukan mielekästä. Ainoa kartta on, se luo uuden taulukon, kutsuu takaisinsoitto funktiomme jokaiseen taulukon kohtaan ja täyttää uuden taulukon tuloksella, että kutsutaan jokaisen kohteen takaisinsoitto-toimintoa. Esimerkiksi,

const ystävät = [
  'Jake Lingwall',
  'Sarah Drasner',
  'Merrick Christensen'
];
const listItems = ystävät.kartta ((ystävä) => {
  palauta "
  • " + ystävä + "
  • "; });
    console.log (listItems);

    Yllä oleva console.log palauttaa ["

  • Jake Lingwall
  • ", "
  • Murphy Randall
  • ", "
  • Merrick Christensen
  • "].

    Huomaa kaikki, mitä tapahtui, kun me teimme uuden taulukon ja lisäsimme

  • jokaiselle alkuperäisen ryhmän kohteelle.

    Kartassa hienoa on, että se sopii täydellisesti Reaktyen (ja se on rakennettu JavaScriptiin). Joten yllä olevassa lapsikomponentissamme kartoitamme nimet, kääritään jokainen nimi

  • -tunnisteisiin ja tallennamme sen listItems-muuttujaan. Sitten renderöintimenetelmämme palauttaa järjestämättömän luettelon kaikkien ystävämme kanssa.

    Katsotaanpa vielä yksi esimerkki, ennen kuin lopetamme puhumisen rekvisiitta. On tärkeää ymmärtää, että missä tietoja elää, on tarkka paikka, jota haluat käsitellä kyseisillä tiedoilla. Tämän avulla on helppo perustella tietosi. Kaikki tietyn datan getter- / setter-menetelmät ovat aina samassa komponentissa, jossa data määritettiin. Jos joudut käsittelemään jotakin dataa, sen ulkopuolella, missä tiedot asuvat, siirrät getter / setter -menetelmän kyseiseen komponenttiin rekvisiitta. Katsotaanpa tällaista esimerkkiä.

    luokan FriendsContainer laajentaa React.Component {
      rakentaja (rekvisiitta) {
        Super (rekvisiitta)
    tämä.valtio = {
          nimi: 'Tyler McGinnis',
          ystävät: [
            'Jake Lingwall',
            'Sarah Drasner',
            'Merrick Christensen'
          ],
        }
    this.addFriend = this.addFriend.bind (tämä)
      }
      addFriend (ystävä) {
        this.setState ((osavaltio) => ({
          ystävät: osavaltio.ystävät.sukka ([ystävä])
        }))
      }
      tehdä () {
        palata (
          
            

    Nimi: {this.state.name}

                                 )   } }
    . Huomaa, että addFriend-menetelmässä esittelimme uuden tavan kutsua setState. Sen sijaan, että siirrämme sille esineen, siirrämme sen toiminnon, joka sitten on läpäissyt tilan. Aina kun asetat komponentin uutta tilaa edellisen tilan perusteella (kuten teemme ystäväryhmän kanssa), haluat siirtää setState-toiminnon, joka ottaa nykyisessä tilassa ja palauttaa tiedot sulautuakseen uuteen osavaltio. Katso täältä.
    luokan AddFriend laajentaa React.Component {
      rakentaja (rekvisiitta) {
        Super (rekvisiitta)
    tämä.valtio = {
          uusi ystävä: ''
        }
    this.updateNewFriend = this.updateNewFriend.bind (tämä)
        this.handleAddNew = this.handleAddNew.bind (tämä)
      }
      updateNewFriend (e) {
        this.setState ({
          newFriend: e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          uusi ystävä: ''
        })
      }
      tehdä () {
        palata (
          
                     <-painike onClick = {this.handleAddNew}> Lisää ystävä            )   } }
    luokan ShowList laajentaa React.Component {
      tehdä () {
        palata (
          
            

    Ystävät

            
                {this.props.names.map ((friend) => {             palauta
    • {ystävä}
    •           })}                     )   } }

    Huomaat, että yllä oleva koodi on enimmäkseen sama kuin edellinen esimerkki, paitsi nyt meillä on mahdollisuus lisätä nimi ystäväluetteloomme. Huomaa, kuinka olen luonut uuden AddFriend-komponentin, joka hallinnoi uutta ystävää, jonka aiomme lisätä.

    Syynä tähän on se, että vanhempi osa (FriendContainer) ei välitä lisäämästäsi uudesta ystävästä, se välittää vain kaikista ystävistäsi kokonaisuutena (ystäväryhmä). Koska noudatamme sääntöä, että käsittelemme vain tietojasi komponentilta, joka siitä välittää, olemme siirtäneet addFriend-menetelmän AddFriend-komponenttiin prop-ominaisuutena ja kutsumme sitä uuden ystävän kanssa heti, kun käsittelemme addDNew menetelmää kutsutaan.

    Suosittelen tässä vaiheessa, että yrität luoda saman toiminnallisuuden itse käyttämällä yllä olevaa koodia ohjeena, kun olet ollut kiinni 3–4 minuuttia.

    Ennen kuin jatkamme rekvisiitta, haluan kattaa vielä kaksi Reakt-ominaisuutta, jotka koskevat rekvisiitta. Ne ovat propTypes ja defaultProps. En aio mennä liian yksityiskohtiin täällä, koska molemmat ovat melko yksinkertaisia.

    prop-tyyppien avulla voit hallita tiettyjen lapsikomponenttiin siirrettyjen rekvisiittien läsnäoloa tai tyyppejä. PropTypes-sovelluksella voit määrittää, että tietyt rekvisiitta vaaditaan tai että tietyt rekvisiittit ovat tietty tyyppi.

    React 15: stä lähtien PropTypes ei enää sisälly React-pakettiin. Sinun on asennettava se erikseen suorittamalla npm install prop-tyypit.

    defaultProps antaa sinun määrittää oletusarvon (tai varmuuskopion) tietyille rekvisiiteille vain siinä tapauksessa, että näitä rekvisiitta ei koskaan siirretä komponenttiin.

    Olen modifioinut komponentteja aikaisemmasta nykyään propTypes-sovelluksilla vaatia, että addFriend on toiminto ja että se on siirretty AddFriend-komponenttiin. Olen myös määrittänyt defaultPropsin avulla, että jos ShowList-komponentille ei anneta yhtään ystäväryhmää, sen oletusarvo on tyhjä.

    tuo reagoi 'reagoi'
    tuo PropTypes 'prop-tyypeistä'
    luokan AddFriend laajentaa React.Component {
      rakentaja (rekvisiitta) {
        Super (rekvisiitta)
    tämä.valtio = {
          uusi ystävä: ''
        }
      }
      updateNewFriend (e) {
        this.setState ({
          newFriend: e.target.value
        })
      }
      handleAddNew () {
        this.props.addNew (this.state.newFriend)
        this.setState ({
          uusi ystävä: ''
        })
      }
      tehdä () {
        palata (
          
                     <-painike onClick = {this.handleAddNew}> Lisää ystävä            )   } }
    AddFriend.propTypes: {
      addNew: PropTypes.func.isRequired
    }
    luokan ShowList laajentaa React.Component {
      tehdä () {
        palata (
          
            

    Ystävät

            
                {this.props.names.map ((friend) => {             palauta
    • {ystävä}
    •           })}                     )   } }
    ShowList.defaultProps = {
      nimet: []
    }

    Okei, olemme viimeisessä osassa tätä ensimmäistä opetusohjelmaa. Katsotaanpa opastamme ja katsomme, mitä meillä on jäljellä.

     JSX - Antaa meille mahdollisuuden kirjoittaa HTML kuten syntaksi, joka tulee
    muunnettu kevyiksi JavaScript-objekteiksi.
     Virtual DOM - JavaScript-esitys todellisesta
    DOM.
     React.Component - Tapa, jolla luot uuden komponentin.
     renderöinti (menetelmä) - kuvailee mitä käyttöliittymä näyttää
    tietty komponentti.
     ReactDOM.render - Näyttää React-komponentin DOM-solmuun.
     tila - komponentin sisäinen tietovarasto (objekti).
     rakentaja (tämä.valtio) - tapa, jolla vakiinnutat
    komponentin alkutila.
     setState - auttajamenetelmä, jota käytetään a: n tilan päivittämiseen
    komponentti ja renderoi käyttöliittymä uudelleen
     rekvisiitta - Tiedot, jotka välitetään alakomponentille
    emokomponentista.
     propTypes - Antaa sinun hallita esiintymistä tai tyyppejä
    tietyt rekvisiitta siirrettiin lapsikomponenttiin.
     defaultProps - Voit asettaa komponentin oletussovellukset.
    Komponentti LifeCycle
      - componentsDidMount - Käynnistetään komponentin asennuksen jälkeen
      - komponenttiWillUnmount - potkut ennen kuin komponentti irrotetaan
      - getDerivedStateFromProps - Käynnistetään, kun komponentti asennetaan ja
    aina, kun rekvisiitta vaihtuu. Käytetään a: n tilan päivittämiseen
    komponentti, kun sen rekvisiitta muuttuu
     Tapahtumat
      - klikkaamalla
      - onSubmit
      - muutos

    Olemme niin lähellä!

    Komponentti LifeCycle

    Jokaisella tekemälläsi komponentilla on omat elinkaaritapahtumat, jotka ovat hyödyllisiä erilaisille asioille. Esimerkiksi, jos haluaisimme tehdä ajax-pyynnön alkuperäisessä renderöinnissä ja hakea tietoja, missä tekisimme sen? Tai jos haluaisimme käyttää jotain logiikkaa aina, kun rekvisiittimme muuttuivat, kuinka tekisimme sen? Elinkaaritapahtumat ovat vastauksia molemmille. Hajotamme ne.

    luokan sovellus laajentaa React.Component {
      rakentaja (rekvisiitta) {
        Super (rekvisiitta)
    tämä.valtio = {
          nimi: 'Tyler McGinnis'
        }
      }
      componentDidMount () {
        // Kutsu, kun komponentti on asennettu DOM: iin
        // Hyvä AJAX-pyyntöjen tekemiseen
      }
      staattinen getDerivedStateFromProps (nextProps, prevState) {
        // Tämän toiminnon palauttama objekti tulee
        // yhdistetään nykytilaan.
      }
      componentWillUnmount () {
        // Soitetaan välittömästi, ennen kuin komponentti irrotetaan
        // Hyvä kuuntelijoiden puhdistamiseen
      }
      tehdä () {
        palata (
          
            Hei, {this.state.name}            )   } }

    komponentDidMount - Kutsu kerran ensimmäisen renderöinnin jälkeen. Koska komponenttiin on jo kutsuttu kyseistä menetelmää käytettäessä, sinulla on pääsy virtuaaliseen DOM: iin tarvittaessa. Teet sen soittamalla this.getDOMNode (). Joten tämä on elinkaaritapahtuma, jossa aiot AJAX-pyyntösi hakea tietoja.

    komponentWillUnmount - Tämä elinkaari käynnistetään heti ennen komponentin irrottamista DOM: sta. Tässä voit tehdä tarvittavat siivoukset.

    getDerivedStateFromProps - Joskus joudut päivittämään komponentin tilan sen mukaan, missä rekvisiitta siirretään. Tämä on elinkaarimenetelmä, jossa teit niin. Se ohitetaan rekvisiitta ja tila, ja palauttamasi objekti yhdistetään nykyiseen tilaan.

    No, jos olet kiinni minuun asti, hyvää työtä. Toivon, että tämä opetusohjelma oli hyödyllinen sinulle ja tunnet nyt ainakin lievästi mukavan reaktion.

    Katso Reactin perusteet paljon perusteellisemmin tutustumalla React Fundamentals -kurssiimme.

    Tyler McGinnis