Kontejner vs Prezentační komponenty v React

Hlavní věcí, kterou je třeba mít na paměti, je to, že komponenty kontejneru a prezentační komponenty se při nastavování hierarchie komponent aplikace reagují společně. Reagovat aplikace budou téměř vždy potřebovat některé komponenty, které přebírají zodpovědnost za to, jak věci fungují, a komponenty pro zobrazování skutečných dat. Tam, kde prezentační komponenty nespravují stav, komponenty kontejneru ano. Pokud jsou prezentačními složkami obvykle děti v hierarchii komponent aplikace, jsou komponenty kontejneru obvykle rodiči prezentačních komponent.

Co jsou součásti kontejneru?

  • Komponenty kontejneru se primárně zabývají tím, jak věci fungují
  • zřídka mají vlastní HTML tagy, kromě balení
  • jsou často státní
  • jsou zodpovědné za poskytování dat a chování svým dětem (obvykle prezentační složky)

Zde je příklad komponenty kontejneru:

třída Collage rozšiřuje komponentu {
   konstruktor (rekvizity) {
      super (rekvizity);
      
      this.state = {
         snímky: []
      };
   }
   componentDidMount () {
      načíst ('/ api / current_user / image_list')
         .then (response => response.json ())
         .then (images => this.setState ({images}));
   }
   poskytnout() {
      vrátit se (
         
            {this.state.images.map (image => {                
                                  
            })}          
      )    } }

Naopak, jaké jsou prezentační složky?

  • Prezentační komponenty se primárně zabývají tím, jak věci vypadají
  • pravděpodobně obsahuje pouze metodu renderování a trochu jinou logiku
  • nevědí, jak načíst nebo změnit data, která vykreslují
  • nejlépe se označují jako funkční prvky bez státní příslušnosti

Zde je příklad prezentační složky:

// definování komponenty jako komponenty React
class Image rozšiřuje komponentu {
   poskytnout() {
      return ;
   }
}
exportovat výchozí obrázek
// definování komponenty jako konstanty
const Image = props => (
   
)
exportovat výchozí obrázek

U prezentačních komponent máte možnost je definovat jako běžné reakční komponenty nebo jako konstanty. Jejich definování jako konstant může pomoci odstranit některé závislosti a importovat další řádky kódu. Tímto způsobem lze definováním prezentačních komponent jako konstant zkrátit dobu načítání aplikace, pokud máte k dispozici spoustu dat.

Oddělení obav pomocí komponenty kontejneru

Naštěstí používáme React, máme schopnost skládat naše uživatelské rozhraní z více složek React. S ohledem na to můžeme výše uvedený příklad komponenty kontejneru rozdělit na dvě složky. Nejprve jsme vrstvu UI rozdělili na prezentační komponentu. Pak bychom tuto prezentační komponentu zabalili do větší komponenty kontejneru, která jako rekvizity předá rekvizity do prezentačních komponent. Tímto způsobem může kontejner zvládnout stav a jakoukoli další logiku aplikace.

Takto by to mohlo vypadat:

const Image = props => (
   
)
exportovat výchozí obrázek
třída ImageContainer rozšiřuje React.Component {
   konstruktor () {
      super ();
      
      this.state = {
         snímky: []
      };
   }
   componentDidMount () {
      načíst ('/ api / current_user / image_list')
         .then (response => response.json ())
         .then (images => this.setState ({images}));
   }
   poskytnout() {
      vrátit se (
         
            {this.state.images.map (image => {                             })}          
      )    } } exportovat výchozí ImageContainer

Abychom to shrnuli, rozdělili jsme původní součást na dvě části. Celý stav obsažený v naší komponentě ImageContainer kontejneru a naše logika jsou stále stejné. Prezentační složka Image je bez státní příslušnosti a je nyní neuvěřitelně stabilní a výstižná. Tímto způsobem, pokud se změní data API (například pokud se src změní na propojení), budeme moci provést tuto aktualizaci v rámci jedné prezentační komponenty, která bude aktualizovat všechny podřízené funkce mapové funkce. To nám také umožňuje vykreslit co nejvíce obrázků, protože obrázek je nyní v Reactu opakovaně použitelnou součástí. Vždy pamatujte, že opakovaně použitelné součásti jsou pravděpodobně jedním z nejsilnějších aspektů React, takže je důležité mít při navrhování struktury aplikace na paměti vždy toto.