Quelle est la différence entre componentWillMount et componentDidMount dans ReactJS?

J'ai regardé la documentation de Facebook sur ( React.Component ) et il mentionne comment componentWillMountest invoqué sur le client / serveur alors qu'il componentDidMountest invoqué uniquement sur le client. Que fait componentWillMountle serveur?

componentWillMount est essentiellement le constructeur. Vous pouvez définir des propriétés d'occurrence qui n'affectent pas le rendu, extraire des données d'un magasin de manière synchrone et définirState avec elle, ainsi que d'autres codes gratuits d'effets secondaires simples que vous devez exécuter lors de la configuration de votre composant.

C'est rarement nécessaire, et pas du tout avec les classes ES6.

la constructorméthode n'est pas la même que componentWillMount.

Selon l'auteur de Redux, il est risqué d'envoyer des actions du constructeur car cela peut entraîner une mutation de l'état lors du rendu.

Cependant, expédier depuis componentWillMountest très bien.

à partir du problème github :

Cela se produit lorsque dispatch () dans le constructeur d'un composant provoque un setState () dans un autre composant. React garde une trace du «propriétaire actuel» pour de tels avertissements - et il pense que nous appelons setState () à l'intérieur du constructeur quand techniquement le constructeur provoque un setState () dans une autre partie de l'application. Je ne pense pas que nous devrions gérer cela - c'est juste React qui fait de son mieux pour faire son travail. La solution est, comme vous l'avez correctement noté, de dispatch () à l'intérieur de componentWillMount () à la place.

Pour ajouter à ce que FakeRainBrigand a dit, componentWillMountest appelé lors du rendu de React sur le serveur et sur le client, mais componentDidMountn'est appelé que sur le client.

componentWillMountest fait avant l'INITIAL renderd'un composant, et est utilisé pour évaluer les accessoires et faire toute logique supplémentaire basée sur eux (généralement pour mettre à jour également l'état), et en tant que tel peut être effectué sur le serveur afin d'obtenir le premier balisage rendu côté serveur .

componentDidMountest effectuée APRÈS l'initiale renderlorsque le DOM a été mis à jour (mais surtout AVANT que cette mise à jour du DOM soit peinte sur le navigateur, vous permettant de faire toutes sortes d'interactions avancées avec le DOM lui-même). Cela ne peut bien sûr se produire que dans le navigateur lui-même et ne se produit donc pas dans le cadre du SSR, car le serveur ne peut générer que du balisage et non le DOM lui-même, cela se fait après qu'il a été envoyé au navigateur si vous utilisez SSR

Interactions avancées avec le DOM dites-vous? Whaaaat ?? ... Oui - à ce stade, car le DOM a été mis à jour (mais l'utilisateur n'a pas encore vu la mise à jour dans le navigateur), il est possible d'intercepter la peinture réelle à l'écran en utilisantwindow.requestAnimationFrame et ensuite faire des choses comme mesurer le réel Les éléments DOM qui seront générés, sur lesquels vous pouvez effectuer d'autres changements d'état, super utiles par exemple pour animer à une hauteur d'un élément dont le contenu de longueur variable est inconnu (car vous pouvez maintenant mesurer le contenu et attribuer une hauteur à l'animation), ou pour éviter le flash des scénarios de contenu lors de certains changements d'état.

Soyez très prudent cependant pour protéger les changements d'état dans tout, componentDid...car sinon, cela peut provoquer une boucle infinie car un changement d'état provoquera également un nouveau rendu, et par conséquent un autre componentDid...et ainsi de suite.

Selon la documentation ( https://facebook.github.io/react/docs/react-component.html )

Les méthodes préfixées par will sont appelées juste avant que quelque chose ne se passe et

Les méthodes précédées de did sont appelées à droite après que quelque chose se produit.

componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

Il y a cependant un «piège»: un appel asynchrone pour récupérer des données ne retournera pas avant le rendu. Cela signifie que le composant sera rendu avec des données vides au moins une fois.

Il n'y a aucun moyen de «suspendre» le rendu pour attendre l'arrivée des données. Vous ne pouvez pas renvoyer une promesse de componentWillMount ou se disputer dans un setTimeout d'une manière ou d'une autre.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

notre Composant n'aura pas accès à l'interface utilisateur native (DOM, etc.). Nous n'aurons pas non plus accès aux refs enfants, car ils ne sont pas encore créés. Le componentWillMount () est une chance pour nous de gérer la configuration, de mettre à jour notre état et, en général, de préparer le premier rendu. Cela signifie que nous pouvons commencer à effectuer des calculs ou des processus basés sur les valeurs de prop.

Cas d'utilisation du composantWillMount ()

Par exemple, si vous souhaitez conserver la date de création du composant dans l'état de votre composant, vous pouvez le configurer dans cette méthode. Veuillez garder à l'esprit que la définition de l'état dans cette méthode ne rendra pas le DOM. Il est important de garder cela à l'esprit, car dans la plupart des cas, chaque fois que nous modifions l'état du composant, un nouveau rendu est déclenché.

componentWillMount() {
  this.setState({ todayDate: new Date(Date.now())});
}

Cas d'utilisation du componentDidMount ()

Par exemple, si vous créez une application d'actualités qui récupère des données sur les actualités en cours et les affiche à l'utilisateur et que vous souhaitez peut-être que ces données soient mises à jour toutes les heures sans que l'utilisateur n'ait à actualiser la page.

componentDidMount() {
  this.interval = setInterval(this.fetchNews, 3600000);
}

ComponentDidMount()La méthode ne modifie que la page actuelle dans les composants de classe mais ComponentWillMount()modifie toutes les pages effectuées parsetStates()