Unterschied zwischen Komponente und Behälter im Reaktionsredux

Was ist der Unterschied zwischen Komponente und Behälter bei der Reaktion auf Redux?

Componentist Teil der React-API. Eine Komponente ist eine Klasse oder Funktion, die einen Teil einer React-Benutzeroberfläche beschreibt.

Container ist ein informeller Begriff für eine React-Komponente, connectdie einem Redux-Speicher zugeordnet ist. Container erhalten Redux-Statusaktualisierungen und dispatch-Aktionen und rendern normalerweise keine DOM-Elemente. Sie delegieren das Rendern an untergeordnete Präsentationskomponenten .

Weitere Informationen finden Sie unter Präsentations- und Containerkomponenten von Dan Abramov.

Komponenten, die für das Abrufen und Anzeigen von Daten verantwortlich sind, werden als Smart- oder Containerkomponenten bezeichnet. Die Daten können von Redux, einem beliebigen Netzwerkanruf oder einem Abonnement eines Drittanbieters stammen.

Dumme / Präsentationskomponenten sind diejenigen, die für die Präsentation der Ansicht auf der Grundlage der erhaltenen Requisiten verantwortlich sind.

Guter Artikel mit Beispiel hier

https://www.cronj.com/blog/difference-container-component-react-js/

Die Komponenten erstellen einen Teil der Ansicht, sodass DOM-Elemente gerendert und Inhalte auf dem Bildschirm angezeigt werden sollen.

Die Container nehmen an der Datenausarbeitung teil, daher sollte sie mit Redux "sprechen", da der Status geändert werden muss. Sie sollten also connect (react-redux), was die Verbindung herstellt, und die Funktionen mapStateToProps und mapDispatchToProps angeben :

.
.
.
import { connect } from "react-redux";

class myContainer extends Component {
}

function mapStateToProps(state) {
  // You return what it will show up as props of myContainer
  return {
    property: this.state.property
  };
}

function mapDispatchToProps(dispatch) {
  // Whenever property is called, it should be passed to all reducers
  return bindActionCreators({ property: property }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(myContainer);

Sie sind beide Komponenten; Container sind funktionsfähig, sodass sie kein HTML selbst rendern. Außerdem haben Sie Präsentationskomponenten, in die Sie das eigentliche HTML schreiben. Der Zweck des Containers besteht darin, den Zustand und den Versand an Requisiten für die Präsentationskomponente abzubilden.

Weiterführende Literatur: Link

Komponenten

Mit Komponenten können Sie die Benutzeroberfläche in unabhängige, wiederverwendbare Teile aufteilen und jedes Teil isoliert betrachten. Sie werden manchmal als "Präsentationskomponenten" bezeichnet, und das Hauptanliegen ist, wie die Dinge aussehen

Behälter

Container sind wie Komponenten ohne Benutzeroberfläche, und Container befassen sich mit der Funktionsweise. . Es wird hauptsächlich mit dem Redux-Speicher gesprochen, um die Daten abzurufen und zu aktualisieren

Siehe den Tabellenvergleich aus dem Redux-Dokument

Detaillierte Erklärung https://redux.js.org/basics/usage-with-react#presentational-and-container-components

React, Redux sind unabhängige Bibliotheken.

React bietet Ihnen ein Framework zum Erstellen von HTML-Dokumenten. Komponenten repräsentieren in gewisser Weise einen bestimmten Teil des Dokuments. Mit einer Komponente verknüpfte Methoden können dann den ganz bestimmten Teil des Dokuments bearbeiten.

Redux ist ein Framework, das eine bestimmte Philosophie zum Speichern und Verwalten von Daten in JS-Umgebungen vorschreibt. Es handelt sich um ein einziges großes JS-Objekt mit bestimmten definierten Methoden. Der beste Anwendungsfall ist die Statusverwaltung einer Web-App.

Da React vorschreibt, dass alle Daten von der Wurzel zu den Blättern fließen sollen, wird es mühsam, alle Requisiten zu pflegen, Requisiten in Komponenten zu definieren und dann Requisiten an bestimmte Requisiten an Kinder weiterzugeben. Es macht auch den gesamten Anwendungsstatus anfällig.

React Redux bietet eine saubere Lösung, bei der Sie direkt mit dem Redux-Store verbunden werden, indem Sie die angeschlossene Komponente einfach um eine andere React-Komponente (Ihre Container) wickeln . Da Sie in Ihrer Implementierung bereits definiert haben, welchen Teil des gesamten Anwendungsstatus Sie benötigen. So connectnimmt , dass die Daten aus dem Speicher heraus und übergibt sie als Requisiten an die Komponente es Einwickeln selbst arround.

Betrachten Sie dieses einfache Beispiel:

 class Person extends Component {
  constructor(props){
   this.name = this.props.name;
   this.type = this.props.type;
  }

  render() {
     return <p> My name is {this.name}. I am a doctor { this.type } </p>
  }
}

 const connect = InnerComponent => { 

   class A extends Component{
     render() {
        return <InnerComponent {...this.props} type="Doctor"/>
     }
   } 
   A.displayName = `Connect(${InnerComponent.displayName})`
   return A
 }

connectFunktion übergibt eine Requisite type.

Auf diese Weise fungiert eine Verbindung als Container für die Person-Komponente.

React besteht aus zwei Hauptkomponenten: erstens der intelligenten Komponente (Container) und zweitens der dummen Komponente (Präsentationskomponente). Container sind Komponenten sehr ähnlich. Der einzige Unterschied besteht darin, dass Container den Anwendungsstatus kennen. Wenn ein Teil Ihrer Webseite nur zum Anzeigen von Daten verwendet wird (dumm), machen Sie sie zu einer Komponente. Wenn Sie möchten, dass es intelligent ist und den Status (wenn sich Daten ändern) in der Anwendung kennt, machen Sie es zu einem Container.