State e Lifecycle

Questa pagina introduce il concetto di state (stato) e lifecycle (ciclo di vita) in un componente React. Puoi trovare un riferimento dettagliato alle API dei componenti qui.

Considera l’esempio dell’orologio di una delle sezioni precedenti. In Renderizzare Elementi, abbiamo appreso solamente un modo per aggiornare la UI. Chiamiamo root.render() per cambiare l’output renderizzato:

const root = ReactDOM.createRoot(document.getElementById('root'));

function tick() {
  const element = (
    <div>
      <h1>Ciao, mondo!</h1>
      <h2>Sono le {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);}

setInterval(tick, 1000);

Prova su CodePen

In questa sezione, apprenderemo come rendere il componente Clock davvero riutilizzabile ed incapsulato. Esso si occuperà di impostare il proprio timer e di aggiornarsi ogni secondo.

Possiamo iniziare incapsulando l’aspetto dell’orologio:

const root = ReactDOM.createRoot(document.getElementById('root'));

function Clock(props) {
  return (
    <div>      <h1>Ciao, mondo!</h1>      <h2>Sono le {props.date.toLocaleTimeString()}.</h2>    </div>  );
}

function tick() {
  root.render(<Clock date={new Date()} />);}

setInterval(tick, 1000);

Prova su CodePen

Tuttavia, manca un requisito fondamentale: il fatto che Clock imposti un timer ed aggiorni la propria UI ogni secondo dovrebbe essere un dettaglio implementativo di Clock.

Idealmente, vorremmo scrivere il seguente codice una volta sola, ed ottenere che Clock si aggiorni da solo:

root.render(<Clock />);

Per implementare ciò, abbiamo bisogno di aggiungere uno “stato” al componente Clock.

Lo state (o stato) è simile alle props, ma è privato e completamente controllato dal componente.

Convertire una Funzione in una Classe

Puoi convertire un componente funzione come Clock in una classe in cinque passaggi:

1. Crea una classe ES6, con lo stesso nome, che estende React.Component.
2. Aggiungi un singolo metodo vuoto chiamato render().
3. Sposta il corpo della funzione all’interno del metodo render().
4. Sostituisci props con this.props nel corpo del metodo render().
5. Rimuovi la dichiarazione della funzione rimasta vuota.

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Ciao, mondo!</h1>
        <h2>Sono le {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Prova su CodePen

Clock è ora definito da una classe, invece che da una funzione.

Il metodo render viene invocato ogni volta che si verifica un aggiornamento, ma finché renderizziamo <Clock /> nello stesso nodo del DOM, verrà utilizzata un’unica istanza della classe Clock. Questo ci consente di utilizzare funzionalità aggiuntive come il local state e i metodi del lifecycle del componente.

Aggiungere il Local State ad una Classe

Sposteremo date dalle props allo state in tre passaggi:

1. Sostituisci this.props.date con this.state.date nel metodo render():

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Ciao, mondo!</h1>
        <h2>Sono le {this.state.date.toLocaleTimeString()}.</h2>      </div>
    );
  }
}

2. Aggiungi un costruttore di classe che assegna il valore iniziale di this.state:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};  }

  render() {
    return (
      <div>
        <h1>Ciao, mondo!</h1>
        <h2>Sono le {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Nota come passiamo props al costruttore di base:

  constructor(props) {
    super(props);    this.state = {date: new Date()};
  }

I componenti classe dovrebbero sempre chiamare il costruttore base passando props come argomento.

3. Rimuovi la prop date dall’elemento