React では、ノード操作、ライフサイクル メソッド、および Effect メソッドを実行するために EffectList がトラバースされます。EffectList はクリスマス ツリーにぶら下がっているカラフルなライトに例えることができ、このクリスマス ツリーは Fiber ツリーです。 EffectList はなぜ存在するのでしょうか?たとえば、ファイバー ツリーには、 EffectList はこの問題を解決します。ファイバー ツリーの構築中に、ファイバー ノードの EffectList コレクションEffectList は一方向のリンク リストです。firstEffect ファイバー ツリーの構築は深さ優先です。つまり、子ファイバー ノードが最初に下向きに構築され、子ノードが構築された後に親ファイバー ノードが上向きに構築されるため、子ファイバー ノードは常に EffectList の先頭になります。 Fiber ノードの構築を完了する操作は、 簡略化されたコードは次のとおりです。 関数 completeUnitOfWork(unitOfWork: Fiber): void { 完了した作業 = unitOfWork とします。 する { 現在の作業を完了します。 const returnFiber = 完了した作業.return; 次は、completeWork を現在の作業、completedWork、subtreeRenderLanes に格納します。 // エフェクトリストの構築 if ( returnFiber !== null && (returnFiber.flags & 不完全) === NoFlags ){ // レイヤーごとにコピーします if (returnFiber.firstEffect === null) { 戻り値: } 完了した作業の最後の効果が null ではない場合 // これは、現在のノードが兄弟ノードであり、子ノードに効果があり、returnFiber.lastEffect に値が割り当てられていることを意味します if (returnFiber.lastEffect !== null) { // 兄弟ノードを接続する効果 戻り値: } 戻り値: } const flags = 完了した作業.flags; // このファイバーノードには効果があります if (フラグ > 実行された作業) { // 現在のノードにはエフェクトリストに接続されたエフェクトがあります returnFiber.lastEffect !== null の場合 { 完了した作業を返します。 } それ以外 { // returnFiber に firstEffect がない場合、効果を持つノードに初めて遭遇したときです。 returnFiber.firstEffect = CompletedWork; } 完了した作業を返します。 } } // 兄弟要素を走査し、親に戻ります。const siblingFiber = completeWork.sibling; 兄弟ファイバーが null の場合 作業進行中 = 兄弟ファイバー; 戻る; } 完了した作業 = returnFiber; 進行中 = 完了した作業; } while (completedWork !== null); } EffectList は実際にはバブルのように動作し、 次の構造のように、各 <div id="1"> <div id="4"/> <div id="2"> <div id="3"/> </div> </div> 最終的なEffectListは 最初の効果 => div4 最後の効果 => div1 Fiber ツリーは深さ優先で構築されるため、すべての EffectList のトラバーサルは 最初の効果 => div4 div4.nextEffect => div3 div3.nextEffect => div2 div2.nextEffect => div1 最初のレンダリング時のEffectList React では、最初のマウントに対してパフォーマンスの最適化が行われ、Fiber ノードの EffectList には 最初の効果をさせる; // ルートノードfinishedWorkも接続します if (finishedWork.flags > PerformedWork) { 終了した作業の最後の効果が null の場合 終了した作業.lastEffect.nextEffect = 終了した作業; firstEffect = 完成した作業。firstEffect; } それ以外 { 最初の効果 = 完成した作業; } } それ以外 { // ルートノードは効果がありません。 firstEffect = 完成した作業。firstEffect; } EffectList のトラバーサルEffectList は主に、レイアウト フェーズのライフ サイクル メソッドと DOM 操作の実行に使用されます。 // getSnapshotBeforeUpdate を処理し、useEffect をスケジュールする 次のエフェクト = 最初のエフェクト; する { コミット前にミューテーション効果(); } while (nextEffect !== null); //DOM 操作 nextEffect = firstEffect; する { commitMutationEffects(ルート、renderPriorityLevel); } while (nextEffect !== null); // ライフサイクルメソッドの実行 nextEffect = firstEffect; する { commitLayoutEffects(ルート、レーン); } while (nextEffect !== null); レイアウト ステージのこれらの 3 つのメソッドでは、 要約するEffectList はグローバル変数ではありません。ファイバー ツリーの作成中に、 コレクション プロセスは深さ優先であるため、子が最初にコレクションされ、トラバーサル中に子が最初に操作されます。そのため、面接官が子と親のライフ サイクルまたは 上記はReactのEffectListの詳細についての簡単な分析です。ReactのEffectListの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: マルチコア CPU を使用して Linux コマンドを高速化する方法 (GNU Parallel)
>>: Django+mysql の設定と簡単な操作データベースのサンプルコード
目次序文1. リクエストをキャンセルする方法2. 重複リクエストの判定方法3. 繰り返しリクエストを...
1. 概要Promise オブジェクトは、ES6 で提案された非同期プログラミングの仕様です。非同期...
基本的な使い方 <!DOCTYPE html> <html lang="...
(P4) Web 標準は一連の標準で構成されています。中心となる概念は、Web ページの構造、スタイ...
目次1. SC テーブルを挿入または変更するときに、テスト スコアが 0 ~ 100 の範囲外の場合...
背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...
目次1. はじめに2. スケジューラの基本概念2.1. 実行キュー (rq) 2.2 スケジューリン...
jQueryプラグインは、参考のためにダッシュボードを実装します。具体的な内容は次のとおりです。一般...
この記事では、MySQL インストールの詳細なチュートリアルを記録し、全員と共有します。 1. バー...
1. MySQL にログインし、SHOW VARIABLES LIKE 'character...
mysql-5.7.19-winx64インストールフリー版の設定方法、参考までに具体的な内容は以下の...
ソフトウェア開発者は、ネットワーク アプリケーションがどのように動作するかを階層的に完全に理解してい...
yumを使用してcentos7.3にDocker V1.13.1をインストールしましたしかし、doc...
目次クエリの背景1. クエリをいいね2. JSON関数クエリ3. 共同インデックスクエリ4. 全文イ...
理論的には、MySQL によって使用されるメモリ = グローバル共有メモリ + max_connec...