web-dev-qa-db-ja.com

Nextjs:ComponentWillMount vs getInitialProps

Reactアプリには next.js を使用しています。これは、サーバー側のレンダリングがあるためです。ログで確認したように、両方のメソッドComponentWillMountgetInitialPropsは両方ともサーバー側で実行されます。だから私の質問は次のとおりです。それらの方法の間に違いはありますか?いつComponentWillMountで実行すべきか、いつgetInitialPropsで実行すべきか。 Next.JSがこのことについて言及しているのは見当たりません。

37
Trần Kim Dự

GetInitialProps

  1. GetInitialPropsは通常、非同期関数であり、
    サーバーでの非同期操作。小道具としてページにデータを渡します。

  2. NextJsでは、常にサーバーで実行されます。リンクを使用してページが呼び出されると、クライアント側でのみ呼び出されます。

  3. コンポーネントではなくページでのみ使用できます。

ComponentWillMount

  1. これは、ライフサイクルフックであり、renderメソッドが呼び出される直前に呼び出されます。フェッチされたデータは、プロップとして渡すことはできません。

  2. コンポーネント内およびページ内で呼び出すことができます。非同期操作を完了するのを待たないため、非同期呼び出しを行うのに適した場所ではありません。サーバーで実行され、非同期操作がそのサーバーに書き込まれた場合、..完了せず、データを取得せずにクライアントに到達します。

21
Rajat Gupta

警告受け入れられた回答の50%が間違っている理由は次のとおりです。2つのセクションに回答を分けましょう。

パート1:

  1. GetInitialPropsは通常、サーバーでの非同期操作に適した非同期関数であり、データを小道具としてページに渡します。

  2. NextJsでは、サーバーで常に実行されます。リンクを使用してページが呼び出されると、クライアント側でのみ呼び出されます

間違った、GetInitialPropsが実行されますBOTHserverおよびbrowser(Next.jsの目標はユニバーサルJavaScriptを作成することであることを忘れないでください)、ここ文書の内容は次のとおりです。

それにより、リモートデータソースを介して特定のページのデータを取得し、それをページに小道具として渡すことができます。getInitialPropsサーバーとクライアントの両方で動作するため、Next.jsはクライアントとサーバーの両方で使用できます

パート2:

2番目のセクションでは、実際の質問にさらに正確に回答します。OPがComponentDidMountComponentWillMount。 Next.jsの場合、GetInitialPropsとComponentDidMountを比較する方が意味があります。どちらもデータを取得するために非同期呼び出しを行うことができ、また両方とも後でレンダリングを許可するためです(つまりnotComponentWillMount)の場合に可能です。

いずれにせよ、どちらを使用しても、いくつかの違いがあります。

GetInitialProps:Next.jsによって提供され、常にトリガーされるわけではないため、1つのコンポーネントを別のコンポーネントでラップすると発生します。親コンポーネントにGetInitialPropsがある場合、子のGetInitialPropsはトリガーされません。詳細については、 このスレッド を参照してください。

ComponentDidMount:React実装であり、ブラウザで常にトリガーされます。

「だからいつこれを使うべきなのか」と尋ねるかもしれませんが、実際には非常に紛らわしく、同時に非常に簡単です。

  • コンポーネントがページとして機能する場合にGetInitialPropsを使用してデータをフェッチし、データをPropsとして提供する場合。
  • 子コンポーネント(Pagesではない)でComponentDidMountを使用するか、Ajax呼び出し時に状態を更新する場合。
85
Marwen Trabelsi

componentWillMountComponent Lifecycleメソッドです。

ドキュメント

componentWillMount()は、マウントが発生する直前に呼び出されます。 render()の前に呼び出されるため、このメソッドでsetState()を同期的に呼び出しても、余分なレンダリングはトリガーされません。通常、代わりにconstructor()を使用することをお勧めします。このメソッドに副作用やサブスクリプションを導入しないでください。これらのユースケースでは、代わりにcomponentDidMount()を使用してください。これは、サーバーレンダリングで呼び出される唯一のライフサイクルフックです。

1
zooblin