React Academy · Lezione

Ispezione degli alberi dei componenti e delle props

Esplorare le gerarchie dei componenti e leggere i valori aggiornati di props e state.

Ispezione degli alberi dei componenti e delle props è 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.

Benvenuti

In questa lezione imparerà ad analizzare in profondità le gerarchie di componenti nidificate in React DevTools e a leggere valori complessi di props e stato nella barra laterale del pannello Components.

L'albero dei componenti è uno specchio

Ogni componente visualizzato in DevTools rispecchia la nidificazione del JSX. La radice è solitamente il componente App. I componenti figli sono rientrati sotto i rispettivi genitori, esattamente come appaiono nel codice sorgente.

Selezione di un componente

Faccia clic su qualsiasi nome di componente nell'albero. Il pannello a destra mostra immediatamente le sue **props**, gli **hook** (stato, effetti, ref) e il file **source** e il numero di riga in cui è stato definito.

Lettura delle props stringa e numeriche

Le props stringa appaiono tra virgolette: `"hello"`. I numeri appaiono senza virgolette: `42`. I valori booleani mostrano `true` o `false`. Può passare il mouse su un valore per visualizzarne il contenuto completo se è troncato.

Espansione delle props oggetto e array

Quando il valore di una prop è un oggetto o un array, DevTools mostra un albero comprimibile. Faccia clic sulla freccia accanto a `{…}` o `[…]` per espanderlo e visualizzare ogni chiave e valore nidificato.

Ispezione delle props funzione

Le props funzione (come i gestori `onClick`) appaiono come `f onClick()`. Può fare clic sulla piccola icona a forma di freccia accanto a esse per passare alla definizione della funzione nel pannello Sources.

Filtraggio dell'albero

Utilizzi la casella di ricerca nella parte superiore del pannello Components per filtrare in base al nome. Digiti `Button` per visualizzare solo i componenti il cui nome contiene *Button*. È utile nelle app con centinaia di componenti.

Dal DOM a React

Nella scheda **Elements**, faccia clic con il pulsante destro del mouse su un nodo DOM e scelga **Inspect React component** (disponibile dopo l'installazione di DevTools). DevTools passa alla scheda Components e seleziona il componente React che ha eseguito il rendering di quel nodo.

Modifica delle props in DevTools

Faccia doppio clic sul valore di una prop in DevTools per modificarlo in tempo reale. Il componente esegue immediatamente un nuovo rendering con il nuovo valore. È utile per testare casi limite senza modificare il codice sorgente.

Copia delle props come JSON

Faccia clic con il pulsante destro del mouse su qualsiasi valore di prop o stato in DevTools e scelga **Copy value**. Il valore viene copiato come JSON negli appunti, così può incollarlo facilmente nei test o nella documentazione.

Verifica rapida

Come si espande una prop oggetto o array nel pannello Components di React DevTools?

Riepilogo

Ora può navigare negli alberi dei componenti, leggere stringhe, numeri, oggetti e funzioni, filtrare in base al nome, passare dagli elementi DOM ai componenti React e modificare le props in tempo reale in DevTools.

Prossima lezione

Prossima lezione: **Uso della scheda Profiler** — registrerà i rendering, leggerà i flame graph e individuerà i componenti responsabili delle interazioni lente.

Domande Frequenti

La lezione «Ispezione degli alberi dei componenti e delle props» è gratuita?

Sì — il testo completo di «Ispezione degli alberi dei componenti e delle 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 «Ispezione degli alberi dei componenti e delle props»?

Esplorare le gerarchie dei componenti e leggere i valori aggiornati di props e state. 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 «Ispezione degli alberi dei componenti e delle 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

Installazione e apertura di React DevTools
Ispezione degli alberi dei componenti e delle props
Uso della scheda Profiler
Debug degli errori comuni di React

← Torna a React Academy