Componenti React - Puntelli e stati in ReactJS con esempi

'In React, tutto è un componente'

Se hai familiarità con React, devi aver sentito o letto questa frase molte volte. Ma sai cosa significa esattamente e come viene utilizzato? Se non lo fai, leggi questo blog per imparare tutto sui componenti React e le diverse fasi del ciclo di vita. Sono sicuro che quando finirai leggendo questo blog avrai una comprensione completa dei componenti di React e dei concetti che li circondano. Ma prima di procedere, dai una rapida occhiata agli argomenti di cui parlerò:

• Cosa sono i componenti React?
• Vantaggi dei componenti React
• Puntelli
• stati
• States vs Props
• React Component Lifecycle

Cosa sono i componenti React?

In precedenza gli sviluppatori dovevano scrivere 1000 righe di codice per sviluppare una semplice applicazione a pagina singola. La maggior parte di queste applicazioni seguiva la struttura DOM tradizionale e apportare modifiche ad esse era molto impegnativo e un compito noioso per gli sviluppatori.Dovevano cercare manualmente l'elemento che necessitava della modifica e aggiornarlo di conseguenza. Anche un piccolo errore porterebbe al fallimento dell'applicazione. Inoltre, l'aggiornamento del DOM era molto costoso. Pertanto, è stato introdotto l'approccio basato sui componenti. In questo approccio, l'intera applicazione è suddivisa in blocchi logici chiamati Componenti. React è stato uno dei framework che ha optato per questo approccio.Se hai intenzione di costruire la tua carriera nello sviluppo web, un inizio precoce aprirà molte opportunità per te.

Vediamo ora cosa sono questi componenti.

I componenti React sono considerati gli elementi costitutivi dell'interfaccia utente. Ciascuno di questi componenti esiste nello stesso spazio ma viene eseguito indipendentemente l'uno dall'altro. I componenti di React hanno la propria struttura, metodi e API. Sono riutilizzabili e possono essere iniettati nelle interfacce secondo necessità. Per avere una migliore comprensione, considera l'intera interfaccia utente come un albero.Qui il componente di partenza diventa la radice e ciascuno dei pezzi indipendenti diventa rami, che vengono ulteriormente suddivisi in sottorami.

Ciò mantiene la nostra interfaccia utente organizzata e consente ai dati e alle modifiche di stato di fluire logicamente dalla radice ai rami e quindi ai sottorami. I componenti effettuano chiamate al server direttamente dal lato client, il che consente al DOM di aggiornarsi dinamicamente senza aggiornare la pagina. Questo perché i componenti di reazione si basano sul concetto di richieste AJAX. Ogni componente ha la propria interfaccia che può effettuare chiamate al server e aggiornarle. Poiché questi componenti sono indipendenti l'uno dall'altro, ciascuno può essere aggiornato senza influire sugli altri o sull'interfaccia utente nel suo complesso.

Noi usiamo React.createClass () metodo per creare un componente. A questo metodo deve essere passato un argomento oggetto che definirà il componente React. Ogni componente deve contenerne esattamente uno render () metodo. È la proprietà più importante di un componente responsabile dell'analisi dell'HTML in JavaScript, JSX. Questo render () restituirà la rappresentazione HTML del componente come un nodo DOM. Pertanto, tutti i tag HTML devono essere racchiusi in un tag di inclusione all'interno del file render () .

Di seguito è riportato un codice di esempio per la creazione di un componente.

esempi di programmi applet java con output

import React da 'react' importa ReactDOM dalla classe 'react-dom' MyComponent estende React.Component {render () {return (
Il tuo ID è {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))

States vs Props

React Component Lifecycle

React fornisce vari metodi che notificano quando si verifica una certa fase del ciclo di vita di un componente. Questi metodi sono chiamati metodi del ciclo di vita. Questi metodi del ciclo di vita non sono molto complicati. È possibile pensare a questi metodi come gestori di eventi specializzati che vengono chiamati in vari punti durante la vita di un componente. Puoi persino aggiungere il tuo codice a questi metodi per eseguire varie attività. Parlando del ciclo di vita del componente, il ciclo di vita è diviso in 4 fasi. Sono:

1. Fase iniziale
2. Fase di aggiornamento
3. Fase di cambio puntelli
4. Fase di smontaggio

Ciascuna di queste fasi contiene alcuni metodi del ciclo di vita che sono specifici solo per loro. Quindi vediamo ora cosa succede durante ciascuna di queste fasi.

un. Fase iniziale - La prima fase del ciclo di vita di un componente React è la fase iniziale o la fase di rendering iniziale. In questa fase,il componente sta per iniziare il suo viaggio e raggiungere il DOM. Questa fase è costituita dai seguenti metodi che vengono richiamati in un ordine predefinito.

1. getDefaultProps (): Questo metodo viene utilizzato per specificare il valore predefinito di this.props . Viene chiamato prima ancora che il tuo componente venga creato o qualsiasi oggetto di scena dal genitore venga passato al suo interno.
2. getInitialState (): Questo metodo è utilizzato perspecificare il valore predefinito di this.state prima che il tuo componente venga creato.
3. componentWillMount (): Questo è l'ultimo metodo che puoi chiamare prima che il tuo componente venga visualizzato nel DOM. Ma se chiami setState () all'interno di questo metodo il tuo componente non verrà nuovamente renderizzato.
4. render (): Th Questo metodo è responsabile della restituzione di un singolo nodo HTML radice e deve essere definito in ogni singolo componente. Puoi tornare nullo o falso nel caso in cui non desideri eseguire il rendering di nulla.
5. componentDidMount (): Una volta che il componente è stato renderizzato e posizionato sul DOM, questo viene chiamato il metodo. Qui puoi eseguire qualsiasi operazione di query DOM.

b. Fase di aggiornamento - Una volta che il componente è stato aggiunto al DOM, possono essere aggiornati e riesaminati solo quando si verifica un cambiamento di stato. Ogni volta che lo stato cambia, il componente chiama il suo render () ancora. Qualsiasi componente che fa affidamento sull'output di questo componente chiamerà anche il suo render () ancora. Questa operazione viene eseguita per garantire che il nostro componente visualizzi la versione più recente di se stesso. Pertanto, per aggiornare correttamente lo stato dei componenti, vengono richiamati i seguenti metodi nell'ordine indicato:

1. shouldComponentUpdate (): Utilizzando questo metodo puoi controllare il comportamento del tuo componente durante l'aggiornamento. Se restituisci un vero da questo metodo,il componente si aggiornerà. Altrimenti se questo metodo restituisce un filefalso, il componente salterà l'aggiornamento.
2. componentWillUpdate (): Til suo metodo è chiamato just prima che il tuo componente stia per aggiornarsi. In questo metodo, non è possibile modificare lo stato del componente chiamando this.setState .
3. render (): Se stai restituendo false tramite shouldComponentUpdate () , il codice all'interno render () verrà nuovamente richiamato per garantire che il componente venga visualizzato correttamente.
4. componentDidUpdate (): Una volta che il componente è stato aggiornato e sottoposto a rendering, viene richiamato questo metodo. Puoi inserire qualsiasi codice all'interno di questo metodo, che desideri eseguire una volta aggiornato il componente.

c. Fase di cambio puntelli - Dopo il componente è stato reso nel DOM, l'unica altra volta che il componente si aggiornerà, a parte il cambio di stato è quando il suo valore di prop cambia. Praticamente questa fase funziona in modo simile alla fase precedente, ma invece dello stato, si occupa degli oggetti di scena. Pertanto, questa fase ha solo un metodo aggiuntivo dalla fase di aggiornamento.

1. componentWillReceiveProps (): Questo metodo restituisce un argomento che contiene il nuovo valore prop che sta per essere assegnato al componente.
   Il resto dei metodi del ciclo di vita si comportano in modo identico ai metodi che abbiamo visto nella fase precedente.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. render ()
5. componentDidUpdate ()

d.La fase di smontaggio -Questa è l'ultima fase del ciclo di vita dei componenti in cui il componente viene distrutto e rimosso completamente dal DOM. Contiene un solo metodo:

1. componentWillUnmount (): Una volta richiamato questo metodo, il tuo componente viene rimosso dal DOM in modo permanente.In questo metodo, YPuoi eseguire qualsiasi attività relativa alla pulizia come la rimozione dei listener di eventi, l'arresto dei timer, ecc.

Di seguito è riportato l'intero diagramma del ciclo di vita:

Questo ci porta alla fine del blog sui componenti React. Spero in questo blog di essere stato in grado di spiegare chiaramente cosa sono i componenti React, come vengono utilizzati. Puoi fare riferimento al mio blog su , nel caso in cui desideri saperne di più su ReactJS.

Se vuoi essere addestrato in React e desideri sviluppare un'interfaccia utente interessante da solo, controlla il da Edureka, una società di formazione online affidabile con una rete di oltre 250.000 studenti soddisfatti sparsi in tutto il mondo.

Hai domande per noi? Per favore menzionalo nella sezione commenti e ti risponderemo.