Quelle est la différence entre componentWillMount et componentDidMount dans ReactJS?
J'ai regardé Facebook de la documentation à https://facebook.github.io/react/docs/component-specs.html et il mentionne comment componentWillMount est appelée sur le client/serveur alors que componentDidMount est invoquée uniquement sur le client. Ce n'componentWillMount faire pour le serveur?
Vous devez vous connecter pour publier un commentaire.
componentWillMount est essentiellement le constructeur. Vous pouvez définir des propriétés d'une instance qui n'affectent pas le rendu, extraire des données à partir d'un magasin de façon synchrone et setState avec elle, et d'autres de simples sans effets secondaires le code à exécuter lors de la configuration de votre composant.
Il est rarement nécessaire, et pas du tout avec ES6 classes.
la
constructor
méthode n'est pas le même quecomponentWillMount
.Selon l'auteur de Redux, c'est risqué pour l'expédition des actions du constructeur, car il peut entraîner la mutation de l'état pendant le rendu.
Cependant, l'envoi d'
componentWillMount
est tout simplement parfait.de github problème:
componentXxxMount
, par exemple, Ajax danswillMount
peuvent causer des problèmes.À ajouter à ce que FakeRainBrigand dit,
componentWillMount
est appelée lors du rendu de Réagir sur le serveur et sur le client, maiscomponentDidMount
est appelée uniquement sur le client.componentWillMount
sera appelé sur le serveur et le client. voir: facebook.github.io/réagir/docs/...componentWillMount
sera pas appelée sur le clientcomponentWillMount
est fait avant la premièrerender
d'un composant, et est utilisée pour évaluer des accessoires et de la faire tout de la logique supplémentaire basé sur eux (généralement également de mettre à jour l'état), et en tant que telle peut être effectuée sur le serveur afin d'obtenir le premier côté serveur rendus de balisage.componentDidMount
est effectuée APRÈS la premièrerender
lorsque le DOM a été mis à jour (mais, aussi et surtout AVANT de ce DOM mise à jour est peint pour le navigateur, vous permettant de faire toutes sortes d'interactions avancées avec le DOM lui-même). Bien sûr, cela ne peut se faire que dans le navigateur lui-même et n'a donc pas de se produire dans le cadre de la SSR, en tant que le serveur ne peut que générer de balisage et de ne pas les DOM lui-même, pour ce faire, après il est envoyé vers le navigateur si vous utilisez SSRDes interactions avec les DOM-vous dire? Whaaaat??... Hé oui, à ce point parce que les DOM a été mis à jour (mais l'utilisateur n'a pas vu la mise à jour dans le navigateur, il est possible d'intercepter la peinture à l'écran à l'aide
window.requestAnimationFrame
et puis faire des choses comme mesurer les véritables éléments du DOM de sortie, à laquelle vous pouvez effectuer d'autres modifications de l'état, super utile, par exemple, l'animation d'une hauteur d'un élément inconnu de longueur variable contenu (que vous pouvez maintenant mesurer le contenu et attribuer une hauteur à l'animation), ou pour éviter de flash de contenu scénarios au cours de certaines de changement d'état.Être très prudent à la garde des modifications de l'état dans tout
componentDid...
contraire, il peut provoquer une boucle infinie, car un changement d'état va également provoquer un nouveau rendu, et donc un autrecomponentDid...
et sur et sur et sursetState
danscomponentDidMount
va provoquer une boucle infinie.Que par la documentation ( https://facebook.github.io/react/docs/react-component.html )
Méthodes avec le préfixe sera sont appelés juste avant il se passe quelque chose
et
Méthodes avec le préfixe ne sont appelés rde vol après il se passe quelque chose.
did
etwill
😉componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/
https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html
notre Composant n'auront pas accès à l'INTERFACE Natifs (DOM, etc.). Nous n'avons accès aux enfants, refs, parce qu'ils ne sont pas encore créé.
Le componentWillMount() est une chance pour nous de gérer la configuration, la mise à jour de notre état, et en général pour se préparer pour le premier rendu.
Cela signifie que nous pouvons commencer à effectuer des calculs ou des processus basés sur le prop valeurs.