React Academy · Lezione

Higher-Order Component (HOC): spiegazione

Racchiuda i componenti per iniettare props, proteggere le route o aggiungere logging tramite factory di HOC.

Higher-Order Component (HOC): spiegazione è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione comprenderà i componenti higher-order (HOC), imparerà a crearli, ne esaminerà i casi d'uso più comuni e ne valuterà i compromessi rispetto agli hook.

Che cos'è un HOC?

Un componente higher-order è una funzione che riceve un componente come input e restituisce un nuovo componente potenziato. L'HOC aggiunge comportamento (come prop, controlli di autenticazione o logging) senza modificare il componente originale.

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

HOC per la protezione dell'autenticazione

Un HOC comune reindirizza gli utenti non autenticati a una pagina di accesso. Il componente originale non deve conoscere la logica di autenticazione.

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

const ProtectedPage = withAuth(DashboardPage);

HOC per il logging

Un HOC può registrare ogni rendering insieme al nome e alle prop del componente per facilitare il debug. Avvolga qualsiasi componente con withLogger per aggiungere il tracing.

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

Passare le prop al componente

Passi sempre tutte le prop ricevute al componente avvolto con `{...props}`. In caso contrario, l'API del componente originale smetterà di funzionare correttamente.

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

Impostare displayName

I componenti restituiti dagli HOC perdono il proprio nome in React DevTools. Imposti un displayName significativo per poterli identificare nell'albero dei componenti.

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

Inoltrare le ref

Per impostazione predefinita, gli HOC bloccano le ref. Usi `React.forwardRef` all'interno dell'HOC per passare le ref al componente avvolto.

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

HOC, render prop e hook

Gli HOC iniettano prop e possono proteggere le route. Le render prop passano un'interfaccia dinamica. Gli hook personalizzati estraggono la logica. In React moderno si preferiscono gli hook, perché evitano il wrapper hell e sono più facili da comporre. Gli HOC sono utili per i componenti basati su classi o per le integrazioni di terze parti.

Wrapper hell

Applicare molti HOC crea un annidamento profondo nell'albero dei componenti: `withTheme(withAuth(withLogger(MyPage)))`. DevTools mostra molti livelli di wrapper anonimi. Gli hook evitano completamente questo problema.

Gli HOC nella pratica

`connect()` di Redux, `withRouter()` di React Router v5 e `observer()` di MobX sono tutti HOC. Comprendere gli HOC aiuta a lavorare con le API meno recenti di queste librerie.

Verifica rapida

Che cosa deve fare sempre un componente higher-order con le prop che riceve?

Riepilogo

Gli HOC sono funzioni che ricevono un componente e ne restituiscono uno potenziato. Iniettano prop, proteggono le route e aggiungono logging. Passi sempre le prop, imposti displayName e inoltri le ref. In React moderno sono preferibili gli hook.

Prossima lezione

Prossima lezione: **HOC, render prop e hook personalizzati** — confronterà le tre strategie di condivisione del codice in termini di leggibilità, test e composizione.

Domande Frequenti

La lezione «Higher-Order Component (HOC): spiegazione» è gratuita?

Sì — il testo completo di «Higher-Order Component (HOC): spiegazione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Higher-Order Component (HOC): spiegazione»?

Racchiuda i componenti per iniettare props, proteggere le route o aggiungere logging tramite factory di HOC. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Higher-Order Component (HOC): spiegazione»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Pattern Render Props
Higher-Order Component (HOC): spiegazione
HOC, Render Props e Custom Hook a confronto
Refactoring di un HOC in un Custom Hook

← Torna a React Academy