Puis-je appeler les Api dans componentWillMount à Réagir?
Je travaille à réagir pendant une durée de 1 an. La convention qui nous suivent, c'est de faire un appel d'API dans componentDidMount
, de récupérer les données et setState après les données de la est venu. Cela permettra d'assurer que le composant a monté et réglage de l'etat sera la cause d'une re-rendre le composant, mais je veux savoir pourquoi on ne peut pas setState dans componentWillMount
ou constructor
La documentation officielle dit que :
componentWillMount() est appelée juste avant le montage se produit. Il
est appelé avant que le render(), par conséquent, la création de l'état dans cette méthode
ne pas déclencher un nouveau rendu. Éviter d'introduire des effets secondaires ou des
les abonnements dans cette méthode.
il dit setting state in this method will not trigger a re-rendering
, que je ne veux pas tout en faisant un appel d'API. Si je suis en mesure d'obtenir les données et en mesure de mettre en l'état (en supposant que les appels d'API sont vraiment rapide) dans componentWillMount
ou dans constructor
et les données sont présentes dans le premier rendu, pourquoi voudrais-je un nouveau rendu à tous?
et si l'appel d'API est lent, alors setState
sera async et componentWillMount
a déjà retourné alors je vais être en mesure de setState et un nouveau rendu devrait se produire.
Dans l'ensemble, je suis assez confus pourquoi nous ne devrions pas faire des appels de l'API dans le constructeur ou componentWillMount. Quelqu'un peut-il vraiment m'aider à comprendre comment réagir fonctionne dans ce cas?
- Faire les appels de l'API dans
componentWillMount
si vous avez besoin qui n'est pas une mauvaise idée, mais il n'est pas possible d'avoir la réponse de l'API et de l'ensemble approprié de l'état avant la première de rendu va être appelé. - si votre API passe par une nouvelle mise en mémoire cache couche, vous pouvez être en mesure d'obtenir une mise en cache le résultat de votre requête synchrone.
- Related post ici.
Vous devez vous connecter pour publier un commentaire.
1.
componentWillMount
et re-renduComparer ces deux
componentWillMount
méthodes.L'une des causes supplémentaires de rendre à nouveau, on n'a pas
.
.
.
2. Où d'invoquer des appels d'API?
Si vous êtes rendu sur le serveur et votre composant n'est besoin de données pour le rendu, vous devriez chercher (et attendre la fin) à l'extérieur de la composante et de transmettre des données thru accessoires et de rendre le composant à la chaîne par la suite.
ComponentWillMount
Que les moyens de Réagir attend
state
à être disponible enrender
fonction sera appelée à côté et le code peut se briser si tout mentionné variable d'état est manquant, qui peut se produire en cas deajax
.Constructeur
Si l'Appel ajax ne mettra pas à jour les valeurs de n'importe quel état de l'ajax est asynchrone et le constructeur ne va pas attendre la réponse. Idéalement, vous devez utiliser le constructeur pour définir par défaut/initiale valeurs.
Idéalement, ces fonctions doivent être fonction pure, uniquement en fonction des paramètres. Apportant
ajax
apporte des effets secondaires de la fonction.Oui, fonctions dépendent de
state
et à l'aide dethis.setState
peut vous apporter de telles questions (Vous avez mis en valeur dans l'état, mais la valeur est manquante dans l'état suivant appelle la fonction).Cela rend le code fragile. Si votre API est vraiment rapide, vous pouvez passer cette valeur comme argument et dans votre composant, vérifiez si c'arg est disponible. Si oui, utilisez-vous l'état avec elle. Sinon, mis à défaut. Aussi, en cas de succès de la fonction de l'ajax, vous pouvez vérifier pour
ref
de ce composant. Si il existe, le composant est rendu et vous pouvez appeler sastate
à l'aide desetState
ou toutsetter
(préféré) de la fonction.Rappelez-vous aussi, quand vous dites appels d'API sont vraiment rapide, votre serveur et le traitement peut être à la vitesse optimale, mais vous ne pouvez jamais être sûr avec le réseau.
componentWillMount
causent des difficultés?Si vous avez juste besoin de données seulement à la première exécution, et si vous êtes ok avec ça. Vous pouvez setState de manière synchrone via l'appel d'une fonction de rappel.
pour exemple: