Container vs Präsentationskomponenten in Reaktion

Beachten Sie vor allem, dass Container- und Präsentationskomponenten beim Einrichten einer React-App-Komponentenhierarchie zusammenpassen. React Apps benötigen fast immer einige Komponenten, die die Verantwortung für die Funktionsweise übernehmen, sowie Komponenten für die Anzeige der tatsächlichen Daten. Wo Präsentationskomponenten keinen Status verwalten, tun dies Containerkomponenten. Wenn Präsentationskomponenten normalerweise untergeordnete Elemente in der App-Komponentenhierarchie sind, sind Container-Komponenten normalerweise die übergeordneten Elemente von Präsentationskomponenten.

Was sind Containerkomponenten?

  • Containerkomponenten befassen sich hauptsächlich mit der Funktionsweise
  • Abgesehen von einem umschließenden
    haben sie selten eigene HTML-Tags
  • sie sind oft zustandsbehaftet
  • Sie sind für die Bereitstellung von Daten und Verhaltensweisen für ihre Kinder verantwortlich (normalerweise Präsentationskomponenten).

Hier ist ein Beispiel für eine Containerkomponente:

Klasse Collage erweitert Komponente {
   Konstruktor (Requisiten) {
      super (Requisiten);
      
      this.state = {
         bilder: []
      };
   }
   componentDidMount () {
      fetch ('/ api / current_user / image_list')
         .then (response => response.json ())
         .then (images => this.setState ({images}));
   }
   render () {
      Rückkehr (
         
            {this.state.images.map (image => {                
                                               })}                 )    } }

Was sind dagegen Präsentationskomponenten?

  • Bei den Präsentationskomponenten geht es in erster Linie darum, wie die Dinge aussehen
  • wahrscheinlich nur eine Render-Methode und wenig andere Logik enthalten
  • Sie wissen nicht, wie sie die von ihnen gerenderten Daten laden oder ändern sollen
  • Sie werden am besten als zustandslose Funktionskomponenten geschrieben

Hier ist ein Beispiel für eine Präsentationskomponente:

// Definiere die Komponente als React Component
Klasse Bild erweitert Komponente {
   render () {
      return ;
   }
}
Standardbild exportieren
// Definiere die Komponente als Konstante
const Image = Requisiten => (
   
)
Standardbild exportieren

Bei Präsentationskomponenten haben Sie die Möglichkeit, diese als reguläre Reaktionskomponenten oder als Konstanten zu definieren. Wenn Sie sie als Konstanten definieren, können Sie möglicherweise einige Abhängigkeiten beseitigen und zusätzliche Codezeilen importieren. Auf diese Weise kann das Definieren von Präsentationskomponenten als Konstanten die Ladezeit von Apps verkürzen, wenn Sie viele Daten laden müssen.

Trennung von Anliegen mit einer Containerkomponente

Glücklicherweise können wir mit React unsere Benutzeroberfläche aus mehreren React-Komponenten zusammensetzen. Vor diesem Hintergrund können wir das obige Beispiel für eine Containerkomponente in zwei Komponenten aufteilen. Zunächst werden wir die UI-Ebene in eine Präsentationskomponente unterteilen. Dann würden wir diese Präsentationskomponente in eine größere Containerkomponente einschließen, die Requisiten als untergeordnete Komponenten in Präsentationskomponenten übergibt. Auf diese Weise kann der Container dann den Status und jede andere Anwendungslogik verarbeiten.

So könnte das aussehen:

const Image = Requisiten => (
   
)
Standardbild exportieren
Klasse ImageContainer erweitert React.Component {
   Konstrukteur() {
      Super();
      
      this.state = {
         bilder: []
      };
   }
   componentDidMount () {
      fetch ('/ api / current_user / image_list')
         .then (response => response.json ())
         .then (images => this.setState ({images}));
   }
   render () {
      Rückkehr (
         
            {this.state.images.map (image => {                             })}                 )    } } Standard-ImageContainer exportieren

Zusammenfassend haben wir die ursprüngliche Komponente in zwei Teile zerlegt. Der gesamte Status in unserer Containerkomponente ImageContainer und unsere Logik sind unverändert. Die Präsentationskomponente Image ist zustandslos und ist jetzt unglaublich stabil und prägnant. Auf diese Weise können wir, wenn die API-Daten geändert werden (z. B. wenn src in link geändert wird), diese Aktualisierung in einer einzelnen Präsentationskomponente vornehmen, die alle untergeordneten Elemente dieser Zuordnungsfunktion aktualisiert. Dadurch können wir auch so viele Bilder wie möglich rendern, da Image nun eine wiederverwendbare Komponente in React ist. Denken Sie immer daran, dass wiederverwendbare Komponenten wohl einer der mächtigsten Aspekte von React sind. Daher ist es wichtig, dies beim Entwerfen Ihrer App-Struktur immer im Hinterkopf zu behalten.