Où placer les requêtes http de réaction

Les requêtes http React doivent être placées dans composantDidMount pour le fonctionnement, qui concerne les requêtes asynchrones ; pour les changements d'état synchrones, les requêtes réseau de réaction peuvent être placées dans composantWillMount, qui est généralement moins utilisé.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Où sont placées les requêtes http de réaction ? Dans quel cycle de vie les requêtes réseau React doivent-elles être placées ?

En général, pour les requêtes asynchrones, il est préférable de les exploiter dans composantDidMount. Pour les changements d'état synchrones, elles peuvent être placées dans composantWillMount, qui est généralement moins utilisé.

Si vous pensez que le lancement d'une requête dans ComponentWillMount peut obtenir des résultats plus tôt, cette idée est en fait fausse. Habituellement, ComponentWillMount n'est pas plusieurs microsecondes plus tôt que ComponentDidMount. Tout retard sur le réseau, cette différence est négligeable.

Regardez le cycle de vie de React :

constructor() ----> componentWillMount() ----> render() ----> componentDidMount()

Les méthodes ci-dessus sont appelées dans l'ordre, de haut en bas.

Le constructeur est appelé au tout début lorsque le composant est prêt à être monté. A ce moment, le composant n'a pas encore été monté sur la page web.

La méthode composantWillMount est appelée après le constructeur et avant le rendu. Le code de cette méthode appelant la méthode setState ne déclenchera pas de nouveau rendu, il n'est donc généralement pas utilisé pour charger des données.

Le code de la méthode composantDidMount ne sera appelé et exécuté qu'une fois le composant complètement monté sur la page Web, afin que le chargement des données puisse être garanti. De plus, l’appel de la méthode setState dans cette méthode déclenchera un nouveau rendu. Par conséquent, cette méthode est officiellement conçue pour charger des données externes ou gérer d’autres codes d’effets secondaires. Un chargement qui n'a rien à voir avec les données sur le composant peut également être effectué dans le constructeur, mais le constructeur est responsable de l'initialisation de l'état du composant, le chargement des données ne peut pas être défini dans le constructeur et le temps de chargement est trop long. ou Si une erreur se produit, la page ne peut pas être chargée. Par conséquent, le code avec des effets secondaires sera concentré dans la méthode composantDidMount.

Résumé :

1. Cela est lié au rendu côté serveur (isomorphisme). Si les données sont obtenues dans ComponentWillMount, la récupération des données sera exécutée deux fois, une fois côté serveur et une fois côté client. Ce problème peut être résolu dans ComponentDidMount. ComponentWillMount sera également rendu deux fois.

2. Récupérez les données dans ComponentWillMount. Les données doivent arriver après le rendu. Si vous oubliez de définir l'état initial, l'expérience utilisateur sera mauvaise.

3. Après React16.0, ComponentWillMount peut être exécuté plusieurs fois.

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!