constructeur vs componentWillMount ; ce qu'un componentWillMount peut faire qu'un constructeur ne peut pas ?

Question

D'après ce que je peux voir, la seule chose qu'un componentWillMount peut faire et un constructor ne peut pas être d'appeler setState .

componentWillMount() {
    setState({ isLoaded: false });
}

Puisque nous n'avons pas appelé render pourtant, un setState en componentWillMount préparera l'objet d'état avant que nous entrions dans le premier render() passer. Ce qui est essentiellement la même chose qu'un constructor fait :

constructor(props) {
    super(props);
    this.state = { isLoaded: false };
}

---

Mais je vois un autre cas d'utilisation où componentWillMount est utile (du côté du serveur).

Considérons quelque chose d'asynchrone :

componentWillMount() {
    myAsyncMethod(params, (result) => {
        this.setState({ data: result });
    })
}

Ici, nous ne pouvons pas utiliser le constructor en tant qu'affectation à this.state ne déclenchera pas render() .

Qu'en est-il setState en componentWillMount ? Selon Documents sur React :

componentWillMount() est invoqué immédiatement avant le montage. Il est appelé avant render( ), par conséquent, l'établissement de l'état dans cette méthode ne déclenchera pas un nouveau rendu. Évitez d'introduire des effets secondaires ou des abonnements dans cette méthode.

Donc, ici je pense que React utilisera la nouvelle valeur de l'état pour le premier rendu et évitera un re-rendu.

Question 1 : Est-ce que cela signifie, à l'intérieur componentWillMount si nous appelons setState dans le callback d'une méthode asynchrone (peut être un callback de promesse), React bloque le rendu initial jusqu'à ce que le callback soit exécuté ?

En ayant cette configuration sur côté client (oui, je vois ce cas d'utilisation dans le rendu côté serveur), si je suppose que ce qui précède est vrai, je ne verrai rien tant que ma méthode asynchrone ne sera pas terminée.

Est-ce qu'il me manque des concepts ?

Question 2 : Existe-t-il d'autres cas d'utilisation que je peux réaliser avec componentWillMount uniquement, mais sans utiliser le constructor y componentDidMount ?

Answer 1

Cela signifie-t-il qu'à l'intérieur du composantWillMount, si nous appelons setState dans un dans le callback d'une méthode asynchrone (peut être un callback de promesse), React bloque le le rendu initial jusqu'à ce que le callback soit exécuté ?

Non, voir ici .

Le code suivant ne bloque pas le rendu (gardez à l'esprit que ce serait de toute façon un anti pattern d'appeler setState à cet endroit)

componentWillMount: function() {
     new Promise((resolve, reject) => {
        setTimeout(()=> {
            resolve();
        }, 2000)
     }).then(() => this.setState({ promiseResult: 'World' }));
  },

Question 2 : Y a-t-il d'autres cas d'utilisation que je peux réaliser avec les componentWillMount seulement, mais sans utiliser le constructeur et le componentDidMount ?

Non, pour les classes ES6 vous pouvez écarter componentWillMount . Il n'est nécessaire que si vous utilisez React.createClass({... })

EDIT : Apparemment, j'ai tort. Merci à @ Swapnil pour l'avoir signalé. Voici le discussion .

React jette un avertissement s'il y a un effet secondaire dans le fichier constructor qui modifie l'état d'un autre composant, car il suppose que setState dans le constructor et potentiellement pendant render() est appelé. Il n'y a donc pas d'effets secondaires dans le constructor sont souhaités.

Ce n'est pas le cas si vous le faites en componentWillMount aucune erreur n'est déclenchée. D'un autre côté, les gars de Facebook découragent les effets secondaires dans componentWillMount également. Donc si vous n'avez pas d'effets secondaires, vous pourriez utiliser le constructor au lieu de componentWillMount . Pour les effets secondaires, il est recommandé d'utiliser componentDidMount au lieu de componentWillMount . De toute façon, vous n'avez pas besoin componentWillMount .