React Academy · Lektion

Higher-Order Components (HOCs) forklaret

Pak komponenter ind for at tilføje props, beskytte routes eller tilføje logning via HOC-fabrikker.

Lektion 2 af 413 trin

Higher-Order Components (HOCs) forklaret er en gratis React Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion lærer du komponenter af højere orden (HOC'er) at kende, hvordan du skriver dem, almindelige anvendelser og deres kompromiser sammenlignet med hooks.

Hvad er en HOC

En komponent af højere orden er en funktion, der tager en komponent som argument og returnerer en ny, udvidet komponent. HOC'en tilføjer adfærd (f.eks. props, godkendelseskontroller eller logning) uden at ændre den oprindelige komponent.

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

HOC til adgangskontrol

En almindelig HOC viderestiller brugere, der ikke er godkendt, til en loginside. Den oprindelige komponent behøver aldrig kende godkendelseslogikken.

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

const ProtectedPage = withAuth(DashboardPage);

HOC til logning

En HOC kan logge hver rendering med komponentens navn og props til brug ved fejlretning. Pak en komponent ind med withLogger for at tilføje sporing.

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

Videregivelse af props

Spred altid alle modtagne props over på den indpakkede komponent med `{...props}`. Hvis du ikke gør det, går den oprindelige komponents API i stykker.

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

Indstilling af displayName

Komponenter, der returneres af en HOC, mister deres navn i React DevTools. Angiv et meningsfuldt displayName, så du kan identificere dem i komponenttræet.

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

Videresendelse af refs

HOC'er blokerer som standard refs. Brug `React.forwardRef` inde i HOC'en for at videresende refs til den indpakkede komponent.

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

HOC kontra Render Props kontra hooks

HOC'er indsætter props og kan beskytte ruter. Render props sender en dynamisk brugerflade. Brugerdefinerede hooks udtrækker logik. I moderne React foretrækkes hooks, fordi de undgår wrapper-helvede og er lettere at sammensætte. HOC'er er nyttige til klassekomponenter eller integrationer med tredjepart.

Wrapper-helvede

Når du anvender mange HOC'er, opstår der dyb indlejring i komponenttræet: `withTheme(withAuth(withLogger(MyPage)))`. DevTools viser mange anonyme wrapper-lag. Hooks undgår dette helt.

HOC'er i praksis

Redux' `connect()`, React Router v5's `withRouter()` og MobX' `observer()` er alle HOC'er. Hvis du forstår HOC'er, bliver det lettere at arbejde med disse ældre biblioteks-API'er.

Hurtigt tjek

Hvad skal en komponent af højere orden altid gøre med de props, den modtager?

Besvar den i den interaktive lektion

Opsummering

HOC'er er funktioner, der tager en komponent og returnerer en udvidet komponent. De indsætter props, beskytter ruter og tilføjer logning. Spred altid props, angiv displayName, og videresend refs. Foretræk hooks i moderne React.

Næste trin

Næste lektion: **HOC kontra Render Props kontra brugerdefinerede hooks** — du sammenligner de tre strategier til deling af kode med hensyn til læsbarhed, testning og sammensætning.

Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 88
Lektioner: 324

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Higher-Order Components (HOCs) forklaret” gratis?

Ja — hele teksten til “Higher-Order Components (HOCs) forklaret” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Higher-Order Components (HOCs) forklaret”?

Pak komponenter ind for at tilføje props, beskytte routes eller tilføje logning via HOC-fabrikker. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Higher-Order Components (HOCs) forklaret”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Mønsteret Render Props
Higher-Order Components (HOCs) forklaret
HOC vs. Render Props vs. Custom Hooks
Refaktorering af en HOC til en Custom Hook

← Tilbage til React Academy