Reactアプリには next.js を使用しています。これは、サーバー側のレンダリングがあるためです。ログで確認したように、両方のメソッドComponentWillMount
とgetInitialProps
は両方ともサーバー側で実行されます。だから私の質問は次のとおりです。それらの方法の間に違いはありますか?いつComponentWillMount
で実行すべきか、いつgetInitialProps
で実行すべきか。 Next.JSがこのことについて言及しているのは見当たりません。
GetInitialProps
GetInitialPropsは通常、非同期関数であり、
サーバーでの非同期操作。小道具としてページにデータを渡します。
NextJsでは、常にサーバーで実行されます。リンクを使用してページが呼び出されると、クライアント側でのみ呼び出されます。
コンポーネントではなくページでのみ使用できます。
ComponentWillMount
これは、ライフサイクルフックであり、renderメソッドが呼び出される直前に呼び出されます。フェッチされたデータは、プロップとして渡すことはできません。
コンポーネント内およびページ内で呼び出すことができます。非同期操作を完了するのを待たないため、非同期呼び出しを行うのに適した場所ではありません。サーバーで実行され、非同期操作がそのサーバーに書き込まれた場合、..完了せず、データを取得せずにクライアントに到達します。
警告受け入れられた回答の50%が間違っている理由は次のとおりです。2つのセクションに回答を分けましょう。
パート1:
GetInitialPropsは通常、サーバーでの非同期操作に適した非同期関数であり、データを小道具としてページに渡します。
NextJsでは、サーバーで常に実行されます。リンクを使用してページが呼び出されると、クライアント側でのみ呼び出されます
間違った、GetInitialPropsが実行されますBOTHserverおよびbrowser(Next.jsの目標はユニバーサルJavaScriptを作成することであることを忘れないでください)、ここ文書の内容は次のとおりです。
パート2:
2番目のセクションでは、実際の質問にさらに正確に回答します。OPがComponentDidMountとComponentWillMount。 Next.jsの場合、GetInitialPropsとComponentDidMountを比較する方が意味があります。どちらもデータを取得するために非同期呼び出しを行うことができ、また両方とも後でレンダリングを許可するためです(つまりnotComponentWillMount)の場合に可能です。
いずれにせよ、どちらを使用しても、いくつかの違いがあります。
GetInitialProps:Next.jsによって提供され、常にトリガーされるわけではないため、1つのコンポーネントを別のコンポーネントでラップすると発生します。親コンポーネントにGetInitialPropsがある場合、子のGetInitialPropsはトリガーされません。詳細については、 このスレッド を参照してください。
ComponentDidMount:React実装であり、ブラウザで常にトリガーされます。
「だからいつこれを使うべきなのか」と尋ねるかもしれませんが、実際には非常に紛らわしく、同時に非常に簡単です。
componentWillMount
はComponent Lifecycleメソッドです。
componentWillMount()
は、マウントが発生する直前に呼び出されます。 render()
の前に呼び出されるため、このメソッドでsetState()
を同期的に呼び出しても、余分なレンダリングはトリガーされません。通常、代わりにconstructor()
を使用することをお勧めします。このメソッドに副作用やサブスクリプションを導入しないでください。これらのユースケースでは、代わりにcomponentDidMount()
を使用してください。これは、サーバーレンダリングで呼び出される唯一のライフサイクルフックです。