wake-up-neo.com

Unterschied zwischen Komponente und Behälter beim Rückfluss

Was ist der Unterschied zwischen Komponente und Behälter in React Redux?

68

Component ist 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, die für einen Redux-Store connect_ ist. Container erhalten Redux-Statusaktualisierungen und dispatch-Aktionen. Normalerweise werden DOM-Elemente nicht gerendert. Sie delegieren das Rendering an untergeordnete Komponenten von presentational.

Für mehr Details lesen Sie Präsentations- vs. Containerkomponenten von Dan Abramov.

83
joews

Eine Komponente, die für das Abrufen und Anzeigen der Daten verantwortlich ist, wird als Smart- oder Containerkomponente bezeichnet. Daten können von Redux, Requisiten oder einem beliebigen Netzwerkanruf stammen. 

Dumm/Präsentationskomponenten sind diejenigen, die für die Präsentation von Daten verantwortlich sind, die empfangen werden. 

Guter Artikel mit Beispiel hier 

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

5

Sie sind beide Komponenten. Container sind funktional, so dass sie keine HTML-Dateien selbst darstellen, und Sie haben auch Präsentationskomponenten, in denen Sie die eigentliche HTML-Datei schreiben. Der Zweck des Containers besteht darin, den Zustand abzubilden und an Requisiten für die Präsentationskomponente zu senden. 

Weiterführende Literatur: Link

2
lysdexic

Die Komponenten bilden einen Teil der Ansicht. Sie sollten also DOM-Elemente rendern und Inhalte auf dem Bildschirm anzeigen.

Die Container sind an der Datenausarbeitung beteiligt, so dass sie mit redux "sprechen" sollten, da sie den Status ändern müssen. Sie sollten also connect (react-redux) einschließen, was die Verbindung herstellt, und die Funktionen mapStateToProps und mapDispatchToProps

.
.
.
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);
2
J C

React, Redux sind unabhängige Bibliotheken.

React bietet Ihnen einen Rahmen zum Erstellen von HTML-Dokumenten. Komponenten stellen gewissermaßen einen bestimmten Teil des Dokuments dar. 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. Ein einziges großes JS-Objekt mit bestimmten definierten Methoden. Der beste Anwendungsfall besteht in der Statusverwaltung einer Web-App.

Da React vorschreibt, dass alle Daten von der Wurzel zu den Blättern fließen sollen, wird es langweilig, alle Requisiten zu bearbeiten, Requisiten in Komponenten zu definieren und Requisiten an bestimmte Requisiten an Kinder zu übergeben. 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 verbundene Komponente einfach um eine andere React-Komponente (Ihre Container) wickeln. Seit Ihrer Implementierung haben Sie bereits festgelegt, welchen Teil des gesamten Anwendungsstatus Sie benötigen. connect nimmt diese Daten aus dem Speicher und übergibt sie als Requisiten an die Komponente, die sie selbst umgibt.

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
 }

connect Funktion übergibt eine Eigenschaft type.

Auf diese Weise fungiert eine Verbindung als Container für die Personenkomponente.

1
nirbhaygp

React besteht aus zwei Hauptkomponenten: Smart Component (Container) und Second Dumb (Präsentationskomponente). Container sind Komponenten sehr ähnlich, der einzige Unterschied besteht darin, dass Container den Anwendungsstatus kennen. Wenn ein Teil Ihrer Webseite nur zur Anzeige von Daten verwendet wird (dumm), machen Sie sie zu einer Komponente. Wenn Sie wissen möchten, dass der Status der Anwendung intelligent ist und Sie den Status kennen (wenn sich Daten ändern), machen Sie ihn zu einem Container.

0
Neel Patel