web-dev-qa-db-fra.com

constructeur vs composantWillMount; Qu'est-ce qu'un composantWillMount peut faire qu'un constructeur ne peut pas?

Autant que je sache, la seule chose qu'un componentWillMount puisse faire et qu'un constructor ne puisse pas est d'appeler setState.

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

Puisque nous n'avons pas encore appelé render, un setState dans componentWillMount préparera l'objet state avant que nous n'entrions dans le premier render() pass. 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 (côté serveur).

Considérons quelque chose d'asynchrone:

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

Ici, nous ne pouvons pas utiliser le constructor, car l’affectation à this.state Ne déclenchera pas render().

Qu'en est-il de setState dans componentWillMount? Selon documents React :

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

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

Question 1: Cela signifie-t-il, à l'intérieur de componentWillMount, si nous appelons setState dans le rappel d'une méthode asynchrone (peut être un rappel de promesse), React bloque le rendu initial jusqu'à l'exécution du rappel??

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 le ferai pas rien voir jusqu'à ce que ma méthode asynchrone se termine.

Est-ce que je manque des concepts?

Question 2: Sont-ils tous les autres cas d'utilisation que je peux réaliser avec componentWillMount uniquement, mais n'utilisant pas le constructor et componentDidMount?

javascriptclassreactjsconstructorecmascript-6
37
Yadhu Kiran

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

Non, voir ici .

Le code suivant ne bloque pas le rendu (sachez que ce serait un anti-modèle pour appeler setState ici)

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

Question 2: Est-ce que tous les autres cas d'utilisation que je peux réaliser avec composantWillMount uniquement, sans utiliser le constructeur et composantDidMount?

Non, vous pouvez ignorer ComponentWillMount pour les classes ES6. Cela n’est nécessaire que si vous utilisez React.createClass({... })

EDIT: Apparemment, je me trompe. Merci à @ Swapnil pour l'avoir signalé. Voici le discussion .

React émet un avertissement s'il y a un effet secondaire dans le constructor qui modifie l'état dans un autre composant, car il suppose que setState dans le constructor lui-même et potentiellement au cours de la fonction render() est appelé. Donc, aucun effet secondaire dans le constructor n'est souhaité.

Ce n'est pas le cas si vous le faites dans componentWillMount, aucune erreur n'est générée. D'autre part, les gars de Facebook découragent les effets secondaires dans componentWillMount également. Donc, si vous n'avez aucun effet secondaire, vous pouvez 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 de componentWillMount.

16
Lyubomir