React のネストされたコンポーネントの構築順序

Reactの公式サイトではライフサイクルの説明を見ることができます
次に、ネストされたコンポーネントを見てみましょう。
次に、複数のコンポーネントを渡す方法を見てみましょう
ビルドの概要
少し話がそれますが
最終まとめ

Reactの公式サイトではライフサイクルの説明を見ることができます

ここでの疑問は、ネストされたコンポーネントでは、親コンポーネントが最初に構築されるのか、それとも子コンポーネントが最初に構築されるのかということです。子コンポーネントを最初に更新する必要がありますか、それとも親コンポーネントを更新する必要がありますか?

この問題を解決するには、まず単一の要素をネストすることから始めます。以下はDOM要素のみを持つコンポーネントの親です

関数親(){
  戻る （
    <div>子</div>
  ）
}

上記の要素の場合、React は React.createElement を呼び出してオブジェクトを作成します。これは子要素の構築フェーズです (ここでは babeljs.io が使用されています)

React.createElement("div", null, "child")

ビルドが終わったらレンダリングと更新を行います

次に、ネストされたコンポーネントを見てみましょう。

関数Child() {
  <div>子</div> を返す
}
関数親(){
  戻る （
   <Child>親子</Child>
  ）
}

ReactはReact.createElementを呼び出し、以下のパラメータを渡します。

関数Child() {
  React.createElement("div", null, "child") を返します。
}

関数親() {
  React.createElement(Child, null, "親子") を返します。
}

ここでは、親子コンポーネントの構築プロセスを見ることができます。まず、現在のコンポーネントが構築され、次にコンポーネントに入り、構築が続行されます。従う原則は上から下です。

次に、複数のコンポーネントを渡す方法を見てみましょう

関数Child() {
  <div>子コンポーネント</div>を返します。
}
関数親(){
  戻る （
    <div>
     <div>div 要素</div>
     <子供 />
    </div>
  ）
}

以下のパラメータがReact.createElementに渡されます

React.createElement("div"、null、React.createElement("div"、null、"div\u5143\u7D20")、React.createElement(Child、null))
React.createElement("div", null, "child\u7EC4\u4EF6")

さらに、サブコンポーネントの構築は親コンポーネントとは別であり、親コンポーネントが構築された後に作成されることも明確にすることができます。親子コンポーネントの構築順序は、親コンポーネントのコンストラクタ、レンダリング子コンポーネントのコンストラクタ、レンダリングです。

子コンポーネントがレンダリングされると、componentDidMountが呼び出されます。

ビルドの概要

複数のコンポーネントの場合、まず親要素のコンストラクタが初期化され、マウントが開始され、次にレンダリングが呼び出されます。

DOM 要素の場合は、すぐに作成されます。React コンポーネントの場合は、後でコンポーネントに入力され、前のコンストラクター、構築、レンダリングが最後の子要素まで繰り返されます。

最後の子コンポーネントがレンダリングされると、componentDidMount が呼び出されます。つまり、要素がマウントされました。次にレイヤーごとに上がっていき、componentDidMountを順番に呼び出します。

少し話がそれますが

次のコードは上記の内容を理解するのに役立ちます

// RenderChild の機能は、値を受け取ったときに子要素をレンダリングし、値がない場合には他の要素をレンダリングすることです。function RenderChild(props){
  戻る （
    props.a ? props.children : <div>aaaa</div>
  ）
}

記述方法1（DOM要素を直接レンダリングする）:
関数親(){
  a = undefined とします。
  タイムアウトを設定する(() => {
    a = { b: 1 };
  });
  戻る （
    <RenderChild val={a}>
      <div>{ab}</div>
    </レンダー子>
  ）
}

記述方法2（レンダリングコンポーネント）:
関数Child(props) {
  <div>{props.ab}</div> を返します
}

関数親(){
  定数a = 未定義;
  タイムアウトを設定する(() => {
    a = { b: 1 };
  });
  戻る （
    <RenderChild val={a}>
      <子 childVal={a} />
    </レンダー子>
  ）
}

上記の2つの書き方のうち、最初の書き方は間違いなくエラーを報告します

最初のビルドパラメータは

React.createElement(RenderChild, { val: a }, React.createElement("div", null, ab))
現時点では、aはまだ定義されていません

2番目のビルドパラメータは

関数RenderChild(props) {
  props.val を返します。props.children: React.createElement("div", null, "aaaa");
}

関数Child(props) {
  React.createElement("div", null, props.value.b); を返します。
}
React.createElement(RenderChild, { val: a }, React.createElement(Child, {
    値:
 }));

Child は RenderChild の後に構築されるため、Child に存在しない値が使用された場合でもエラーは報告されません。