ReactJS - Ciclo di vita dei componenti

In questo capitolo discuteremo i metodi del ciclo di vita dei componenti.

Metodi del ciclo di vita

• componentWillMount viene eseguito prima del rendering, sia sul lato server che su quello client.

• componentDidMountviene eseguito dopo il primo rendering solo sul lato client. È qui che dovrebbero verificarsi le richieste AJAX e gli aggiornamenti DOM o di stato. Questo metodo viene utilizzato anche per l'integrazione con altri framework JavaScript e qualsiasi funzione con esecuzione ritardata comesetTimeout o setInterval. Lo stiamo usando per aggiornare lo stato in modo da poter attivare gli altri metodi del ciclo di vita.

• componentWillReceivePropsviene invocato non appena gli oggetti di scena vengono aggiornati prima che venga chiamato un altro rendering. L'abbiamo attivato dasetNewNumber quando abbiamo aggiornato lo stato.

• shouldComponentUpdate dovrebbe tornare true o falsevalore. Questo determinerà se il componente verrà aggiornato o meno. Questo è impostato sutrueper impostazione predefinita. Se sei sicuro che il componente non debba essere renderizzato dopostate o props sono aggiornati, puoi tornare false valore.

• componentWillUpdate viene chiamato appena prima del rendering.

• componentDidUpdate viene chiamato subito dopo il rendering.

• componentWillUnmountviene chiamato dopo che il componente è stato smontato dal dom. Stiamo smontando il nostro componente inmain.js.

Nell'esempio seguente, imposteremo l'iniziale statenella funzione costruttore. IlsetNewnumber viene utilizzato per aggiornare il file state. Tutti i metodi del ciclo di vita sono all'interno del componente Contenuto.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

Dopo il rendering iniziale, avremo la seguente schermata.