ページを表示する前にすべてのコンポーネントのロードを完了してください - React JS

Question

これは私の現在のシナリオです。私のホームページはHTTPリクエストを使って複数のコンポーネントを構成しています。すべてのコンポーネントがHTTPリクエストを完了した場合にのみページを表示できますか？

ありがとうございます！

P.S.私はWebアプリをどのように開発するのか、私の計画段階に入ってからまだ表示するコードはありません。

Answer 1

あなたのアプリはまだコード化されていないので、より良いコンポーネント構造を採用することができます。 これは私が見てやり遂げたアプローチです。

1.最初の場所で必要ありませんグローバルローダー -

あなたの各コンポーネントは、以下に示すようにアプリのシェルarchitechtureの使用と同様に、データがロードされる前でも、レンダリング処理することができます。 Facebookのポストの ロードシェルは
コード

class Post extends React.Component { 
     render() { 
     return this.props.isLoading ? (
      <div className="post">...</div> 
     ) : (
      <div className="post-shell"></div> 
     ); 
     } 
    } 

2.グローバル・ローダー

コードのようになります

class App extends React.Component { 
     render() { 
     return this.props.isLoading ? (
      <RootComponent {...props}> 
     ) : (
      <Loader /> 
     ); 
     } 
    } 

Loaderコンポーネントは、絶対位置のローディングアイコンがある

/コンテンツ。 RootComponentは、すべての小道具に必要なデータがあるように、データが読み込まれるときにのみマウントされます。

多くのプロジェクトは、コンポーネントが対応するシェルで記述されていないため、前者には贅沢はありません。しかし、あなたは時間によって制約されていないからです。最初のアプローチは最高のUXを提供します。