Nextjs: ComponentWillMount vs getInitialProps

Question

J'utilise next.js pour mon application React car elle offre un rendu côté serveur. Comme j'ai vérifié par journal, les deux méthodes ComponentWillMount et getInitialProps s'exécutent toutes deux côté serveur. Ma question est donc la suivante: existe-t-il des différences entre ces méthodes? Quand dois-je courir dans ComponentWillMount et quand dois-je courir dans getInitialProps . Je ne vois pas Next.JS mentionne à propos de cette chose.

Answer 1

AVERTISSEMENT 50% de la accepté réponse est fausse, et voici pourquoi, permettez-moi de partager ma réponse en 2 sections:

Partie 1:

1. GetInitialProps est généralement un asynchrone en fonction de ce qui est bon pour les opérations asynchrones au serveur et transmet les données à la page comme accessoires de jeu.

2. Dans nextJs elle s'exécute toujours sur le serveur, si la page est appelée à l'aide de Lien, il est alors appelé par le client

Mal, GetInitialProps exécuté sur les DEUX serveur et le navigateur (rappelez-vous le but de Next.js est de rendre universel JavaScript), voici ce que le doc a dit:

Avec cela, nous pouvons récupérer les données pour une page donnée via une source de données distante et de le passer comme accessoires sur notre page. Nous pouvons écrire notre getInitialPropsà travail sur le serveur et sur le client. Donc, Next.js pouvez l'utiliser à la fois le client et le serveur.

Partie 2:

La deuxième section est de répondre à la question avec plus de précision, il est clair que l'OP a obtenu la confusion entre ComponentDidMount et ComponentWillMount. parce que dans le Next.js cas, il est plus logique de comparer GetInitialProps VS ComponentDidMount comme ils sont tous deux en mesure de faire appel Asynchrone pour récupérer les données, et ils permettent à la fois de rendu par la suite ( ce qui n'est pas possible dans le cas de ComponentWillMount).

En tout cas si vous utilisez l'un ou l'autre, il y a quelques différences:

GetInitialProps: est fourni par Next.js et il n'est PAS toujours déclenché, donc soyez prudent avec cela, il se passera lorsque vous enveloppez 1 composant à l'intérieur de l'autre. Si le Composant parent a GetInitialProps, l'enfant GetInitialProps ne sera jamais déclenché, voir ce fil pour plus d'info.

ComponentDidMount: est de Réagir de la mise en œuvre et il est toujours déclenché sur le Navigateur.

Vous pourriez vous demander, "quand dois-je utiliser ceci ou cela", effectivement c'est très déroutant et en même temps très simple, voici une règle de base:

• utilisation GetInitialProps pour récupérer des données lorsque votre composant agit comme un Page, et vous souhaitez fournir les données que les Accessoires.
• utilisation ComponentDidMount sur les enfants des composants ( qui ne sont pas les Pages ) ou lorsque vous souhaitez mettre à jour l'état lors de l'appel Ajax.

Answer 2

GetInitialProps

1. GetInitialProps est généralement un asynchrone en fonction de ce qui est bon pour
   les opérations asynchrones au serveur et transmet les données à la page comme accessoires de jeu.

2. Dans nextJs elle s'exécute toujours sur le serveur, si la page est appelée à l'aide de Lien, il est alors appelé par le client.

3. Il ne peut être utilisé dans les pages pas dans les composants.

ComponentWillMount

1. c'est un lifecyle crochet, elle est callled juste avant le rendu de la méthode est appelée .Les données extraites ne peut pas être transmis sous la forme d'une hélice.

2. il peut être appelé en composant ainsi que dans les pages. il a pas un bon endroit pour faire appel asynchrone, comme il n'attendez async opération à réaliser. donc, si il s'exécute sur le serveur et votre opération asynchrone est écrit ..n'obtiendrez pas terminé et il s'agit pour le client sans l'obtention de données.

Answer 3

componentWillMount est le Composant du Cycle de vie des méthodes.

Selon la documentation

componentWillMount() est appelée juste avant le montage se produit. Elle est appelée avant render(), par conséquent appelant setState() de manière synchrone dans cette méthode ne permet pas de déclencher un supplément de rendu. En règle générale, nous recommandons l'utilisation de l' constructor()à la place. Éviter d'introduire des effets secondaires ou des abonnements dans cette méthode. Pour ces cas d'utilisation, utilisez componentDidMount()à la place. C'est le seul cycle de vie du crochet appelé sur un serveur de rendu.