Container vs præsentationskomponenter i reaktion

Den vigtigste ting at huske er, at containerkomponenter og præsentationskomponenter går sammen, når du opretter et React-app-komponenthierarki. React-apps har næsten altid brug for nogle komponenter, der tager ansvar for den måde ting fungerer, og komponenter til visning af faktiske data. Hvor præsentationskomponenter ikke administrerer tilstand, gør containerkomponenter det. Hvor præsentationskomponenter normalt er børn i appkomponenthierarkiet, er containerkomponenter som regel forældre til præsentationskomponenter.

Hvad er containerkomponenter?

  • Containerkomponenter er primært beskæftiget med, hvordan tingene fungerer
  • de har sjældent egne HTML-tags, bortset fra en indpakning
  • de er ofte statslige
  • de er ansvarlige for at levere data og adfærd til deres børn (normalt præsentative komponenter)

Her er et eksempel på en containerkomponent:

klasse Collage udvider komponent {
   konstruktør (rekvisitter) {
      super (rekvisitter);
      
      this.state = {
         billeder: []
      };
   }
   componentDidMount () {
      hente ( '/ api / Aktuel_bruger / image_list')
         .then (response => response.json ())
         .then (images => this.setState ({images}));
   }
   render () {
      Vend tilbage (
         
            {this.state.images.map (image => {                
                                               })}                 )    } }

I modsætning hertil, hvad er præsentative komponenter?

  • Præsentationskomponenter er primært optaget af, hvordan tingene ser ud
  • indeholder sandsynligvis kun en gengivelsesmetode og lidt andet logik
  • de ved ikke, hvordan de indlæser eller ændrer de data, de giver
  • de er bedst skrevet som statsløse funktionelle komponenter

Her er et eksempel på en præsentationskomponent:

// at definere komponenten som en React Component
klasse Billedet udvider komponent {
   render () {
      returner ;
   }
}
eksporter standardbillede
// at definere komponenten som en konstant
const Image = rekvisitter => (
   
)
eksporter standardbillede

Med præsentative komponenter har du muligheden for at definere dem som almindelige reaktionskomponenter eller som konstanter. Definition af dem som konstanter kan muligvis hjælpe med at fjerne nogle afhængigheder og importere ekstra linjer med kode. Så på denne måde kan definition af præsentationskomponenter som konstanter skære ned på appens indlæsningstid, hvis du har masser af data at indlæse.

Adskillelse af bekymringer ved hjælp af en containerkomponent

Heldigvis har vi ved hjælp af React muligheden for at komponere vores UI ud fra flere React-komponenter. Når vi husker dette, kan vi opdele ovenstående eksempel på containerkomponent i to komponenter. Først skal vi adskille brugergrænsefladen i en præsentationskomponent. Derefter vil vi indpakke den præsentative komponent i en større containerkomponent, der overfører rekvisitter til præsentationselementer som børn. På denne måde kan containeren derefter håndtere staten og enhver anden applogik.

Sådan ser det ud:

const Image = rekvisitter => (
   
)
eksporter standardbillede
klasse ImageContainer udvider React.Component {
   konstruktør () {
      super();
      
      this.state = {
         billeder: []
      };
   }
   componentDidMount () {
      hente ( '/ api / Aktuel_bruger / image_list')
         .then (response => response.json ())
         .then (images => this.setState ({images}));
   }
   render () {
      Vend tilbage (
         
            {this.state.images.map (image => {                             })}                 )    } } eksporter standard ImageContainer

For at sammenfatte, har vi opdelt den originale komponent i to stykker. Alle tilstande indeholdt i vores containerkomponent ImageContainer, og vores logik er stadig den samme. Den præsentative komponent Image er statsløs og er nu utroligt stabil og kortfattet. På denne måde, hvis API-data ændres (f.eks. Hvis src ændres til link), ville vi være i stand til at foretage denne opdatering inden for en enkelt præsentativ komponent, der vil opdatere alle børnene til den kortfunktion. Dette giver os også mulighed for at gengive så mange billeder som muligt, da billedet nu er en genanvendelig komponent i React. Husk altid, at genanvendelige komponenter uden tvivl er en af ​​de mest kraftfulde aspekter af React, så det er vigtigt altid at have det i tankerne, når du designer din appstruktur.