React.Component

Questa pagina contiene un riferimento dettagliato delle API della definizione della classe componente React. Viene dato per scontato che ti siano familiari i concetti fondamentali di React, come Componenti e Props, così come State e Lifecycle. Se non è così, studiali prima di proseguire.

Panoramica

React ti consente di definire componenti come classi o come funzioni. I componenti definiti come classi attualmente sono dotati di più funzionalità, che sono descritte dettagliatamente in questa pagina. Per definire una classe componente React, devi estendere React.Component:

class Benvenuto extends React.Component {
  render() {
    return <h1>Ciao, {this.props.nome}</h1>;
  }
}

L’unico metodo che è obbligatorio definire in una sottoclasse React.Component è chiamato render(). Tutti gli altri metodi descritti in questa pagina sono opzionali.

Ti sconsigliamo vivamente di creare altre classi base per i tuoi componenti. In React, il riutilizzo del codice è ottenuto soprattutto utilizzando la composizione e non l’ereditarietà.

Nota:

React non ti obbliga ad utilizzare la sintassi delle classi ES6. Se preferisci evitarla, puoi utilizzare il modulo create-react-class o un’astrazione simile. Dai un’occhiata a React senza ES6 per saperne di più.

Il Lifecycle del Componente

Ogni componente ha numerosi “metodi del lifecycle” (metodi del ciclo di vita) che puoi sovrascrivere per eseguire del codice in momenti particolari nel processo. Puoi utilizzare questo diagramma del lifecycle come riferimento. Nella lista più in basso, i metodi del lifecycle più frequentemente utilizzati sono evidenziati in grassetto. Gli altri metodi non evidenziati esistono per casi d’uso relativamente rari.

Mounting (Montaggio)

Quando un’istanza di un componente viene creata e inserita nel DOM, questi metodi vengono chiamati nel seguente ordine:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

Nota:

Questo metodo è considerato obsoleto e dovresti evitare di utilizzarlo quando scrivi del nuovo codice:

• UNSAFE_componentWillMount()

Aggiornamento

Un aggiornamento può essere causato da cambiamenti alle props o allo state. Quando un componente viene ri-renderizzato, questi metodi sono chiamati nel seguente ordine:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Nota:

Questi metodi sono considerati obsoleti e dovresti evitare di utilizzarli quando scrivi del nuovo codice:

• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

Unmounting (Smontaggio)

Quando un componente viene rimosso dal DOM, viene chiamato questo metodo:

• componentWillUnmount()

Gestione degli Errori

Quando si verifica un errore durante la renderizzazione, in un metodo del lifecycle o nel costruttore di un componente figlio, vengono chiamati questi metodi:

• static getDerivedStateFromError()
• componentDidCatch()

Altre API

Ciascun componente fornisce anche altre API:

• setState()