React Academy · Lezione

Pattern Render Props

Passi una funzione come prop che restituisce JSX per condividere il comportamento senza accoppiare l'interfaccia.

Pattern Render Props è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 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à il pattern delle render prop — il passaggio di una funzione come prop che restituisce JSX — e imparerà quando è utile per condividere il comportamento tra componenti.

Che cosa sono le render prop?

Le render prop sono un pattern in cui un componente accetta una prop che è una funzione. Il componente chiama questa funzione per produrre il proprio output renderizzato. Il consumer controlla l'interfaccia, mentre il componente fornisce il comportamento.

<DataProvider render={data => <UserCard user={data} />} />

Esempio semplice di render prop

Un componente Toggle gestisce lo stato aperto/chiuso e chiama una render prop passando lo stato corrente e una funzione di toggle. Il consumer decide come eseguire il rendering.

function Toggle({ render }) {
  const [on, setOn] = useState(false);
  return render(on, () => setOn(!on));
}

<Toggle render={(on, toggle) => (
  <button onClick={toggle}>{on ? 'Close' : 'Open'}</button>
)} />

Usare children come render prop

Invece di una render prop con un nome specifico, è possibile usare `children` come funzione. Molte librerie (React Router v5, Formik) usano questo pattern, talvolta chiamato "children as a function".

<Toggle>
  {(on, toggle) => (
    <div>
      {on && <Panel />}
      <button onClick={toggle}>Toggle</button>
    </div>
  )}
</Toggle>

Tracciamento della posizione del mouse

Un esempio classico di render props: un componente MouseTracker rileva la posizione del cursore e la passa a una render prop. Ogni consumer può visualizzare la posizione nel modo che preferisce.

function MouseTracker({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
      {children(pos)}
    </div>
  );
}

Render prop e hook personalizzati

Le render prop erano il pattern di riferimento prima degli hook. Oggi gli hook personalizzati svolgono la stessa funzione in modo più pulito: l'hook restituisce dati e funzioni, mentre il componente li usa nel proprio JSX. In React moderno si preferiscono gli hook.

// Old: render props
<Mouse render={pos => <p>{pos.x}</p>} />

// Modern: custom hook
const pos = useMouse();
<p>{pos.x}</p>

Quando le render prop sono ancora utili

Le render prop sono ancora utili quando: (1) è necessario inserire un rendering dinamico in una posizione specifica dell'albero, (2) si sta creando una libreria di componenti headless che separa la logica dall'interfaccia.

Avviso sulle prestazioni

Definire una render prop inline crea una nuova funzione a ogni rendering del componente padre, impedendo ai componenti figli PureComponent/React.memo di interrompere il rendering. Estragga le funzioni delle render prop in una variabile o in un metodo stabile.

// Avoid: new function every render
<Toggle render={pos => <Dot pos={pos} />} />

// Better: stable reference
const renderDot = pos => <Dot pos={pos} />;
<Toggle render={renderDot} />

Comporre le render prop

Annidare rapidamente più componenti basati su render prop crea il cosiddetto "render prop hell" o "wrapper hell": callback profondamente annidate e difficili da leggere. Questo è uno dei motivi per cui sono stati introdotti gli hook.

Le render prop nelle librerie

React Router v5 usava le render prop per Route. Anche Downshift, Formik e React-Table usano delle varianti di questo pattern. Comprendere le render prop aiuta a leggere ed eseguire il debug del codice che utilizza queste librerie.

Verifica rapida

Qual è il principale vantaggio del pattern delle render prop rispetto al passaggio di JSX statico?

Riepilogo

Le render prop passano una funzione che restituisce JSX. Il componente fornisce il comportamento, mentre il consumer fornisce l'interfaccia. In React moderno è preferibile usare gli hook personalizzati, ma è importante comprendere le render prop per leggere il codice esistente e creare componenti headless.

Prossima lezione

Prossima lezione: **Componenti higher-order (HOC): spiegazione** — avvolgerà i componenti per iniettare prop, proteggere route o aggiungere logging.

Domande Frequenti

La lezione «Pattern Render Props» è gratuita?

Sì — il testo completo di «Pattern Render Props» è 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 «Pattern Render Props»?

Passi una funzione come prop che restituisce JSX per condividere il comportamento senza accoppiare l'interfaccia. 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 1 di 4.

Quanto tempo richiede la lezione «Pattern Render Props»?

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