React
React Component Lifecycle

introduzione

Creazione di componenti

Quando viene creato un componente React, vengono chiamate un numero di funzioni:

• Se si utilizza React.createClass (ES5), vengono chiamate 5 funzioni definite dall'utente
• Se stai usando la class Component extends React.Component (ES6), vengono chiamate 3 funzioni definite dall'utente

getDefaultProps() (solo ES5)

Questo è il primo metodo chiamato.

I valori delle proporzioni restituiti da questa funzione verranno utilizzati come valori predefiniti se non vengono definiti quando il componente viene istanziato.

Nell'esempio seguente, this.props.name verrà this.props.name come this.props.name su Bob se non diversamente specificato:

getDefaultProps() {
  return {
    initialCount: 0,
    name: 'Bob'
  };
}

getInitialState() (solo ES5)

Questo è il secondo metodo chiamato.

Il valore restituito da getInitialState() definisce lo stato iniziale del componente React. Il framework React chiamerà questa funzione e assegnerà il valore restituito a this.state .

Nell'esempio seguente, this.state.count verrà inizializzato con il valore di this.props.initialCount :

getInitialState() {
  return {
    count : this.props.initialCount
  };
}

componentWillMount() (ES5 e ES6)

Questo è il terzo metodo chiamato.

Questa funzione può essere utilizzata per apportare modifiche finali al componente prima che venga aggiunto al DOM.

componentWillMount() {
  ...
}

render() (ES5 e ES6)

Questo è il quarto metodo chiamato.

La funzione render() dovrebbe essere una pura funzione dello stato e degli oggetti del componente. Restituisce un singolo elemento che rappresenta il componente durante il processo di rendering e dovrebbe essere una rappresentazione di un componente DOM nativo (ad esempio <p /> ) o un componente composito. Se nulla deve essere reso, può restituire null o undefined .

Questa funzione verrà richiamata dopo qualsiasi modifica ai puntelli o allo stato del componente.

render() {
  return (
    <div>
      Hello, {this.props.name}!
    </div>
  );
}

componentDidMount() (ES5 e ES6)

Questo è il quinto metodo chiamato.

Il componente è stato montato e ora puoi accedere ai nodi DOM del componente, ad esempio tramite i refs .

Questo metodo dovrebbe essere usato per:

• Preparazione dei timer
• Recuperando i dati
• Aggiunta di listener di eventi
• Manipolazione di elementi DOM

componentDidMount() {
  ...
}

Sintassi ES6

Se il componente viene definito utilizzando la sintassi della classe ES6, non è possibile utilizzare le funzioni getDefaultProps() e getInitialState() .

Invece, dichiariamo il nostro defaultProps come una proprietà statica sulla classe e dichiariamo la forma dello stato e lo stato iniziale nel costruttore della nostra classe. Questi sono entrambi impostati sull'istanza della classe in fase di costruzione, prima che venga richiamata qualsiasi altra funzione del ciclo di vita di React.

Il seguente esempio dimostra questo approccio alternativo:

class MyReactClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      count: this.props.initialCount
    };
  }
  
  upCount() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        Hello, {this.props.name}!<br />
        You clicked the button {this.state.count} times.<br />
        <button onClick={this.upCount}>Click here!</button>
      </div>
    );
  }
}

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

Sostituire getDefaultProps()

I valori predefiniti per i puntelli dei componenti vengono specificati impostando la proprietà defaultProps della classe:

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

Sostituire getInitialState()

Il modo idiomatico per impostare lo stato iniziale del componente è impostare this.state nel costruttore:

constructor(props){
  super(props);

  this.state = {
    count: this.props.initialCount
  };
}

Aggiornamento del componente

componentWillReceiveProps(nextProps)

Questa è la prima funzione chiamata sulle modifiche delle proprietà .

Quando le proprietà del componente cambiano , React chiamerà questa funzione con le nuove proprietà . Puoi accedere ai vecchi oggetti di scena con this.props e ai nuovi oggetti di scena con nextProps .

Con queste variabili, puoi eseguire alcune operazioni di confronto tra vecchi e nuovi oggetti di scena, o chiamare la funzione perché una modifica di proprietà, ecc.

componentWillReceiveProps(nextProps){
  if (nextProps.initialCount && nextProps.initialCount > this.state.count){
    this.setState({
      count : nextProps.initialCount
    });
  }
}

shouldComponentUpdate(nextProps, nextState)

Questa è la seconda funzione chiamata sulle modifiche delle proprietà e la prima sulle modifiche di stato .

Per impostazione predefinita, se un altro componente / componente modifica una proprietà / uno stato del componente, React eseguirà il rendering di una nuova versione del componente. In questo caso, questa funzione restituisce sempre true.

È possibile ignorare questa funzione e scegliere con maggiore precisione se il componente deve essere aggiornato o meno .

Questa funzione è principalmente utilizzata per l' ottimizzazione .

Nel caso in cui la funzione restituisca false , la pipeline di aggiornamento si interrompe immediatamente .

componentShouldUpdate(nextProps, nextState){
  return this.props.name !== nextProps.name ||
    this.state.count !== nextState.count;
}

componentWillUpdate(nextProps, nextState)

Questa funzione funziona come componentWillMount() . Le modifiche non sono in DOM , quindi puoi apportare alcune modifiche appena prima dell'aggiornamento.

/! \: non puoi usare this.setState () .

componentWillUpdate(nextProps, nextState){}

render()

Sono presenti alcune modifiche, quindi eseguire nuovamente il rendering del componente.

componentDidUpdate(prevProps, prevState)

Stesse cose di componentDidMount() : DOM viene aggiornato , quindi puoi fare un po 'di lavoro sul DOM qui.

componentDidUpdate(prevProps, prevState){}

Rimozione dei componenti

componentWillUnmount()

Questo metodo viene chiamato prima che un componente sia smontato dal DOM.

È un buon posto per eseguire operazioni di pulizia come:

• Rimozione dei listener di eventi.
• Timer di compensazione.
• Fermare le prese.
• Pulizia degli stati redux.

componentWillUnmount(){
  ...
}

Un esempio di rimozione del listener di eventi associato in componentWillUnMount

import React, { Component } from 'react';

export default class SideMenu extends Component {

  constructor(props) {
    super(props);
    this.state = {
        ...
      };
    this.openMenu = this.openMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  componentDidMount() {
    document.addEventListener("click", this.closeMenu);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.closeMenu);
  }

  openMenu() {
    ...
  }

  closeMenu() {
    ...
  }

  render() {
    return (
      <div>
        <a
          href      = "javascript:void(0)"
          className = "closebtn"
          onClick   = {this.closeMenu}
        >
          ×
        </a>
        <div>
          Some other structure
        </div>
      </div>
    );
  }
}

Reagire contenitore componente

Quando si crea un'applicazione React, è spesso consigliabile suddividere i componenti in base alla loro responsabilità principale, in componenti Presentational e Container.
I componenti della presentazione riguardano solo la visualizzazione dei dati, possono essere considerati e spesso implementati come funzioni che convertono un modello in una vista. In genere non mantengono nessuno stato interno. I componenti del contenitore riguardano la gestione dei dati. Questo può essere fatto internamente attraverso il proprio stato, o agendo da intermediari con una libreria di gestione dello stato come Redux. Il componente contenitore non visualizzerà direttamente i dati, ma passerà i dati a un componente di presentazione.

// Container component
import React, { Component } from 'react';
import Api from 'path/to/api';

class CommentsListContainer extends Component {
    constructor() {
        super();
        // Set initial state
        this.state = { comments: [] }
    }

    componentDidMount() {
        // Make API call and update state with returned comments
        Api.getComments().then(comments => this.setState({ comments }));
    }

    render() {
        // Pass our state comments to the presentational component
        return (
            <CommentsList comments={this.state.comments} />;
        );
    }
}

// Presentational Component
const CommentsList = ({ comments }) => (
    <div>
        {comments.map(comment => (
            <div>{comment}</div>
        )}
    </div>
);

CommentsList.propTypes = {
    comments: React.PropTypes.arrayOf(React.PropTypes.string)
}

Chiamata al metodo del ciclo di vita in diversi stati

Questo esempio serve come complemento ad altri esempi che parlano di come utilizzare i metodi del ciclo di vita e quando verrà chiamato il metodo.

Questo esempio riepiloga quali metodi (componentWillMount, componentWillReceiveProps, ecc) verranno chiamati e in quale sequenza sarà diversa per un componente in stati diversi :

Quando un componente è inizializzato:

1. getDefaultProps
2. getInitialState
3. componentWillMount
4. rendere
5. componentDidMount

Quando un componente è stato modificato:

1. shouldComponentUpdate
2. componentWillUpdate
3. rendere
4. componentDidUpdate

Quando un componente ha oggetti di scena modificati:

1. componentWillReceiveProps
2. shouldComponentUpdate
3. componentWillUpdate
4. rendere
5. componentDidUpdate

Quando un componente è smontato:

1. componentWillUnmount