React Academy · Lektion

Higher-Order Components (HOCs) erklärt

Umschließen Sie Components, um Props einzuschleusen, Routes zu schützen oder über HOC-Factories Logging hinzuzufügen.

Higher-Order Components (HOCs) erklärt ist eine kostenlose React 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 React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion lernen Sie Higher-Order Components (HOCs) kennen, erfahren, wie man sie schreibt und wofür sie häufig eingesetzt werden, und vergleichen ihre Vor- und Nachteile mit Hooks.

Was ist ein HOC?

Eine Higher-Order Component ist eine Funktion, die eine Komponente als Eingabe erhält und eine neue, erweiterte Komponente zurückgibt. Der HOC fügt Verhalten hinzu (etwa Props, Authentifizierungsprüfungen oder Logging), ohne die ursprüngliche Komponente zu verändern.

// HOC signature
function withEnhancement(WrappedComponent) {
  return function Enhanced(props) {
    // add behaviour here
    return <WrappedComponent {...props} extraProp="value" />;
  };
}

HOC zur Authentifizierungsprüfung

Ein häufig verwendeter HOC leitet nicht authentifizierte Benutzer auf eine Login-Seite weiter. Die ursprüngliche Komponente muss die Authentifizierungslogik nicht kennen.

function withAuth(Component) {
  return function AuthGuard(props) {
    const isLoggedIn = useAuth();
    if (!isLoggedIn) return <Navigate to="/login" />;
    return <Component {...props} />;
  };
}

const ProtectedPage = withAuth(DashboardPage);

Logging-HOC

Ein HOC kann jeden Render-Vorgang zusammen mit dem Namen und den Props der Komponente zu Debugging-Zwecken protokollieren. Umschließen Sie eine beliebige Komponente mit withLogger, um Tracing hinzuzufügen.

function withLogger(Component) {
  return function Logged(props) {
    console.log('[render]', Component.displayName, props);
    return <Component {...props} />;
  };
}

Props weiterreichen

Reichen Sie immer alle empfangenen Props mit `{...props}` an die umschlossene Komponente weiter. Wenn Sie dies versäumen, wird die API der ursprünglichen Komponente beschädigt.

return function HOC(props) {
  return <WrappedComponent {...props} injectedProp={value} />;
};

displayName festlegen

Von HOCs zurückgegebene Komponenten verlieren in den React DevTools ihren Namen. Legen Sie einen aussagekräftigen displayName fest, damit Sie sie im Komponentenbaum identifizieren können.

function withAuth(Component) {
  function AuthGuard(props) { /* ... */ }
  AuthGuard.displayName = 'withAuth(' + (Component.displayName || Component.name) + ')';
  return AuthGuard;
}

Refs weiterleiten

HOCs blockieren Refs standardmäßig. Verwenden Sie `React.forwardRef` innerhalb des HOCs, um Refs an die umschlossene Komponente weiterzuleiten.

function withStyle(Component) {
  return React.forwardRef(function (props, ref) {
    return <Component ref={ref} {...props} className="styled" />;
  });
}

HOC, Render Props oder Hooks

HOCs schleusen Props ein und können Routes schützen. Render Props übergeben dynamische UI. Custom Hooks lagern Logik aus. In modernem React werden Hooks bevorzugt, weil sie die Wrapper-Hölle vermeiden und sich leichter kombinieren lassen. HOCs sind für Klassenkomponenten oder Integrationen von Drittanbietern nützlich.

Wrapper-Hölle

Das Anwenden vieler HOCs führt zu einer tiefen Verschachtelung im Komponentenbaum: `withTheme(withAuth(withLogger(MyPage)))`. Die DevTools zeigen viele anonyme Wrapper-Ebenen. Hooks vermeiden dies vollständig.

HOCs in der Praxis

`connect()` von Redux, `withRouter()` von React Router v5 und `observer()` von MobX sind allesamt HOCs. Wenn Sie HOCs verstehen, können Sie mit den älteren APIs dieser Bibliotheken arbeiten.

Kurzer Test

Was muss eine Higher-Order Component immer mit den Props tun, die sie erhält?

Zusammenfassung

HOCs sind Funktionen, die eine Komponente entgegennehmen und eine erweiterte Komponente zurückgeben. Sie schleusen Props ein, schützen Routes und fügen Logging hinzu. Reichen Sie Props immer weiter, legen Sie displayName fest und leiten Sie Refs weiter. Bevorzugen Sie in modernem React Hooks.

Als Nächstes

Nächste Lektion: **HOC, Render Props oder Custom Hooks** – Sie vergleichen die drei Strategien zur gemeinsamen Nutzung von Code hinsichtlich Lesbarkeit, Testbarkeit und Komposition.

Häufig gestellte Fragen

Ist die Lektion „Higher-Order Components (HOCs) erklärt“ kostenlos?

Ja — der vollständige Text von „Higher-Order Components (HOCs) erklärt“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Higher-Order Components (HOCs) erklärt“?

Umschließen Sie Components, um Props einzuschleusen, Routes zu schützen oder über HOC-Factories Logging hinzuzufügen. Du übst React 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 React Academy zu starten?

Keine Vorkenntnisse erforderlich. React 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 „Higher-Order Components (HOCs) erklärt“?

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 React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React 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

← Zurück zu React Academy