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の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: SQL インジェクションのある Web サイトを見つける方法 (必読)
>>: 2019 年に最も役立ち重要なオープンソース ツール トップ 10
序文通常のビジネスニーズ: 写真、Excel などをアップロードします。結局のところ、数 MB のサ...
簡単な説明エディターはデータベースのエンコードが間違っているために問題に遭遇することが多く、これは頭...
理由は、すべてのファイルが utf8 でエンコードされているためです。ファイルがインクルードされると...
イメージを構築するイメージを構築するには、主に 2 つの方法があります。実行中のコンテナをイメージに...
導入作業プロセス中に、遅いクエリが調整されることがあります。 MySQL SQL ステートメントのチ...
この記事では、例を使用して MySQL コード実行構造について説明します。ご参考までに、詳細は以下の...
データベースアカウントのパスワード暗号化の詳細な説明と例データベースアカウントとパスワードはデータベ...
MySQL DECIMALデータ型は、データベースに正確な数値を保存するために使用されます。会計シス...
1. Docker とは何ですか? (1)DockerはLinuxコンテナ内でアプリケーションを実行...
優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...
CSSスタイルとHTMLタグ要素を使用するさまざまな HTML タグに点線の境界線を追加するために、...
サーバーの LNPM 環境をインストールして構成する場合、複数のバージョンの PHP の共存を考慮す...
要件は次のとおりですテーブル構造、フィールドコメント情報、テーブル名などをエクスポートします。これは...
序文部門テーブルなどのデータベース内のツリー構造データの場合、部門のすべての従属部門または部門のすべ...
type="radio" や type="checkbox"...