React Academy · leksjon

Higher-Order Components (HOC-er) forklart

Pakk inn komponenter for å injisere props, beskytte ruter eller legge til logging via HOC-fabrikker.

Leksjon 2 av 413 trinn

Higher-Order Components (HOC-er) forklart er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen lærer du hva higher-order components (HOCs) er, hvordan du skriver dem, vanlige bruksområder og hvilke avveininger de innebærer sammenlignet med hooks.

Hva er en HOC?

En Higher-Order Component er en funksjon som tar imot en komponent og returnerer en ny, utvidet komponent. HOC-en legger til atferd (for eksempel props, autentiseringskontroller eller logging) uten å endre den opprinnelige komponenten.

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

HOC for autentiseringskontroll

En vanlig HOC omdirigerer uautentiserte brukere til en innloggingsside. Den opprinnelige komponenten trenger ikke å kjenne til autentiseringslogikken.

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

const ProtectedPage = withAuth(DashboardPage);

HOC for logging

En HOC kan logge hver rendering sammen med komponentens navn og props for feilsøking. Pakk inn en hvilken som helst komponent med withLogger for å legge til sporing.

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

Videreføre props

Spred alltid alle mottatte props videre til den innpakkede komponenten med `{...props}`. Hvis du ikke gjør dette, bryter du API-et til den opprinnelige komponenten.

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

Angi displayName

Komponenter som returneres av en HOC, mister navnet sitt i React DevTools. Angi et meningsfullt displayName slik at du kan identifisere dem i komponenttreet.

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

Videreføre refs

HOCs blokkerer refs som standard. Bruk `React.forwardRef` inne i HOC-en for å videreføre refs til den innpakkede komponenten.

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

HOC kontra render props kontra hooks

HOCs setter inn props og kan beskytte ruter. Render props sender dynamisk brukergrensesnitt. Egendefinerte hooks trekker ut logikk. I moderne React foretrekkes hooks fordi de unngår wrapper hell og er enklere å kombinere. HOCs er nyttige for klassekomponenter eller integrasjoner med tredjepartsbiblioteker.

Wrapper hell

Når du bruker mange HOCs, oppstår det dyp nøsting i komponenttreet: `withTheme(withAuth(withLogger(MyPage)))`. DevTools viser mange anonyme wrapper-lag. Hooks unngår dette helt.

HOCs i praksis

Redux sin `connect()`, React Router v5 sin `withRouter()` og MobX sin `observer()` er alle HOCs. Når du forstår HOCs, blir det enklere å arbeide med disse eldre API-ene fra biblioteker.

Kort kontrollspørsmål

Hva må en higher-order component alltid gjøre med propsene den mottar?

Besvar den i den interaktive leksjonen

Oppsummering

HOCs er funksjoner som tar imot en komponent og returnerer en utvidet komponent. De setter inn props, beskytter ruter og legger til logging. Spre alltid props videre, angi displayName og viderefør refs. Foretrekk hooks i moderne React.

Neste leksjon

Neste leksjon: **HOC kontra render props kontra egendefinerte hooks** — du skal sammenligne de tre strategiene for kodedeling når det gjelder lesbarhet, testing og kombinerbarhet.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Higher-Order Components (HOC-er) forklart» gratis?

Ja – hele teksten i «Higher-Order Components (HOC-er) forklart» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Higher-Order Components (HOC-er) forklart»?

Pakk inn komponenter for å injisere props, beskytte ruter eller legge til logging via HOC-fabrikker. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Higher-Order Components (HOC-er) forklart»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Mønsteret Render Props
Higher-Order Components (HOC-er) forklart
HOC-er kontra Render Props kontra egendefinerte hooks
Refaktorere en HOC til en egendefinert hook

← Tilbake til React Academy