ReactのEffectListの簡単な分析

ReactのEffectListの簡単な分析

React では、ノード操作、ライフサイクル メソッド、および Effect メソッドを実行するために EffectList がトラバースされます。EffectList はクリスマス ツリーにぶら下がっているカラフルなライトに例えることができ、このクリスマス ツリーは Fiber ツリーです。

EffectList はなぜ存在するのでしょうか?たとえば、ファイバー ツリーには、 componentDidMountメソッドを実行する必要があるファイバー ノードがいくつかあります。ファイバー ツリーを構築してから再度走査して、 componentDidMountメソッドを実行する必要があるファイバー ノードを見つけるのは、非常に非効率的です。

EffectList はこの問題を解決します。ファイバー ツリーの構築中に、ファイバー ノードのflagsフィールドがNoFlags (副作用を実行する必要があることを示す) でない場合は、ファイバー ノードが EffectList に追加されます。ファイバー ツリーが構築された後、ファイバー ノードによって連結された色付きのライトも構築されるため、色付きのライトをトラバースするだけで済みます。

EffectList コレクション

EffectList は一方向のリンク リストです。firstEffect firstEffectリンク リストの最初の Fiber ノードを表し、 lastEffectリンク リストの最後の Fiber ノードを表します。

ファイバー ツリーの構築は深さ優先です。つまり、子ファイバー ノードが最初に下向きに構築され、子ノードが構築された後に親ファイバー ノードが上向きに構築されるため、子ファイバー ノードは常に EffectList の先頭になります。

Fiber ノードの構築を完了する操作は、 completeUnitOfWorkメソッドで実行されます。このメソッドでは、ノードが完了するだけでなく、 flags付きの Fiber ノードが EffectList に追加されます。

簡略化されたコードは次のとおりです。

関数 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 は実際にはバブルのように動作し、 flagsが付いた最初のノードから始めて、上位のレイヤーにレイヤーごとにデータを収集します。各レイヤーの新しいノードはそれぞれ、前のノードのfirstEffectlastEffectを自分自身にコピーし、上位のノードに再度コピーを提供します。

次の構造のように、各divflagsがある場合。

<div id="1">
 <div id="4"/>
 <div id="2">
  <div id="3"/>
 </div>
</div>

最終的なEffectListは

最初の効果 => div4
最後の効果 => div1

Fiber ツリーは深さ優先で構築されるため、すべてのdiv4最初にcompleteWorkを完了し、 firstEffectを構築します。

EffectList のトラバーサルはfirstEffectから始まり、各ノードのnextEffectを通じて次のノードを見つけます。

最初の効果 => div4
div4.nextEffect => div3
div3.nextEffect => div2
div2.nextEffect => div1

最初のレンダリング時のEffectList

React では、最初のマウントに対してパフォーマンスの最適化が行われ、Fiber ノードのflagsplacementが含まれなくなり、対応する DOM ノードはトラバースされて DOM ツリーに追加されませんが、DOM ノードが作成されるときに DOM ツリーに追加されます。rootFiber ノードのFiberRootNodeflagsにのみplacementが含まれます。

EffectList にはrootノードが含まれていないため、 placement正しく実行され、DOM ツリーがページに表示されるようにするには、EffectList にrootノードを追加する必要があります。

 最初の効果をさせる;
 // ルートノード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 つのメソッドでは、 nextEffectがトラバースされ、実行されるたびにfirstEffectが再度ポイントされます。レイアウト段階での具体的な操作については詳しく説明しません。

要約する

EffectList はグローバル変数ではありません。ファイバー ツリーの作成中に、 effectを持つファイバー ノードがレイヤーごとに収集されます。最終的なrootノードは、 effectを持つすべてのファイバー ノードを収集します。 effectノードを含むこのリンク リストを EffectList と呼びます。

コレクション プロセスは深さ優先であるため、子が最初にコレクションされ、トラバーサル中に子が最初に操作されます。そのため、面接官が子と親のライフ サイクルまたはuseEffectどちらが最初に実行されるかを尋ねた場合、子の操作が最初に実行されることが明確にわかります。

上記はReactのEffectListの詳細についての簡単な分析です。ReactのEffectListの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • フックを使用して React コンポーネントを書くときに注意すべき 5 つの点
  • React+Ant Design開発環境をセットアップするための実装手順
  • ViteでReactプロジェクトを構築する方法
  • 入力ボックスの値を取得する方法のReactの例
  • Reactはラジオコンポーネントのサンプルコードを実装します
  • React Router で履歴リダイレクトを使用する方法
  • React Contextの理解と応用についてお話ししましょう
  • Reactフック入門チュートリアル
  • React と Threejs を使用して VR パノラマ プロジェクトを作成する詳細なプロセス

<<:  マルチコア CPU を使用して Linux コマンドを高速化する方法 (GNU Parallel)

>>:  Django+mysql の設定と簡単な操作データベースのサンプルコード

推薦する

Axiosは繰り返しのリクエストをキャンセル

目次序文1. リクエストをキャンセルする方法2. 重複リクエストの判定方法3. 繰り返しリクエストを...

JavaScript 非同期プログラミングにおける Promise の初期の使用法の詳細な説明

1. 概要Promise オブジェクトは、ES6 で提案された非同期プログラミングの仕様です。非同期...

React HTML で react を使用する 2 つの方法

基本的な使い方 <!DOCTYPE html> <html lang="...

高品質なコードを書く Web フロントエンド開発実践書の抜粋

(P4) Web 標準は一連の標準で構成されています。中心となる概念は、Web ページの構造、スタイ...

MySQLトリガーについて深く理解するための記事

目次1. SC テーブルを挿入または変更するときに、テスト スコアが 0 ~ 100 の範囲外の場合...

WEB 標準ウェブページ構造

背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...

Linuxカーネルスケジューラソースコード初期化の分析

目次1. はじめに2. スケジューラの基本概念2.1. 実行キュー (rq) 2.2 スケジューリン...

ダッシュボードを実装するためのjQueryプラグイン

jQueryプラグインは、参考のためにダッシュボードを実装します。具体的な内容は次のとおりです。一般...

MySQL Installer Community 5.7.16 インストール詳細チュートリアル

この記事では、MySQL インストールの詳細なチュートリアルを記録し、全員と共有します。 1. バー...

MySQL 5.7.19 winx64 無料インストールバージョン設定チュートリアル

mysql-5.7.19-winx64インストールフリー版の設定方法、参考までに具体的な内容は以下の...

URL を入力すると、バックグラウンドでは具体的に何が起こるのでしょうか?

ソフトウェア開発者は、ネットワーク アプリケーションがどのように動作するかを階層的に完全に理解してい...

docker インストール後に hello-world を実行する問題を解決する

yumを使用してcentos7.3にDocker V1.13.1をインストールしましたしかし、doc...

MySQL フルテキスト インデックス、ジョイント インデックス、Like クエリ、JSON クエリのうち、どれが高速ですか?

目次クエリの背景1. クエリをいいね2. JSON関数クエリ3. 共同インデックスクエリ4. 全文イ...

MySQL 8.0 のメモリ関連パラメータの概要

理論的には、MySQL によって使用されるメモリ = グローバル共有メモリ + max_connec...