Kontti vs. esittelykomponentit reagoinnissa

Tärkeintä pitää mielessä, että säilökomponentit ja esityskomponentit kulkevat yhdessä React-sovelluskomponenttien hierarkiaa määritettäessä. React-sovellukset tarvitsevat melkein aina joitain komponentteja, jotka ottavat vastuun asioiden toiminnasta, ja komponentteja todellisen tiedon näyttämiseen. Jos esityskomponentit eivät hallitse tilaa, säilytyskomponentit tekevät. Kun esityskomponentit ovat sovelluskomponenttien hierarkiassa yleensä lapsia, säilökomponentit ovat yleensä esityskomponenttien vanhemmat.

Mitä konttikomponentit ovat?

  • Kontinkomponentit koskevat ensisijaisesti asioiden toimintaa
  • heillä on harvoin omia HTML-tunnisteita, paitsi kääre
  • he ovat usein tilallisia
  • he vastaavat tietojen ja käyttäytymisen tarjoamisesta lapsilleen (yleensä esityskomponentit)

Tässä on esimerkki konttikomponentista:

luokan kollaasi laajentaa komponenttia {
   rakentaja (rekvisiitta) {
      Super (tarpeistoa);
      
      tämä.valtio = {
         kuvia: []
      };
   }
   komponentDidMount () {
      nouto ( '/ API / Nykyinen_käyttäjä / image_list')
         . sitten (vastaus => vastaus.json ())
         . sitten (images => this.setState ({images}));
   }
   tehdä () {
      palata (
         
            {this.state.images.map (image => {                
                                               })}                 )    } }

Mitä sen sijaan esityskomponentit ovat?

  • Esityskomponentit koskevat ensisijaisesti sitä, miten asiat näyttävät
  • sisältävät todennäköisesti vain renderöintimenetelmän ja vähän muuta logiikkaa
  • he eivät osaa ladata tai muuttaa tarjoamiaan tietoja
  • ne kirjoitetaan parhaiten valtiottomina toiminnallisina komponenteina

Tässä on esimerkki esityskomponentista:

// komponentin määritteleminen reagoivaksi komponentiksi
luokan kuva laajentaa komponenttia {
   tehdä () {
      palauta ;
   }
}
vie oletuskuva
// määritetään komponentti vakiona
const Image = rekvisiitta => (
   
)
vie oletuskuva

Esityskomponenttien avulla sinulla on mahdollisuus määritellä ne tavallisina reagoivina komponenteina tai vakioina. Niiden määritteleminen vakioina voi auttaa poistamaan joitain riippuvuuksia ja tuomaan ylimääräisiä koodirivejä. Joten tällä tavalla esityskomponenttien määritteleminen vakioina voi lyhentää sovelluksen latausaikaa, jos sinulla on paljon ladattavaa tietoa.

Huolenaiheiden erottaminen konttikomponentin avulla

Onneksi Reaktia käyttämällä meillä on kyky säveltää käyttöliittymämme useista Reakty-komponenteista. Pidämme tämän mielessä, että voimme jakaa yllä olevan säilöosakomponentin kahteen osaan. Ensin erotimme käyttöliittymäkerroksen esityskomponentiksi. Sitten käärimme kyseisen esityskomponentin suurempaan säilytyskomponenttiin, joka kulkeutuu rekvisiittien avulla esityskomponenteiksi lapsina. Tällä tavalla säilö voi sitten käsitellä tilaa ja mitä tahansa muuta sovelluslogiikkaa.

Tämä voi näyttää seuraavalta:

const Image = rekvisiitta => (
   
)
vie oletuskuva
luokan ImageContainer laajentaa React.Component {
   rakentaja () {
      Super ();
      
      tämä.valtio = {
         kuvia: []
      };
   }
   komponentDidMount () {
      nouto ( '/ API / Nykyinen_käyttäjä / image_list')
         . sitten (vastaus => vastaus.json ())
         . sitten (images => this.setState ({images}));
   }
   tehdä () {
      palata (
         
            {this.state.images.map (image => {                             })}                 )    } } vie oletus ImageContainer

Kannattaakseni, olemme jakaneet alkuperäisen komponentin kahteen osaan. Kaikki säilökomponentti ImageContainer -tilassa oleva tila, ja logiikkamme on edelleen sama. Esityskomponentti Kuva on valtioton ja on nyt uskomattoman vakaa ja tiivis. Tällä tavoin, jos API-tietoja muutetaan (kuten jos src: tä vaihdetaan linkittämään), voimme tehdä tämän päivityksen yhdessä esityskomponentissa, joka päivittää kaikki kyseisen karttatoiminnon lapset. Tämän avulla voimme myös tuottaa niin monta kuvaa kuin mahdollista, koska Image on nyt uudelleenkäytettävä komponentti Reaktissa. Muista aina, että uudelleenkäytettävät komponentit ovat kiistatta yksi Reaktin tehokkaimmista puolista, joten on tärkeää pitää tämä mielessä sovelluksen rakennetta suunnitellessasi.