は、アプリを私は実行順序

Question

について混乱反応し、私は、このようなウィンドウサイズを取得するなどの基本的な機能を実行するapp.jsxコンポーネントを持って、API関数を呼び出すことにより、ユーザ情報を読み、など

これは本当にトップレベルでありますエントリポイントのコンポーネント。これは私のエントリポイントは次のようになります。私が混乱している何

render (
    <Provider store={store}> 
     <App> 
      <HomePageComponent /> 
     </App> 
    </Provider>, 
    document.getElementById('app') 
); 

は、ホーム・ページ・コンポーネントで、私はサブコンポーネントの束を持っているということです。ホームページ内のサブコンポーネントのcomponentDidMount()機能がの前にを実行しているように見え、AppコンポーネントのcomponentDidMount()機能です。

これは正常に動作するはずですか？内側から？私は最初に実行すると考えているAppコンポーネント内のユーザー情報を取得するような基本的なハウスメンテ機能を入れていました。

Answer 1

はい、これは予想される動作です。 this号にそれについての議論があります。

いくつかのハイライト：

componentDidMountが親-最初に実行した場合、すべての子ノードが、この時点でマウントされていないので、あなたは見つけるだろう唯一のことは、あなたのノードがあります。これにより、componentDidMountは大部分のユースケース（たとえば、offsetWidthのカウント、サードパーティの非リアクションプラグインの追加など）では役に立たなくなります。 （ガーソン）

これはバグではありませんが、多分混乱しているドキュメントです。これはDOM要素の作成順序です。とにかく（ルートがドキュメントから外れる可能性があるので）私たちが保証することはできないので、ドキュメント内にあるかどうかは関係ありません。 （sebmarkbage）

テクニカルライフサイクルメソッドは、特定のコンポーネントがマウントされていることを保証します。それは子供たちに関して何の約束もしていない。この順序に依存することは、通常、コンポーネントのカプセル化境界を壊していることを示しています。あなたのcookingsのための最初の操作をロードする（sebmarkbage）

Answer 2

使用

コンストラクタ（）メソッド。 後でより良く理解するために

はい、これは動作するようになっています方法です React Component Life Cycle

Answer 3

を参照してください。..ようにあなたのcomponentDidMount（）操作を提供して。これは、JSXのような問題ではありません。 JSXは関数呼び出しに変換するだけです。それはちょうど、次のようなものだ

React.createElement(
    Provider, 
    { store: store }, 
    React.createElement(
     App, 
     null, 
     React.createElement(HomePageComponent, null) 
    ) 
); 

：あなたのコードが変身例えば、その例で

doSomethingSecond(doSomethingFirst()); 

、doSomethingFirstが最初に実行され、結果はdoSomethingSecondへの引数として渡されます。同様に、JSXで変換されたコードでは、React.createElement(HomePageComponent, null)が最初に実行され、結果はラップされたReact.createelementコールの引数として渡されます。

JSXがJSに変換される仕組みを、Babel's siteで知ることができます。