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

推薦する

Node.js でのブレークポイント再開の実装

序文通常のビジネスニーズ: 写真、Excel などをアップロードします。結局のところ、数 MB のサ...

MySQLテーブル構造を変更するコマンドを表示する

簡単な説明エディターはデータベースのエンコードが間違っているために問題に遭遇することが多く、これは頭...

IE で UTF8 エンコードされたページで行が理由もなく空白のままになり、UTF8 ページが表示されない問題の解決方法

理由は、すべてのファイルが utf8 でエンコードされているためです。ファイルがインクルードされると...

Dockerイメージの作成Dockerfileとコミット操作

イメージを構築するイメージを構築するには、主に 2 つの方法があります。実行中のコンテナをイメージに...

mysql 実行プラン ID が空である (UNION キーワード) の詳細な説明

導入作業プロセス中に、遅いクエリが調整されることがあります。 MySQL SQL ステートメントのチ...

MySQL コード実行構造例の分析 [シーケンス、分岐、ループ構造]

この記事では、例を使用して MySQL コード実行構造について説明します。ご参考までに、詳細は以下の...

データベースアカウントのパスワード暗号化の詳細な説明と例

データベースアカウントのパスワード暗号化の詳細な説明と例データベースアカウントとパスワードはデータベ...

MySQL データ型 DECIMAL の使用方法の詳細な説明

MySQL DECIMALデータ型は、データベースに正確な数値を保存するために使用されます。会計シス...

Dockerコアとインストールの具体的な使い方

1. Docker とは何ですか? (1)DockerはLinuxコンテナ内でアプリケーションを実行...

MySQL の左結合操作における on 条件と where 条件の違いの紹介

優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...

HTML で点線の境界線を設定する方法

CSSスタイルとHTMLタグ要素を使用するさまざまな HTML タグに点線の境界線を追加するために、...

Linux 上の Nginx に複数のバージョンの PHP をインストールする

サーバーの LNPM 環境をインストールして構成する場合、複数のバージョンの PHP の共存を考慮す...

MySQL テーブル構造を Excel にエクスポートする方法

要件は次のとおりですテーブル構造、フィールドコメント情報、テーブル名などをエクスポートします。これは...

Mysqlツリー再帰クエリの実装方法

序文部門テーブルなどのデータベース内のツリー構造データの場合、部門のすべての従属部門または部門のすべ...