React Render Props und HOC verstehen

Hier ist ein großartiger Beitrag von Aditya Agarwal über den Unterschied zwischen Render Props und Higher-Order Components in React. Besonders gut gefällt mir die Demo, die er zur Erklärung der beiden gewählt hat. Aber, um es zusammenzufassen

Higher-Order Components (HOCs) nehmen eine Komponente und geben eine Komponente zurück. Nehmen wir an, Sie haben eine Komponente namens Username, die nur einen String des Namens eines Benutzers zurückgibt, und Sie möchten diesen irgendwo großschreiben – dies ist die perfekte Gelegenheit, einen HOC zu verwenden, der diese Username-Komponente umschließt und jedes Zeichen ändert. Genau wie im ausgezeichneten Tutorial, das Kingsley Silas hier auf CSS-Tricks geschrieben hat.

HOCs sind besonders nützlich, wenn Sie eine Komponente ändern und sie dann an vielen Stellen verwenden möchten, oder um kleine Code-Einheiten zu erstellen, um zu verhindern, dass eine Komponente mit zu vielen Optionen und Props überladen wird.

Eine Render-Prop hingegen ist „eine Funktions-Prop, die eine Komponente verwendet, um zu wissen, was gerendert werden soll.“ Zumindest sagen das die React Docs, aber es hat eine Weile gedauert, bis ich es verstanden habe. Soweit ich weiß, ermöglicht sie es Ihnen, eine Möglichkeit für eine React-Komponente bereitzustellen (typischerweise eine, die nur viele wiederverwendbare Daten enthält) und diese an eine andere weiterzugeben (also eine Komponente, die dann diese Daten rendert).

Hier ist ein großartiges Beispiel dafür in den React Docs

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

Hier passiert Folgendes: Jemand hat eine Mouse-Komponente im Code definiert, die x + y-Koordinaten basierend auf der Position der Maus des Benutzers liefert. Diese Mouse-Komponente gibt dann viele Daten zurück, die wir als mouse speichern und dann an die Cat-Komponente weitergeben, die etwas mit diesen Daten rendert.

Dies ist großartig, wenn Sie die Daten von Mouse wiederverwenden möchten, aber auch, wenn Sie viele verschiedene Arten von Daten an die Cat-Komponente übergeben möchten. Sagen wir, Sie möchten, dass Cat etwas anderes rendert, basierend auf der Art der Daten, die Sie ihr zuführen.

Zusammenfassend lässt sich sagen: HOCs und Render-Props sind zwei Wege, um ähnliche Arbeiten zu erledigen. Nämlich können sie unseren Code in viele wiederverwendbare Teile aufteilen und uns dazu ermutigen, Komponenten zu erstellen, die auf lange Sicht flexibler sind.

Direkter Link →