React Academy · Lektion

Higher-Order Components (HOCs) förklarade

Omslut komponenter för att injicera props, skydda routes eller lägga till loggning via HOC-fabriker.

Lektion 2 av 413 steg

Higher-Order Components (HOCs) förklarade är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen lär du dig förstå higher-order components (HOC:er), hur du skriver dem, vanliga användningsområden och deras avvägningar jämfört med hooks.

Vad är en HOC?

En higher-order component är en funktion som tar emot en komponent som indata och returnerar en ny, utökad komponent. HOC:en lägger till beteende, till exempel props, autentiseringskontroller eller loggning, utan att ändra den ursprungliga komponenten.

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

HOC för autentiseringsskydd

En vanlig HOC omdirigerar oautentiserade användare till en inloggningssida. Den ursprungliga komponenten behöver aldrig känna till autentiseringslogiken.

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

const ProtectedPage = withAuth(DashboardPage);

HOC för loggning

En HOC kan logga varje rendering tillsammans med komponentens namn och props för felsökning. Wrappa valfri komponent med withLogger för att lägga till spårning.

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

Skicka vidare props

Sprid alltid ut alla mottagna props på den wrappade komponenten med `{...props}`. Om du inte gör det förstörs den ursprungliga komponentens API.

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

Ange displayName

Komponenter som returneras av HOC:er förlorar sitt namn i React DevTools. Ange ett meningsfullt displayName så att du kan identifiera dem i komponentträdet.

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

Vidarebefordra refs

HOC:er blockerar refs som standard. Använd `React.forwardRef` inuti HOC:en för att skicka refs vidare till den wrappade komponenten.

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

HOC jämfört med render props och hooks

HOC:er injicerar props och kan skydda routes. Render props skickar ett dynamiskt användargränssnitt. Anpassade hooks extraherar logik. I modern React föredras hooks eftersom de undviker wrapper-kaos och är lättare att kombinera. HOC:er är användbara för klasskomponenter eller integrationer med tredjepartsbibliotek.

Wrapper-kaos

Om du använder många HOC:er skapas en djup nästling i komponentträdet: `withTheme(withAuth(withLogger(MyPage)))`. DevTools visar många anonyma wrapper-lager. Hooks undviker detta helt.

HOC:er i praktiken

Reduxs `connect()`, React Router v5:s `withRouter()` och MobX:s `observer()` är alla HOC:er. Om du förstår HOC:er blir det lättare att arbeta med dessa äldre biblioteks-API:er.

Snabbkontroll

Vad måste en higher-order component alltid göra med de props den tar emot?

Besvara frågan i den interaktiva lektionen

Sammanfattning

HOC:er är funktioner som tar emot en komponent och returnerar en utökad komponent. De injicerar props, skyddar routes och lägger till loggning. Sprid alltid ut props, ange displayName och vidarebefordra refs. Föredra hooks i modern React.

Nästa steg

Nästa lektion: **HOC vs Render Props vs Custom Hooks** – du kommer att jämföra de tre strategierna för koddelning utifrån läsbarhet, testning och komponerbarhet.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Higher-Order Components (HOCs) förklarade” gratis?

Ja – hela texten till ”Higher-Order Components (HOCs) förklarade” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Higher-Order Components (HOCs) förklarade”?

Omslut komponenter för att injicera props, skydda routes eller lägga till loggning via HOC-fabriker. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Higher-Order Components (HOCs) förklarade”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Mönstret render props
Higher-Order Components (HOCs) förklarade
HOC jämfört med render props och custom hooks
Refaktorera en HOC till en custom hook

← Tillbaka till React Academy