{"id":2004,"date":"2020-05-18T22:30:10","date_gmt":"2020-05-18T20:30:10","guid":{"rendered":"https:\/\/ways4.eu\/?p=2004"},"modified":"2020-05-19T10:47:26","modified_gmt":"2020-05-19T08:47:26","slug":"container-komponenten-in-react","status":"publish","type":"post","link":"https:\/\/ways4.eu\/de\/blog\/2020\/05\/18\/container-komponenten-in-react\/","title":{"rendered":"Container Komponenten in React"},"content":{"rendered":"

Ein React-Pattern<\/strong>, das im Coding von React Frontends Ber\u00fccksichtigung finden sollte, ist das Container-Komponenten-Pattern.<\/p>\n

Die Idee ist einfach:<\/h3>\n

Ein Container ruft Daten ab und rendert dann die entsprechende<\/strong> Unterkomponente. So simpel.<\/p>\n

„Entsprechend<\/strong>“ bedeutet eine Komponente mit demselben Namensbestandteil:<\/p>\n

GuineaPigs<\/strong>Container => GuineaPigs<\/strong>
\nAnimals<\/strong>Container => Animals<\/strong>
\nEventList<\/strong>Container => EventList<\/strong><\/p>\n

Konzept verstanden ?<\/strong><\/p>\n

Warum Container?<\/h3>\n

Angenommen, du hast eine Komponente, die Kommentare anzeigt. Da du noch nichts vom Container-Komponenten-Pattern geh\u00f6rt hast, platzierst du deinen Code so, dass\u00a0 alles an einem Ort ist:<\/p>\n

class CommentList<\/strong> extends React.Component {\n  this.state = { comments: [] };\n\n  componentDidMount() {\n    fetchSomeComments(comments =>\n      this.setState({ comments: comments }));\n  }<\/span>  render() {\n    return (\n      <ul>\n        {this.state.comments.map(c => (\n          <li>{c.body}\u2014{c.author}<\/li>\n        ))}\n      <\/ul>\n    );\n  }\n}\n<\/span><\/pre>\n
<\/code><\/span><\/pre>\n
Deine Komponente ist sowohl f\u00fcr das Abrufen<\/strong> als auch f\u00fcr das Pr\u00e4sentieren<\/strong> von Daten<\/strong> verantwortlich. Daran ist nichts \u201eFalsches\u201c, aber einige Vorteile von React werden damit nicht nutzbar, zB:<\/p>\n
Wiederverwendbarkeit<\/h4>\n
CommentList kann nur unter genau den gleichen Umst\u00e4nden wiederverwendet werden.<\/p>\n
Datenstruktur<\/h4>\n
Die Markup-Komponenten sollten die Erwartungen an die ben\u00f6tigten Daten angeben. PropTypes sind daf\u00fcr optimal.
\nUnsere Komponente hat eine Erwartung an die Datenstruktur, kann diese jedoch nicht ausdr\u00fccken. Wenn sich der json-Endpunkt \u00e4ndert, wird der Datenflu\u00df zur Komponente unterbrochen (silent).<\/p>\n
Noch einmal. Diesmal mit einem Container<\/h3>\n
Lass uns zun\u00e4chst den Datenabruf in eine Containerkomponente verlagern:<\/p>\n
class CommentListContainer<\/strong> extends React.Component {\n  state = { comments: [] };<\/span>  componentDidMount() {\n    fetchSomeComments(comments =>\n      this.setState({ comments: comments }));\n  }<\/span>  render() {\n    return <CommentList<\/strong> comments={this.state.comments} \/>;\n  } \n}\n<\/span><\/pre>\n
Lass uns nun CommentList \u00fcberarbeiten, um comments <\/strong>als prop<\/strong> zu verwenden:<\/p>\n
const CommentList<\/strong> = props =>\n  <ul>\n    {props.comments.map(c => (\n      <li>{c.body}\u2014{c.author}<\/li>\n    ))}\n  <\/ul><\/span><\/pre>\n
Also, was haben wir damit erreicht ?<\/h3>\n
Tats\u00e4chlich eine ganze Menge….<\/p>\n