React.jsでコンポーネントを順番にロードする理想的な方法

Question

React.jsのコンポーネント読み込みに関する質問があります。

コンポーネントを特定の順序でロードする方法はありますか。たとえば、私は単一ページのウェブサイトの各ページのコンポーネントを持っています。
私は<homepage />をしたいと思いますし、それは画像が、その後<profile />、<works />よりも最初にロードすることだ、というように...
ユーザーが最初に私のサイトにアクセスすると、ホームページが瞬時に（あるいは本当にすぐ）ロードするということでアイデアと休息彼らは潜在的にスクロールを開始する前に、少なくともユーザが見るべき何かを持っています。

私はgoogleに「react.jsでコンポーネントを順番にロードする」ことを試みましたが、運はありませんでした。

class MainContent extends React.Component { 

    componentDidMount() { 
    console.log("component mounted"); 
    } 

    render() { 
    return(
     <div className="main-content"> 

     <ul className="block"> 
      <HomePage /> 
      <ProfilePage /> 
      <WorksPage /> 
      <ContactPage /> 
      <BlogPage /> 
     </ul> 

     </div> 
    ) 
    } 
} 

私の最初のアイデアは<Homepage />がロードされたときにtrueにブール状態を切り替えるでしょう<componentDidMount />機能で約束を持っているだろう。

<Homepage /> 

{ 
    this.state.loaded ? 
    <ProfilePage /> 
    <WorksPage /> 
    <ContactPage /> 
    <BlogPage /> 
    : 
    null 
    ; 
} 

私は思考のその列と右のトラックにアム？

ご迷惑をおかけして申し訳ありません。
ありがとう、
萌え

Answer 1

あなたはうまくやっています。

componentDidMount（）成分は が装着された直後に呼び出される：recommendedアプローチです。 DOMノードを必要とする初期化はここに行かなければなりません。 あなた は、リモートエンドポイントからのデータをロードする必要がある場合、これはネットワーク要求をインスタンス化 に良い場所です。このメソッドで状態を設定すると、 が再レンダリングをトリガーします。

最初にrenderメソッドでは、ただちに利用できるUI上の部分だけをレンダリングします。 componentDidMount - fireを呼び出し、残りのデータを取得することを約束し、その後setStateを呼び出してUIをリフレッシュして完全に表示します。