Render Props und HOC-Muster
Übergeben Sie eine Render-Funktion als Prop, um UI einzuschleusen, und umschließen Sie Komponenten mit Higher-Order Components, um Verhalten einzuschleusen, ohne das Original zu verändern.
Render Props und HOC-Muster ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Zwei klassische Muster zur Wiederverwendung
Vor Hooks (React 16.8) bedeutete die Wiederverwendung zustandsbehafteter Logik entweder Higher-Order Components (HOCs) oder Render Props. In neuem Code sind sie selten, aber Sie werden ihnen noch in Legacy-Codebasen und vielen Bibliotheken begegnen.
Render Props – die Idee
Eine Komponente akzeptiert eine Funktion als Prop (üblicherweise mit dem Namen render oder children) und ruft sie mit ihrem internen Zustand auf. Der Nutzer entscheidet, was mit diesem Zustand gerendert wird.
function Mouse({ render }) {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => {
const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
window.addEventListener('mousemove', handler);
return () => window.removeEventListener('mousemove', handler);
}, []);
return render(pos);
}
// Usage:
<Mouse render={({ x, y }) => <p>{x}, {y}</p>} />children als Funktion
Die children-Prop kann ebenfalls eine Funktion sein – dasselbe Muster mit übersichtlicherem JSX.
function Mouse({ children }) {
const [pos, setPos] = useState({ x: 0, y: 0 });
/* ... */
return children(pos);
}
<Mouse>
{({ x, y }) => <p>{x}, {y}</p>}
</Mouse>Higher-Order Components – die Idee
Eine HOC ist eine Funktion, die eine Komponente übernimmt und eine neue Komponente mit zusätzlichen Props oder zusätzlichem Verhalten zurückgibt. Sie wurde stark in Reduxs connect() und React Routers withRouter() verwendet.
function withMouse(Component) {
return function WithMouse(props) {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => {
const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
window.addEventListener('mousemove', handler);
return () => window.removeEventListener('mousemove', handler);
}, []);
return <Component {...props} mouse={pos} />;
};
}
// Usage:
const Position = ({ mouse }) => <p>{mouse.x}, {mouse.y}</p>;
const EnhancedPosition = withMouse(Position);
<EnhancedPosition />HOCs werden durch Wrapping kombiniert
Sie können HOCs stapeln – dadurch entsteht jedoch eine „Wrapper-Hölle“, die schwer zu debuggen ist.
// Multiple HOCs:
const Enhanced = withRouter(connect(mapState)(withTranslation()(MyComponent)));
// Equivalent in modern React:
// const Enhanced = MyComponent (reads from hooks: useRouter, useSelector, useTranslation)Render Props im Vergleich zu HOCs
Render Props sind expliziter, typfreundlich und verursachen keine Namenskonflikte. HOCs sind deklarativer; bei gewrappten Komponenten gehen ohne sorgfältige Behandlung statische Typen verloren, und Konflikte bei Prop-Namen sind möglich.
Warum Hooks beide Muster ersetzt haben
Benutzerdefinierte Hooks erreichen dasselbe Ziel mit weniger Aufwand: keine Wrapper-Komponenten, keine verschachtelten Funktionsargumente und keine komplizierten Typkonstruktionen. Hooks sind die idiomatische Lösung im Jahr 2025.
// Custom hook equivalent of useMouse:
function useMouse() {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => {
const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
window.addEventListener('mousemove', handler);
return () => window.removeEventListener('mousemove', handler);
}, []);
return pos;
}
// Usage:
const { x, y } = useMouse();Wann Render Props weiterhin überlegen sind
Bei Komponenten, die Markup und nicht nur Zustand einfügen müssen – etwa virtualisierten Listen, die Elemente an bestimmten Positionen rendern –, sind Render Props weiterhin die natürliche Lösung.
function VirtualList({ items, itemHeight, renderItem }) {
const [scrollTop, setScrollTop] = useState(0);
const start = Math.floor(scrollTop / itemHeight);
const visible = items.slice(start, start + 20);
return visible.map((item, i) => renderItem(item, start + i));
}
<VirtualList items={data} itemHeight={40} renderItem={(item, i) => (
<Row key={i} data={item} />
)} />Best Practices für HOCs (wenn erforderlich)
Wenn Sie eine HOC schreiben müssen: Kopieren Sie statische Methoden (hoist-non-react-statics), leiten Sie Refs weiter (React.forwardRef) und behalten Sie den displayName für die DevTools bei.
Refs in HOCs weiterleiten
HOCs verbergen Refs standardmäßig. Verwenden Sie forwardRef, damit Nutzer weiterhin auf die Ref der zugrunde liegenden Komponente zugreifen können.
function withLogger(Component) {
const Wrapped = React.forwardRef((props, ref) => {
console.log('rendering', Component.name);
return <Component {...props} ref={ref} />;
});
Wrapped.displayName = `withLogger(${Component.name})`;
return Wrapped;
}Legacy-Muster erkennen
Sie werden HOCs und Render Props in folgenden Bibliotheken finden: react-redux (ältere API), Apollo Client v2, react-router v5 (withRouter), Formik (Field) und styled-components (withTheme). Migrieren Sie zu Hooks, sobald die neueren APIs dieser Bibliotheken dies ermöglichen.
Kurze Überprüfung
Welches Muster haben Hooks größtenteils ersetzt, um zustandsbehaftete Logik zwischen React-Komponenten zu teilen?
Zusammenfassung: Render Props & HOCs
Render Props: Eine Funktion als Prop, die JSX zurückgibt – explizit und typfreundlich. HOCs: Funktionen, die eine Komponente wrappen und von älteren Bibliotheken verwendet werden (connect, withRouter). Benutzerdefinierte Hooks haben beide Muster für Zustandslogik ersetzt. Render Props sind weiterhin überlegen, wenn Sie benutzerdefiniertes Markup einfügen müssen (etwa bei virtualisierten Listen). Wenn Sie HOCs schreiben: forwardRef verwenden, statische Eigenschaften übernehmen und displayName setzen.
Häufig gestellte Fragen
Ist die Lektion „Render Props und HOC-Muster“ kostenlos?
Ja — der vollständige Text von „Render Props und HOC-Muster“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Render Props und HOC-Muster“?
Übergeben Sie eine Render-Funktion als Prop, um UI einzuschleusen, und umschließen Sie Komponenten mit Higher-Order Components, um Verhalten einzuschleusen, ohne das Original zu verändern. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Render Props und HOC-Muster“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Zusammengesetzte Komponenten mit Context
- Render Props und HOC-Muster
- Portals für Modals und Tooltips
- Error Boundaries