2016-04-21 6 views
5

Nach https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.i63w9pvzwReagieren. Ist es schlecht, wenn Präsentationskomponenten Containerkomponenten enthalten?

Präsentations Komponenten:

  • beide Präsentations- und Containerbestandteilen enthalten ** nach innen, und in der Regel einige DOM-Markup und Stile ihrer eigenen.
  • Keine Abhängigkeiten vom Rest der App, wie Flux-Aktionen oder Speicher.

Ich denke, wenn Präsentations-Komponenten Container-Komponenten enthalten, werden sie auf Flux oder Redux bekommen abhängen (oder was auch immer die Behälterkomponenten sind abhängig von).

Das wird die Präsentation und Wiederverwendung von Präsentationsteilen erschweren.

+0

Gibt es eine Frage? – aet

+0

@aet Ich frage mich, ob Präsentation Komponenten mit Container-Komponenten ist schlecht? –

+2

Fair genug. Die Antwort ist nicht geradlinig. Man könnte argumentieren, dass es besser wäre, die App so zu gestalten, dass Containerkomponenten nicht geschachtelt werden müssen. Mit redux hält Sie beispielsweise nichts davon ab, das gesamte Zustandsobjekt als Requisite an alle Komponenten weiterzuleiten (und dies ist ein gängiges Muster), wodurch diese Container in der Kette nicht mehr benötigt werden. Aber vielleicht hast du einen wirklich guten Grund dafür, als ob eine Unterkomponente einen Zustand benötigt und dieser Zustand ein großes Objekt ist und die Leistung leiden könnte, wenn sie an alle weitergegeben wird. – aet

Antwort

2

Es ist nicht schlecht, es ist völlig in Ordnung. Der springende Punkt von react-redux ist, dass Sie Containerkomponenten direkt mit dem Store verbinden können, ohne dass Sie den gesamten Store als Prop eine Komponente durchlaufen müssen. Die Wiederverwendung von Komponenten stellt kein Problem dar, da die Komponente <Provider> alle angeschlossenen Containerkomponenten irgendwo unterhalb der Komponente arbeiten lässt.

Es ist auch nicht schwer, Container-Komponenten zu testen. Sie können die verbundene Komponente zum Standardexport machen, aber auch die nicht verbundene Komponente als benannten Export exportieren, den Sie für Tests verwenden können, und diese Props in diesen Tests manuell übergeben. Weitere Informationen finden Sie im Abschnitt "Connected Components" der 'Writing Tests' part of the Redux docs.

Zum Testen von Präsentationskomponenten, die Containerkomponenten enthalten, ist dies kein Problem. Ein seichtes Rendern funktioniert in Tests immer noch gut (es sei denn, Sie laufen auf this issue). Und wenn Sie die Komponente in einem Test mounten müssen, können Sie sie immer in eine <Provider> Komponente mit einem für diesen Test spezifischen Speicher verpacken.

Edit: Diese Antwort ist spezifisch für Redux mit react-redux. Andere Flux-Implementierungen können einige Schwierigkeiten damit haben, von denen ich nicht weiß.

Verwandte Themen