Stato di React vs oggetti di scena

P rops

Oggetti di scena noti anche come proprietà. Props è ciò che ci consente di trasferire i valori nei componenti e tra i componenti. Gli oggetti di scena vengono trasmessi dal componente principale. Per passare gli oggetti di scena a un componente, lo si aggiunge nella funzione di rendering come attributo.

Un'altra nota importante è che il valore degli oggetti di scena viene passato attraverso JSX tra parentesi graffe {}. Gli oggetti di scena possono essere qualsiasi valore come oggetti, array, stringhe, funzioni, ecc. Una delle cose belle degli oggetti di scena è che consentono ai nostri componenti di reazione di essere dinamici e riutilizzabili. Altrimenti, saremmo bloccati con dati hardcoded e questo vanifica tutti i vantaggi di React. La limitazione con gli oggetti di scena è che, affinché gli oggetti di scena cambino, il componente genitore deve inviargli nuovi oggetti di scena.

Ecco un esempio di come vengono tramandati gli oggetti di scena.

Nell'esempio precedente, il componente padre è MainComponent e deve passare i dati al componente figlio che è ListForm. Al componente figlio è stato assegnato un puntello di token.

S tate

Innanzitutto, lo stato è un semplice oggetto JavaScript. Lo stato sono i dati nel tuo componente che sono stati modificati. Lo stato di un componente può cambiare durante la vita dei componenti. Lo stato viene creato e gestito internamente, all'interno di un componente. Lo stato viene utilizzato quando si prevede che alcuni valori cambieranno, ad esempio facendo clic su un pulsante simile, immettendo informazioni in un modulo, ecc. Lo stato viene inizialmente impostato nel costruttore di base.

Ecco un esempio di come impostiamo lo stato.

Ricorda, lo stato cambia quando un utente attiva un evento nel browser. Affinché lo stato effettui aggiornamenti, viene utilizzato setState (). Lo stato non dovrebbe essere modificato direttamente ma piuttosto con setState ().

Vedi l'esempio sotto.

Lo stato detiene i dati iniziali. Quando è necessario aggiornare lo stato, React esegue immediatamente il rendering del DOM specifico per tale modifica. Il metodo setState () è ciò che attiva il ri-rendering del DOM.

Lo stato era disponibile solo nei componenti di classe e non nei componenti funzionali. I componenti funzionali sono noti per essere componenti stateless, tuttavia, poiché React ha introdotto gli hook, è possibile incorporare lo stato.

In sintesi:

Gli oggetti di scena sono esterni al componente e vengono trasmessi dal componente padre. Un componente figlio non può cambiare direttamente gli oggetti di scena.

Lo stato è interno a un componente e aggiornato dall'utente attivando un evento nel browser. Lo stato viene aggiornato tramite un metodo chiamato setState (). Non è possibile accedere allo stato al di fuori del componente, è privato del componente.

Props viene utilizzato per trasmettere i dati e lo stato viene utilizzato per la gestione dei dati.

Si spera che questo articolo abbia aiutato a chiarire la differenza fondamentale tra lo stato di React e gli oggetti di scena.

Buona programmazione ...