Nextjs: ComponentWillMount vs getInitialProps
J'utilise next.js pour mon React app car elle a un rendu côté serveur. Comme j'ai vérifié par le journal, les deux méthodes ComponentWillMount et getInitialProps les deux s'exécutent côté serveur. Ma question est donc la suivante: existe-t-il des différences entre ces méthodes? Quand dois-je exécuter dans ComponentWillMount et quand dois-je exécuter dans getInitialProps? Ne voyez pas Next.JS mentionne à propos de cette chose.
GetInitialProps
GetInitialProps est généralement une fonction asynchrone qui convient à
Opérations asynchrones sur le serveur et transmet les données à la page en tant que props.Dans nextJs, elle est toujours exécutée sur le serveur. Si la page est appelée via Link, elle n’est appelée que du côté client.
Il ne peut être utilisé que dans des pages, pas dans des composants.
ComponentWillMount
il s'agit d'un crochet de cycle de vie appelé avant que la méthode de rendu ne s'appelle. Les données extraites ne peuvent pas être transmises en tant que prop.
il peut être appelé aussi bien en composant qu'en pages. ce n'est pas un bon endroit pour faire un appel asynchrone car il n'attend pas l'opération asynchrone pour se terminer. Donc, s'il fonctionne sur le serveur et que votre opération asynchrone y est écrite, elle ne sera pas terminée et le client ne recevra pas de données.
[~ # ~] avertissement [~ # ~] 50% de la réponse acceptée est fausse. Voici pourquoi, laissez-moi diviser ma réponse en 2 sections:
Partie 1:
GetInitialProps est généralement une fonction asynchrone qui convient aux opérations asynchrones sur le serveur et transmet les données à la page sous forme d'accessoires.
Dans nextJs, elle est toujours exécutée sur le serveur. Si la page est appelée via Link, elle n’est appelée que du côté client.
Wrong , GetInitialProps est exécuté sur [~ # ~] les deux [~ # ~] serveur et navigateur (rappelez-vous l'objectif de Next.js est de rendre JavaScript universel), voici ce que dit la doc:
Partie 2:
La deuxième section vise à répondre plus précisément à la question, il est clair que le PO a été confondu entre ComponentDidMount et ComponentWillMount . Parce que dans le cas de Next.js, il est plus logique de comparer GetInitialProps VS ComponentDidMount car ils sont tous deux capables de faire un appel asynchrone pour récupérer des données, et ils autorisent également le rendu ultérieur (ce qui est pas possible dans le cas de ComponentWillMount ).
Dans tous les cas, vous utilisez l'un ou l'autre, il y a peu de différences:
GetInitialProps : est fourni par Next.js et n'est PAS toujours déclenché. Soyez donc prudent, cela se produit lorsque vous insérez 1 composant dans un autre. Si le composant parent a GetInitialProps, les GetInitialProps de l'enfant ne seront jamais déclenchés, voir ce fil pour plus d'informations.
ComponentDidMount : React l'implémentation et il est toujours déclenché sur le navigateur.
Vous pourriez vous demander: "Alors, quand devrais-je utiliser ceci ou cela?", En fait c'est très déroutant et en même temps très simple, voici une règle de base:
- utilisez GetInitialProps pour extraire des données lorsque votre composant agit comme une page et que vous souhaitez fournir les données sous forme d'accessoires.
- utilisez ComponentDidMount sur des composants enfants (qui ne sont pas des pages) ou lorsque vous souhaitez mettre à jour l'état lors d'un appel Ajax.
componentWillMount est la méthode du cycle de vie du composant .
Selon documentation
componentWillMount() est appelé immédiatement avant le montage. Il est appelé avant render(); par conséquent, l'appel de setState() de manière synchrone dans cette méthode ne déclenchera pas de rendu supplémentaire. En règle générale, nous vous recommandons d'utiliser la fonction constructor(). Évitez d’introduire des effets secondaires ou des abonnements dans cette méthode. Pour ces cas d'utilisation, utilisez componentDidMount() à la place. Il s'agit du seul hook de cycle de vie appelé sur le rendu du serveur.