Lifting State Up: come i componenti figlio di React comunicano con i genitori

React utilizza un flusso di dati unidirezionale da genitore a figlio, mai da figlio a genitore. Ma cosa succede quando un bambino ha bisogno di comunicare con il suo genitore?

Scopri come revocare lo stato per consentire a un componente figlio di inviare dati a un componente padre.

Componenti in React

React organizza i componenti in una gerarchia in cui i componenti figlio si annidano all'interno dei componenti genitore. Questa gerarchia costituisce gli elementi costitutivi dell'interfaccia utente dell'applicazione.

</ParentComponent>

Ogni componente figlio riceve dati, noti come oggetti di scena, dal suo componente genitore. Gli oggetti di scena di React possono contenere vari tipi di dati come array, oggetti, stringhe o persino funzioni. Il componente figlio non può manipolare direttamente questi dati.

Considera il seguente componente, chiamato Contropulsante:

const CounterButton = 





instagram viewer

() => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
return (
Increment</button>
 )
}

Il componente mantiene un valore di stato denominato contare che aumenta ogni volta che un utente fa clic sul pulsante.

Supponiamo di aver nidificato il componente CounterButton all'interno di un altro componente denominato Home:

const Home = () => {
return (

 )
}

Se si desidera visualizzare il valore del conteggio da Contropulsante componente all'interno del componente Home, incontrerai una sfida.

Come accennato, React impone un flusso di dati unidirezionale da genitore a figlio. Pertanto, il componente CounterButton non può condividere direttamente il valore dello stato di conteggio con il componente Home.

Per aggirare questo problema è necessario risollevare lo Stato.

Come aumentare lo stato per condividere i dati tra i componenti

Lo stato di sollevamento si riferisce allo spostamento dello stato di un componente più in alto nell'albero dei componenti, su un componente principale. Una volta sollevato lo stato, puoi trasmetterlo ai componenti figlio come valori prop.

Nel controesempio di prima, dovresti spostare lo stato del conteggio e il file handleIncrement funzione al componente Home. Dovresti quindi passare la funzione handleIncrement al componente CounterButton come prop.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (

{count}</p>
 )
}

Successivamente, è necessario modificare il componente CounterButton per accettare la funzione handleIncrement e chiamarla quando un utente fa clic sul pulsante.

const CounterButton = ({handleIncrement}) => {
return (
Increment</button>
 )
}

La revoca dello Stato centralizza i dati e ne trasferisce la responsabilità gestire lo Stato dal bambino al genitore.

Oltre ad aiutarti a visualizzare i dati nel componente principale, la rimozione dello stato può aiutarti a sincronizzare i dati tra più componenti.

Supponiamo di avere un componente Intestazione e Piè di pagina nidificato all'interno del componente principale e ciascuno di questi componenti visualizza anche il conteggio condiviso. Per condividere questo valore, puoi passarlo a questi componenti come oggetti di scena.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (



 )
}

Tuttavia, è necessario fare attenzione a sollevare lo stato per non finire in una situazione nota come perforazione dell'elica.

La sfida della perforazione dell'elica

Man mano che la tua applicazione cresce, potresti scoprire che più componenti più in profondità nell'albero dei componenti necessitano di accedere a uno stato condiviso. Per rendere questo stato condiviso disponibile ai componenti nidificati, dovresti passare gli oggetti di scena attraverso componenti intermedi. Questo processo può portare alla perforazione del puntello.

La perforazione dell'elica rende difficile tenere traccia del flusso dei dati e può portare a un codice difficile da mantenere.

Per mitigare la perforazione dell'elica ma condividere comunque i dati tra i componenti, prendi in considerazione l'utilizzo del contesto React. Il contesto React ti consente di centralizzare lo stato in modo che sia disponibile nell'intera applicazione.

Condivisione dei dati in React utilizzando oggetti di scena

Quando è necessario condividere i dati da un componente figlio con il suo componente genitore, elevare lo stato al componente genitore, quindi passare la funzione che aggiorna lo stato al componente figlio come oggetti di scena.

Nei casi in cui il componente figlio è profondamente annidato nell'albero dei componenti, utilizzare uno strumento di gestione dello stato come React Context o uno strumento di terze parti come React Redux per impedire il drill drill.