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 に存在しない値が使用された場合でもエラーは報告されません。

最終まとめ

1. Reactコンポーネントの構築とマウントはルート要素から子要素に向かって行われるため、データフローは上から下になります。マウントが完了し、子要素からルート要素にステータスが更新されます。このとき、最新のステータスをルート要素に渡すことができます。

2. コンポーネントと DOM 要素の違いの 1 つは、DOM 要素は現在の場所に作成されるのに対し、React コンポーネントは階層順に構築およびレンダリングされることです。

上記はReactネストコンポーネントの構築手順の詳細内容です。Reactネストコンポーネントの構築の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • 簡潔なReactコンポーネントを書くためのヒント
  • フックを使用して React コンポーネントを書くときに注意すべき 5 つの点
  • Reactはラジオコンポーネントのサンプルコードを実装します
  • ReactとAntdのFormコンポーネントを組み合わせてログイン機能を実装する方法を詳しく説明します
  • Reactフックとzarmコンポーネントライブラリ構成に基づいてh5フォームページを開発するためのサンプルコード
  • React antd タブの切り替えによりサブコンポーネントが繰り返し更新される
  • react-antd でポップアップ フォームのコンテンツを親コンポーネントに渡す方法
  • Reactプロジェクトでantdのフォームコンポーネントを使用して、入力ボックスの値を動的に設定する
  • Reactはチェックボックスの選択と選択解除のコンポーネント効果を実装します
  • React高階コンポーネントを使用してパンくずナビゲーションを実装する例
  • Reactコンポーネントのライフサイクルの例
  • 例付きのReactコンポーネント
  • Reactの親コンポーネントと子コンポーネント間のデータ転送の詳細な説明

<<:  SQL インジェクションのある Web サイトを見つける方法 (必読)

>>:  2019 年に最も役立ち重要なオープンソース ツール トップ 10

推薦する

1つのコマンドで、シェルの読み取りコマンドの共通パラメータを理解できます。

Shell で受信パラメータを受信する方法は 2 つあることがわかっています。 1 つはスクリプト...

React コンポーネントのコンストラクタとスーパーの知識ポイントのまとめ

1. Reactでクラス宣言する際のヒント 上記のように、Child クラスは class キーワー...

Vueを使用して天気コンポーネントをロードする方法の詳細な説明

この記事では、Vueを使用して天気コンポーネントをロードする方法を参考までに紹介します。具体的な内容...

フィルターを使用して画像に透明な CSS を書く方法

フィルターを使用して画像に透明な CSS を書く方法コードをコピーコードは次のとおりです。 html...

CSS ファンタスティックボーダーアニメーション効果の実装

今日、私はブログサイト shoptalkshow を閲覧していて、非常に興味深いこのインターフェース...

HTML テーブルタグチュートリアル (33): セルの垂直配置属性 VALIGN

垂直方向では、セルの配置を上、中央、下に設定できます。基本的な構文<TD VLIGN=&quo...

経験豊富な人が、プロフェッショナルで標準化されたMySQL起動スクリプトの開発方法を紹介します。

シェル スクリプト言語は、すべてのプログラミング言語の中で最も単純な言語であるため、資格のある Li...

Vueフォームで画像を処理する方法

質問: Vue にブログ投稿をアップロードするためのフォームがあり、タイトル、本文、説明、スニペット...

UbuntuでOpenCVをコンパイルしてインストールする方法

opencv2 の簡単なインストール: conda インストール --channel https:/...

MySql におけるプロセス制御関数/統計関数/グループ化クエリの使用法の分析

これからの道のりは長く困難ですが、私は探求を続けます。また週末がやってきました。引き続き、皆さんと一...

Vue での props の使い方の紹介

序文: Vue では、props を使用して、もともと分離されていたコンポーネントを直列に接続するこ...

1 つの記事で v-model とその修飾子を学ぶ

目次序文v-model の修飾子:怠け者トリム番号さまざまな入力タイプやその他の要素での v-mod...

CSS ボーダーは四隅の実装コードを追加します

1.html <div class="ログインボディ"> <...

企業サイトとコラム辞典 中国語と英語の比較 中国語と英語のバイリンガル企業サイトを作る仲間は

名前キャラクター名前キャラクター情報ニューステクノロジー技術スキンケアスキンケア補う補う香水香水化粧...

Vueコンポーネントの7つの通信方法についての深い理解

目次1. props/$emit導入コードサンプル2.Vスロット導入コードサンプル3.$refs/ ...