0Pricing
React Academy · Lezione

Sollevare lo state: principi ed esempi

Spostare lo state condiviso nell'antenato comune più vicino e passarlo tramite props.

Sollevare lo state: principi ed esempi è 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 imparerà il pattern di sollevamento dello stato: spostare lo stato condiviso nell'antenato comune più vicino, così i componenti fratelli possono rimanere sincronizzati.

Il problema: componenti fratelli non sincronizzati

Quando due componenti fratelli hanno bisogno degli stessi dati, mantenere uno stato separato in ciascuno può causare bug di sincronizzazione. La soluzione consiste nello spostare lo stato nel loro componente padre comune.

Individuare l'antenato comune

Individui il componente più vicino che sia il genitore di **entrambi** i componenti che necessitano dei dati condivisi. Sposti lì lo stato e lo passi ai componenti figli come prop.
function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

Esempio di sollevamento di un contatore

Supponga che due componenti mostrino lo stesso contatore. Invece di gestire count in ciascuno di essi, lo sollevi nel componente padre. Entrambi ricevono count come prop e chiamano un callback onChange per aggiornarlo.
function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

Prop callback per gli aggiornamenti

I children non possono modificare direttamente lo stato del componente padre. Il componente padre passa un callback, come `onChange`, tramite una prop. I children chiamano il callback quando vogliono richiedere una modifica dello stato.

Controllato e non controllato dopo il sollevamento

Dopo il sollevamento, il child che prima possedeva lo stato diventa un **componente controllato**: riceve il valore corrente e onChange dal componente padre. Il componente padre è l'unica fonte di verità.

Sollevamento su più livelli

A volte è necessario sollevare lo stato di diversi livelli nell'albero. Se lo stato deve essere sollevato oltre molti componenti intermedi, valuti l'uso di Context per evitare di passare le prop attraverso ogni livello.

Vantaggi del sollevamento dello stato

Il sollevamento dello stato offre un'unica fonte di verità, rende prevedibile il flusso dei dati, sempre dall'alto verso il basso, semplifica il debugging e facilita l'aggiunta di altri consumer dello stesso stato in futuro.

Stato derivato dallo stato sollevato

Calcoli i valori derivati dallo stato sollevato all'interno del componente padre e li passi come prop aggiuntive. Non duplichi mai lo stato: lo derivi.
const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

Quando il sollevamento diventa eccessivo

Se si ritrova a sollevare lo stato attraverso più di quattro livelli, la struttura dell'albero dei componenti potrebbe essere errata oppure potrebbe essere il momento di usare Context o una libreria per la gestione dello stato.

Verifica rapida

Qual è l'approccio corretto quando due componenti fratelli devono condividere la stessa porzione di stato?

Riepilogo

Sollevei lo stato nell'antenato comune più vicino quando i componenti fratelli devono condividerlo. Passi il valore corrente verso il basso e i callback per le modifiche verso l'alto. Derivi i valori invece di duplicare lo stato.

Prossima lezione

Prossima lezione: **Prop drilling: quando è problematico e quando va bene** — imparerà a identificare le catene di prop drilling problematiche e a decidere quando è necessaria una soluzione.

Domande Frequenti

La lezione «Sollevare lo state: principi ed esempi» è gratuita?

Sì — il testo completo di «Sollevare lo state: principi ed esempi» è 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 «Sollevare lo state: principi ed esempi»?

Spostare lo state condiviso nell'antenato comune più vicino e passarlo tramite props. 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 «Sollevare lo state: principi ed esempi»?

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

  1. Sollevare lo state: principi ed esempi
  2. Prop drilling: quando è problematico e quando va bene
  3. Pattern di comunicazione tra componenti fratelli
  4. Scegliere la posizione corretta dello state
← Torna a React Academy