React
Cycle de vie des composants réactifs

Introduction

Création de composants

Lorsqu'un composant React est créé, plusieurs fonctions sont appelées:

• Si vous utilisez React.createClass (ES5), 5 fonctions définies par l'utilisateur sont appelées
• Si vous utilisez la class Component extends React.Component (ES6), 3 fonctions définies par l'utilisateur sont appelées

getDefaultProps() (ES5 uniquement)

C'est la première méthode appelée.

Les valeurs de prop renvoyées par cette fonction seront utilisées par défaut si elles ne sont pas définies lors de l'instanciation du composant.

Dans l'exemple suivant, this.props.name sera this.props.name par défaut sur Bob s'il n'est pas spécifié autrement:

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

getInitialState() (ES5 uniquement)

C'est la deuxième méthode appelée.

La valeur de retour de getInitialState() définit l'état initial du composant React. Le framework React appelle cette fonction et attribue la valeur de retour à this.state .

Dans l'exemple suivant, this.state.count sera initialisé avec la valeur de this.props.initialCount :

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

componentWillMount() (ES5 et ES6)

C'est la troisième méthode appelée.

Cette fonction peut être utilisée pour apporter des modifications finales au composant avant qu’il ne soit ajouté au DOM.

componentWillMount() {
  ...
}

render() (ES5 et ES6)

C'est la quatrième méthode appelée.

La fonction render() devrait être une fonction pure de l'état et des propriétés du composant. Il retourne un seul élément qui représente le composant pendant le processus de rendu et doit soit représenter un composant DOM natif (par exemple, <p /> ), soit un composant composite. Si rien ne doit être rendu, il peut renvoyer null ou undefined .

Cette fonction sera rappelée après toute modification des accessoires ou de l'état du composant.

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

componentDidMount() (ES5 et ES6)

C'est la cinquième méthode appelée.

Le composant a été monté et vous pouvez désormais accéder aux noeuds DOM du composant, par exemple via les refs .

Cette méthode doit être utilisée pour:

• Préparer des minuteries
• Récupération des données
• Ajouter des écouteurs d'événement
• Manipulation des éléments DOM

componentDidMount() {
  ...
}

ES6 Syntaxe

Si le composant est défini à l'aide de la syntaxe de classe ES6, les fonctions getDefaultProps() et getInitialState() ne peuvent pas être utilisées.

Au lieu de cela, nous déclarons nos defaultProps comme une propriété statique sur la classe et déclarons la forme d'état et l'état initial dans le constructeur de notre classe. Celles-ci sont toutes deux définies sur l'instance de la classe au moment de la construction, avant toute autre fonction de cycle de vie React.

L'exemple suivant illustre cette approche alternative:

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
};

Remplacement de getDefaultProps()

Les valeurs par défaut des composants du composant sont spécifiées en définissant la propriété defaultProps de la classe:

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

Remplacement de getInitialState()

Le moyen idiomatique de configurer l’état initial du composant est de définir this.state dans le constructeur:

constructor(props){
  super(props);

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

Mise à jour des composants

componentWillReceiveProps(nextProps)

C'est la première fonction appelée sur les modifications de propriétés .

Lorsque les propriétés du composant changent , React appelle cette fonction avec les nouvelles propriétés . Vous pouvez accéder aux anciens accessoires avec this.props et aux nouveaux accessoires avec nextProps .

Avec ces variables, vous pouvez effectuer des opérations de comparaison entre les anciens et les nouveaux accessoires, ou la fonction d’appel, car une propriété change, etc.

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

shouldComponentUpdate(nextProps, nextState)

C'est la deuxième fonction appelée sur les modifications de propriétés et la première sur les changements d'état .

Par défaut, si un autre composant / votre composant modifie une propriété / un état de votre composant, React affichera une nouvelle version de votre composant. Dans ce cas, cette fonction renvoie toujours true.

Vous pouvez remplacer cette fonction et choisir plus précisément si votre composant doit être mis à jour ou non .

Cette fonction est principalement utilisée pour l' optimisation .

Si la fonction renvoie false , le pipeline de mise à jour s'arrête immédiatement .

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

componentWillUpdate(nextProps, nextState)

Cette fonction fonctionne comme componentWillMount() . Les modifications ne sont pas dans DOM , vous pouvez donc apporter certaines modifications juste avant la mise à jour.

/! \: vous ne pouvez pas utiliser this.setState () .

componentWillUpdate(nextProps, nextState){}

render()

Il y a quelques modifications, alors restaurez le composant.

componentDidUpdate(prevProps, prevState)

Même chose que componentDidMount() : DOM est rafraîchi , vous pouvez donc travailler sur le DOM ici.

componentDidUpdate(prevProps, prevState){}

Enlèvement de composant

componentWillUnmount()

Cette méthode est appelée avant qu'un composant ne soit démonté du DOM.

C'est un bon endroit pour effectuer des opérations de nettoyage comme:

• Suppression des écouteurs d'événements
• Effacer les minuteries.
• Arrêt des prises
• Nettoyage des états de redux.

componentWillUnmount(){
  ...
}

Exemple de suppression d'un écouteur d'événement attaché dans 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>
    );
  }
}

Réaction du conteneur de composants

Lors de la création d'une application React, il est souvent souhaitable de diviser les composants en fonction de leur responsabilité principale, en composants de présentation et de conteneur.
Les composants de présentation ne concernent que l'affichage des données - ils peuvent être considérés comme des fonctions qui convertissent souvent un modèle en vue. En règle générale, ils ne maintiennent aucun état interne. Les composants de conteneur concernent la gestion des données. Cela peut être fait en interne par leur propre état, ou en agissant comme intermédiaires avec une bibliothèque de gestion d'état telle que Redux. Le composant conteneur n'affichera pas directement les données, mais les transmettra à un composant de présentation.

// 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)
}

Appel de méthode de cycle de vie dans différents états

Cet exemple sert de complément à d'autres exemples qui expliquent comment utiliser les méthodes du cycle de vie et quand la méthode sera appelée.

Cet exemple résume quelles méthodes (componentWillMount, componentWillReceiveProps, etc.) seront appelées et dans quelle séquence sera différent pour un composant dans différents états :

Lorsqu'un composant est initialisé:

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

Lorsqu'un état a changé d'état:

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

Quand un composant a des accessoires changés:

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

Lorsqu'un composant se démonte:

1. componentWillUnmount