Konteiner vs esitluskomponendid Reaktis

Peamine asi, mida tuleks meeles pidada, on konteineri komponendid ja esitluskomponendid rakenduse React komponentide hierarhia seadistamisel koos. Reaktiivsed rakendused vajavad peaaegu alati komponente, mis vastutavad asjade toimimise eest, ja komponente tegelike andmete kuvamiseks. Kui esitluskomponendid olekut ei halda, teevad seda konteineri komponendid. Kui esitluskomponendid on rakenduse komponentide hierarhias tavaliselt lapsed, on konteinerkomponendid tavaliselt esitluskomponentide vanemad.

Mis on konteineri komponendid?

  • Konteinerite komponendid on peamiselt seotud sellega, kuidas asjad töötavad
  • neil on harva ka oma HTML-sildid, peale mähise
  • nad on sageli riiklikud
  • nad vastutavad oma lastele andmete ja käitumise (tavaliselt esitluskomponendid) pakkumise eest

Siin on konteineri komponendi näide:

klassi kollaaž laiendab komponenti {
   konstruktor (rekvisiidid) {
      super (rekvisiidid);
      
      see.riik = {
         pildid: []
      };
   }
   komponentDidMount () {
      tooma ('/ api / praegune_kasutaja / pildiloend')
         . seejärel (vastus => vastus.json ())
         . seejärel (images => this.setState ({images}));
   }
   renderdama () {
      tagasi (
         
            {this.state.images.map (image => {                
                                  
            })}          
      )    } }

Mis seevastu on esitluskomponendid?

  • Esitluskomponendid on peamiselt seotud sellega, kuidas asjad välja näevad
  • sisaldavad tõenäoliselt ainult renderdusmeetodit ja vähe muud loogikat
  • nad ei tea, kuidas nende pakutavaid andmeid laadida või muuta
  • kõige paremini kirjutatakse need kodakondsuseta funktsionaalsete komponentidena

Siin on näide esitluskomponendist:

// komponendi määratlemine kui reaalaine komponent
klassi pilt laiendab komponenti {
   renderdama () {
      return ;
   }
}
eksportige vaikepilt
// komponendi defineerimine konstantsena
const Pilt = rekvisiidid => (
   
)
eksportige vaikepilt

Esituskomponentide abil on teil võimalus määratleda need nagu tavalised reageerivad komponendid või konstandid. Nende määratlemine konstantidena võib aidata eemaldada mõned sõltuvused ja importida täiendavaid koodiridu. Nii saab esitluskomponentide konstandina määratlemisel rakenduse laadimisaega lühendada, kui teil on palju andmeid laadimiseks.

Konteinerikomponendi kasutamisega seotud probleemide eraldamine

Õnneks on Reaktit kasutades võime oma kasutajaliidese koostada mitmest Reaxi komponendist. Seda meeles pidades saame ülaltoodud konteineri komponendi näite jagada kaheks komponendiks. Esiteks eraldasime kasutajaliidese kihi esitluskomponendiks. Seejärel mässime selle esitluskomponendi suuremasse konteinerikomponenti, mis jaguneb rekvisiitidena lastena esitluskomponentideks. Sel viisil saab konteiner seejärel käidelda olekut ja muud rakenduse loogikat.

See võib välja näha järgmiselt:

const Pilt = rekvisiidid => (
   
)
eksportige vaikepilt
klassi ImageContainer laiendab React.Component {
   ehitaja () {
      Super();
      
      see.riik = {
         pildid: []
      };
   }
   komponentDidMount () {
      tooma ('/ api / praegune_kasutaja / pildiloend')
         . seejärel (vastus => vastus.json ())
         . seejärel (images => this.setState ({images}));
   }
   renderdama () {
      tagasi (
         
            {this.state.images.map (image => {                             })}          
      )    } } eksportige vaikekujutis ImageContainer

Kordan kokku, et oleme algset komponenti jaganud kaheks osaks. Kogu konteinerikomponendis ImageContainer sisalduv olek ja meie loogika on endiselt sama. Esitluskomponent Pilt on kodakondsuseta ja nüüd on uskumatult stabiilne ja lühike. Sel viisil, kui API andmeid muudetakse (näiteks kui src muudetakse linkimiseks), saaksime selle värskenduse teha ühe esitluskomponendi piires, mis värskendab kõiki selle kaardifunktsiooni lapsi. See võimaldab meil renderdada ka võimalikult palju pilte, kuna Image on nüüd Reaktis korduvkasutatav komponent. Pidage alati meeles, et korduvkasutatavad komponendid on vaieldamatult üks Reacti võimsamaid aspekte, seetõttu on oluline oma rakenduse ülesehituse kujundamisel seda alati meeles pidada.