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
Shell で受信パラメータを受信する方法は 2 つあることがわかっています。 1 つはスクリプト...
1. Reactでクラス宣言する際のヒント 上記のように、Child クラスは class キーワー...
この記事では、Vueを使用して天気コンポーネントをロードする方法を参考までに紹介します。具体的な内容...
フィルターを使用して画像に透明な CSS を書く方法コードをコピーコードは次のとおりです。 html...
今日、私はブログサイト shoptalkshow を閲覧していて、非常に興味深いこのインターフェース...
垂直方向では、セルの配置を上、中央、下に設定できます。基本的な構文<TD VLIGN=&quo...
シェル スクリプト言語は、すべてのプログラミング言語の中で最も単純な言語であるため、資格のある Li...
質問: Vue にブログ投稿をアップロードするためのフォームがあり、タイトル、本文、説明、スニペット...
opencv2 の簡単なインストール: conda インストール --channel https:/...
これからの道のりは長く困難ですが、私は探求を続けます。また週末がやってきました。引き続き、皆さんと一...
序文: Vue では、props を使用して、もともと分離されていたコンポーネントを直列に接続するこ...
目次序文v-model の修飾子:怠け者トリム番号さまざまな入力タイプやその他の要素での v-mod...
1.html <div class="ログインボディ"> <...
名前キャラクター名前キャラクター情報ニューステクノロジー技術スキンケアスキンケア補う補う香水香水化粧...
目次1. props/$emit導入コードサンプル2.Vスロット導入コードサンプル3.$refs/ ...