In der React / Redux-App, wann sollte ich eine Prop-Datei explizit übergeben, statt sie mit mapStateToProps vom globalen Status abzuholen?

8

Ich baue meine erste React-Redux-App und in vielen Fällen habe ich die Wahl, entweder <PaginationBox perPage={perPage} /> oder <PaginationBox /> zu machen und dann

%Vor%

Welche Auswirkungen hat die Verwendung der einen oder anderen Art und wann sollte ich eine gegenüber der anderen bevorzugen?

Gibt es Best Practices für die Beschaffung von Requisiten? Ich fühle mich jedes Mal ein bisschen schlecht, wenn ich mapStateToProps in einer tief verschachtelten Komponente verwende, weil es so aussieht, als würde die Komponente an den Zustand der jeweiligen Seite / App gekoppelt.

    
Eugene 26.04.2016, 13:51
quelle

4 Antworten

4

Es gibt keine einzige gute Antwort. In den Redux-FAQ unter Ссылка liegt es an Ihnen, zu entscheiden, wo in Ihrer Komponentenhierarchie Es ist sinnvoll, eine Komponente anzuschließen. Es könnte auf der Ebene "LeftSidebar / RightMainPanel" sein, oder es könnte viel granularer sein. In einigen Fällen, z. B. wenn Sie versuchen, eine Liste für die Leistung zu optimieren, können Sie die Liste selbst verbinden und die Element-IDs abrufen, und jedes ListItem wäre selbst verbunden und ruft seine eigenen Daten nach ID ab.

Für diesen speziellen Fall würde ich mich wahrscheinlich darauf konzentrieren, ein <PaginationBox /> verbunden zu haben und statuslose funktionale <PaginationItem /> -Komponenten nach Bedarf rendern zu lassen, meistens nur, weil die einzelnen Elemente keine echten Informationen benötigen als eine Nummer und ein Link zum Klicken. Aber das ist nur eine Meinung.

    
markerikson 26.04.2016 15:51
quelle
2

Haben Sie sich schon einmal das Muster der Presenter / Container-Komponenten angesehen? Es gibt mehrere gute Artikel um dieses Muster, die Ihnen die meisten geben Zeit eine gute Idee, wann eine Presenter oder Container-Komponente

haben

Mein Rat:

Beginnen Sie mit einer Containerkomponente (die über mapStateToProps und mapDispatchToProps verfügt) am Anfang der Komponentenhierarchie. Bleiben Sie dabei bei Presenter-Komponenten, die nur Requisiten und Aktionen erhalten. Es wird eine Zeit geben, in der Sie bemerken, dass (A) eine Präsentationskomponente selbst viele Eigenschaften / Aktionen benötigt oder (B) Sie auch Eigenschaften / Aktionen übergeben viele Ebenen runter und nur einige von ihnen werden von Komponenten dazwischen gegriffen.

Dann beginnen Sie, den Moderator mit den Containerkomponenten für fat Komponenten (A) auszutauschen. Wenn noch zu viele Aktionen / Eigenschaften (B) übergeben werden, müssen Sie über weitere Container-Komponenten nachdenken, die dafür sorgen, dass zu tiefe Requisiten / Aktionen nicht passieren.

Aber Ihre erste Regel könnte sein: Eine Container-Komponente oben, alle unten stehenden Komponenten sind Moderatoren.

    
Robin Wieruch 11.08.2016 09:08
quelle
0

Wenn wir Werte / Methoden an untergeordnete Komponenten übergeben wollen, verwenden wir Requisiten. Requisiten werden verwendet, um zu prüfen, ob der benötigte Wert oder die Methode für die aktuelle Komponente von einer anderen Komponente verfügbar ist. Nehmen wir an, ich habe zwei Methoden, eine ist Auswahl-Header und andere BuyItems. Aus dem Auswahl-Header wähle ich alle Artikel aus der Liste aus und sende diese an die buyItems-Komponente, die gekauft werden soll. Hier benötigt die buyItems-Komponente einen Wert von selection-header und das ist obligatorisch. Diese Art der Überprüfung erfolgt, werfen Requisiten.

Anstelle von Requisiten können wir auch Mixins verwenden. Mixins erlauben uns, eine andere Komponentenmethode in der gegenwärtigen Komponente zu verwenden.

%Vor%

jetzt in Buyitems Komponente können wir Auswahl Header-Methoden und Variablen

verwenden     
prudhvi seeramreddi 26.04.2016 17:53
quelle
0
___ answer36872294 ___

Wenn wir Werte / Methoden an untergeordnete Komponenten übergeben wollen, verwenden wir Requisiten. Requisiten werden verwendet, um zu prüfen, ob der benötigte Wert oder die Methode für die aktuelle Komponente von einer anderen Komponente verfügbar ist. Nehmen wir an, ich habe zwei Methoden, eine ist Auswahl-Header und andere BuyItems. Aus dem Auswahl-Header wähle ich alle Artikel aus der Liste aus und sende diese an die buyItems-Komponente, die gekauft werden soll. Hier benötigt die buyItems-Komponente einen Wert von selection-header und das ist obligatorisch. Diese Art der Überprüfung erfolgt, werfen Requisiten.

Anstelle von Requisiten können wir auch Mixins verwenden. Mixins erlauben uns, eine andere Komponentenmethode in der gegenwärtigen Komponente zu verwenden.

%Vor%

jetzt in Buyitems Komponente können wir Auswahl Header-Methoden und Variablen

verwenden     
___ qstntxt ___

Ich baue meine erste React-Redux-App und in vielen Fällen habe ich die Wahl, entweder %code% oder %code% zu machen und dann

%Vor%

Welche Auswirkungen hat die Verwendung der einen oder anderen Art und wann sollte ich eine gegenüber der anderen bevorzugen?

Gibt es Best Practices für die Beschaffung von Requisiten? Ich fühle mich jedes Mal ein bisschen schlecht, wenn ich %code% in einer tief verschachtelten Komponente verwende, weil es so aussieht, als würde die Komponente an den Zustand der jeweiligen Seite / App gekoppelt.

    
___ antwort43902893 ___

Dieses Thema ist etwas subjektiv und es gibt keine festen Regeln. Also erzähle ich dir einfach, was ich tue.

Normalerweise versuche ich mich nur mit dem Speicher im Container zu verbinden (übergeordnete Komponente, intelligente Komponente usw.). Dann übergebe ich Props aus dem Container an die Komponente (dumme Komponente), die nicht mit dem Store verbunden ist.

Ich strebe immer nach einer Hierarchie von Store - & gt; Behälter - & gt; Requisiten - & gt; Komponente.

Es ist also nicht immer sinnvoll, immer an dieser Hierarchie festzuhalten, ich versuche es immer zuerst.

Ich verstehe auf jeden Fall, was Sie sagen, dass das Verbinden einer Komponente mit dem Geschäft, das in Ihrer Komponentenhierarchie verborgen ist, sich ein wenig schmutzig anfühlen kann, ganz zu schweigen davon, dass es schwer zu warten ist.

Hier ist ein guter Artikel über intelligente / dumme Komponenten oder Container / Komponenten: Intelligente und dumme Komponenten in React

    
___ answer36869926 ___

Es gibt keine einzige gute Antwort. In den Redux-FAQ unter Ссылка liegt es an Ihnen, zu entscheiden, wo in Ihrer Komponentenhierarchie Es ist sinnvoll, eine Komponente anzuschließen. Es könnte auf der Ebene "LeftSidebar / RightMainPanel" sein, oder es könnte viel granularer sein. In einigen Fällen, z. B. wenn Sie versuchen, eine Liste für die Leistung zu optimieren, können Sie die Liste selbst verbinden und die Element-IDs abrufen, und jedes ListItem wäre selbst verbunden und ruft seine eigenen Daten nach ID ab.

Für diesen speziellen Fall würde ich mich wahrscheinlich darauf konzentrieren, ein %code% verbunden zu haben und statuslose funktionale %code% -Komponenten nach Bedarf rendern zu lassen, meistens nur, weil die einzelnen Elemente keine echten Informationen benötigen als eine Nummer und ein Link zum Klicken. Aber das ist nur eine Meinung.

    
___ answer38891968 ___

Haben Sie sich schon einmal das Muster der Presenter / Container-Komponenten angesehen? Es gibt mehrere gute Artikel um dieses Muster, die Ihnen die meisten geben Zeit eine gute Idee, wann eine Presenter oder Container-Komponente

haben

Mein Rat:

Beginnen Sie mit einer Containerkomponente (die über mapStateToProps und mapDispatchToProps verfügt) am Anfang der Komponentenhierarchie. Bleiben Sie dabei bei Presenter-Komponenten, die nur Requisiten und Aktionen erhalten. Es wird eine Zeit geben, in der Sie bemerken, dass (A) eine Präsentationskomponente selbst viele Eigenschaften / Aktionen benötigt oder (B) Sie auch Eigenschaften / Aktionen übergeben viele Ebenen runter und nur einige von ihnen werden von Komponenten dazwischen gegriffen.

Dann beginnen Sie, den Moderator mit den Containerkomponenten für fat Komponenten (A) auszutauschen. Wenn noch zu viele Aktionen / Eigenschaften (B) übergeben werden, müssen Sie über weitere Container-Komponenten nachdenken, die dafür sorgen, dass zu tiefe Requisiten / Aktionen nicht passieren.

Aber Ihre erste Regel könnte sein: Eine Container-Komponente oben, alle unten stehenden Komponenten sind Moderatoren.

    
___ tag123reactjs ___ React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Es verwendet ein deklaratives Paradigma und zielt darauf ab, sowohl effizient als auch flexibel zu sein. ___ tag123javascript ___ JavaScript (nicht zu verwechseln mit Java) ist eine dynamische Sprache mit mehreren Paradigmen auf hoher Ebene, die sowohl für das clientseitige als auch für das serverseitige Scripting verwendet wird. Verwenden Sie dieses Tag für Fragen zu ECMAScript und seinen verschiedenen Dialekten / Implementierungen (außer ActionScript und Google-Apps-Script). ___ tag123reactrux ___ Offizielle React-Bindungen für Redux ___ tag123redux ___ Redux ist ein vorhersagbarer Statuscontainer für JavaScript-Anwendungen, die auf dem Flux-Designmuster basieren. ___ qstnhdr ___ In der React / Redux-App, wann sollte ich eine Prop-Datei explizit übergeben, statt sie mit mapStateToProps vom globalen Status abzuholen? ___
mpowell213 10.05.2017 21:17
quelle