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が付いた最初のノードから始めて、上位のレイヤーにレイヤーごとにデータを収集します。各レイヤーの新しいノードはそれぞれ、前のノードのfirstEffectとlastEffectを自分自身にコピーし、上位のノードに再度コピーを提供します。

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

<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 ノードのflagsにplacementが含まれなくなり、対応する DOM ノードはトラバースされて DOM ツリーに追加されませんが、DOM ノードが作成されるときに DOM ツリーに追加されます。rootFiber ノードのFiberRootNodeのflagsにのみ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の他の関連記事に注目してください。

以下もご興味があるかもしれません: