React と DOM - ノード削除アルゴリズム

[[378076]]

これは、React DOM 操作を詳細に説明した最初の記事です。記事の内容はコミット フェーズで発生します。

Fiber アーキテクチャでは、React が 2 種類のツリー構造を維持する必要があります。1 つは Fiber ツリー、もう 1 つは DOM ツリーです。 DOM ノードが削除されると、ファイバー ツリーも同期的に変更される必要があります。ただし、削除操作のタイミングには注意してください。DOM ノードの他の変更 (追加、修正) を完了する前に、他の操作への干渉を避けるために、まずファイバー ノードを削除してください。 これは、他の DOM 操作を実行するときにファイバー ツリーをループする必要があるためです。削除する必要があるのに削除されていないファイバー ノードがあると、混乱が生じます。

関数 commitMutationEffects(  
  firstChild: ファイバー、  
  ルート: FiberRoot、  
  レンダリング優先度レベル、  
 ）{  
  fiber = firstChildとします。  
  while (ファイバー !== null) { 
     // 最初の削除 
    const削除=ファイバー.削除;  
    if (削除 !== null) {  
      削除をコミットします。ルート、レンダリング優先度レベル。  
    }  
    // 削除後もファイバーに子ノードが残っている場合、  
    // commitMutationEffectsを再帰的に呼び出して処理する 
    （fiber.child !== null）の場合{  
      const primarySubtreeTag = fiber.subtreeTag & MutationSubtreeTag;  
      if (プライマリサブツリータグ !== サブツリータグなし) {  
        コミットMutationEffects(fiber.child、ルート、renderPriorityLevel);  
      }  
    }  
    __DEV__ の場合: ...  
      // その他のDOM操作を実行する 
      試す {  
        commitMutationEffectsImpl(ファイバー、ルート、レンダリング優先度レベル);  
      } キャッチ（エラー）{  
        コミットフェーズエラーをキャプチャします(ファイバー、エラー);  
      }  
    }  
ファイバーファイバー= ファイバー.sibling;  
  }  
 }

Fiber.deletions はレンダリング フェーズの diff プロセスです。ファイバーの子ノードを削除する必要がある場合は、ここで追加されます。

commitDeletion 関数はノードを削除するためのエントリ ポイントであり、unmountHostComponents を呼び出すことによって削除を実装します。削除操作を理解する前に、シーンを見てみましょう。

以下のようにファイバーツリーがあり、Node（Nodeはコード名であり、特定のノードを指すものではありません）ノードが削除されようとしています。

ファイバーツリー 
   div#ルート 
      |  
 <アプリ/>    
      |  
     分割 
      |  
 <親/>    
      |  
     ノード 
      | ↖  
      | ↖  
      P —————— >   <子ども>    
                  |  
                  1つの

このシナリオから、ノードが削除されると、その下のサブツリー内のすべてのノードが削除されることが推測できます。それでは、このシナリオを例に、削除プロセスを見ていきましょう。このプロセスは、実際には unmountHostComponents 関数の動作メカニズムです。

削除プロセス

Node ノードを削除するには、親 DOM ノードの参加が必要です。

親インスタンス.removeChild(子)

したがって、まず親ノードを見つける必要があります。このプロセスは、ファイバー ツリー内のノードの親ノードから上方向に検索し、最初に見つかったネイティブ DOM ノードが親ノードになります。この例では、親ノードは div です。その後、ノードから始めて、ファイバー ツリーでもあるサブツリーをトラバースします。トラバースは深さ優先トラバーサルであるため、各子ノードを削除します。

特に注意が必要なのは、ループ ノードを削除するときに、各ノードが削除操作によって処理されることです。ここでの各ノードは、DOM ノードではなくファイバー ノードです。 DOM ノードは、ノードのトラバースと削除を開始すると削除されます。最初のネイティブ DOM ノード (HostComponent または HostText) が検出されると、そのサブツリーのすべてのファイバー ノードが削除された後にのみ削除されます。

上記はプロセス全体の簡単な説明です。詳細なプロセスについては、いくつかの主要な機能の責任と呼び出し関係を明確にする必要があります。 unmountHostComponents 関数はファイバー ノードを削除します。削除されたノードはターゲット ノードと呼ばれ、その役割は次のとおりです。

1. DOMレベルで対象ノードの親ノードを見つける
2. 対象ノードがネイティブ DOM ノードの場合は、3 と 4 を実行します。それ以外の場合は、まずノードをアンインストールしてから、ネイティブ DOM ノードを見つけて、3 と 4 を実行します。
3. サブツリーをトラバースしてファイバーノードのアンロードを実行する
4. 対象ノードのDOMノードを削除する

ステップ 3 の操作は、サブツリーをトラバースしてノードをアンマウントするという単純で明確な責任を持つ commitNestedUnmounts によって完了します。

その後、commitUnmount によって各ノードの特定のアンマウント プロセスが完了します。その責任は

1. Refのアンインストール
2. クラスコンポーネントのライフサイクル呼び出し
3. HostPortalタイプのファイバーノードは、unmountHostComponentsを再帰的に呼び出してプロセスを繰り返し削除します。

さまざまな種類のコンポーネントの具体的な削除プロセスを見てみましょう。

削除されたコンポーネントのカテゴリを区別する

ノード タイプにはさまざまなものがあります。削除プロセスを説明するために、最も一般的な 3 つのタイプ (HostComponent、ClassComponent、HostPortal) を例に挙げます。

まず、unmountHostComponents を実行します。これは、DOM レベルで親ノードを見つけ、次の 3 つのコンポーネント タイプに従って処理します。1 つずつ見ていきましょう。

ホストコンポーネント

Node が HostComponent の場合、commitNestedUnmounts が呼び出され、Node から開始してサブツリーをトラバースし、すべての子ファイバーのアンマウントを開始します。トラバーサル プロセスは深さ優先トラバーサルです。

展開 -- >ノード(span)  
                     | ↖  
                     | ↖  
                     P —————— >   <子ども>    
                                 |  
                                 1つの

アンインストールするには、各ノードで commitUnmount を 1 つずつ実行します。このトラバーサル プロセスは、実際には 3 種類のノードで同様です。スペースを節約するために、ここでは 1 回だけ説明します。

Node のファイバーがアンロードされ、次に下方向に p のファイバーがアンロードされます。p には子がなく、その兄弟である <Child> が見つかります。<Child> のファイバーがアンロードされ、次に下方向に a が見つかり、a のファイバーがアンロードされます。この時点で、サブツリー全体のリーフ ノードに到達し、上方向への戻りを開始します。 a から <Child> へ、そして Node に戻ると、トラバーサルとアンインストールのプロセスが終了します。

サブツリーのすべてのファイバー ノードがアンロードされた後にのみ、ノードの DOM ノードを親ノードから安全に削除できます。

クラスコンポーネント

削除 -- >ノード(ClassComponent)  
                     |  
                     |  
                    スパン 
                     | ↖  
                     | ↖  
                     P —————— >   <子ども>    
                                 |  
                                 1つの

ノードは ClassComponent です。対応する DOM ノードはありません。最初に commitUnmount を呼び出して自身をアンインストールする必要があります。次に、下方を調べて最初のネイティブ DOM タイプ ノード span を見つけ、それを開始点としてサブツリーをトラバースし、すべてのファイバー ノードがアンインストールされていることを確認し、親ノードから span を削除します。

ホストポータル

   div2(ノードのコンテナ)  
           ↗  
 div コンテナ情報 
 | ↗  
 | ↗  
ノード(ホストポータル)  
 |  
 |  
スパン 
 | ↖  
 | ↖  
 P —————— >   <子ども>    
             |  
             1つの

ノードはHostPortalで、対応するDOMノードがないため、削除プロセスは基本的にClassComponentと同じです。違いは、その下の最初の子ファイバーのDOMノードを削除するときに、削除されたHostPortalタイプのノードのDOMレベルの親ノードから削除されるのではなく、図のdiv2であるHostPortalのcontainerInfoから削除されることです。これは、HostPortalが子ノードを親コンポーネントの外部のDOMノードにレンダリングするためです。

上記は、3 種類のノードの削除プロセスです。注目すべきは、unmountHostComponents 関数を実行してサブツリーをトラバースし、各ノードをアンインストールするときに、HostPortal タイプの子ノードに遭遇すると、unmountHostComponents が再度呼び出され、それをターゲット ノードとして使用して、そのノードとそのサブツリーをアンインストールして削除するということです。これは再帰プロセスに相当します。

コミットアンマウント

HostComponent と ClassComponent の削除は両方とも commitUnmount を呼び出し、FunctionComponent もそれを呼び出します。その役割は 3 つのコンポーネントごとに異なります。

• FunctionComponent 関数コンポーネントで useEffect が呼び出されると、アンインストール時に useEffect の破棄関数が呼び出される必要があります。 (useLayoutEffectの破棄関数はcommitHookEffectListUnmountを呼び出すことで実行されます)
• ClassComponentクラスコンポーネントはcomponentWillUnmountを呼び出す必要があります
• HostComponent をアンインストールする ref

関数 commitUnmount(  
  終了ルート: FiberRoot、  
  電流: ファイバー、  
  レンダリング優先度レベル: React優先度レベル、  
 ）： 空所 {  
  onCommitUnmount(現在の値);  
  スイッチ (現在のタグ) {  
    関数コンポーネントの場合:  
    ケースForwardRef:  
    MemoComponentの場合:  
    SimpleMemoComponentの場合:  
    ケースブロック: {  
      const updateQueue: FunctionComponentUpdateQueue | null = (current.updateQueue: any);  
      更新キューが null の場合 
        定数lastEffect = updateQueue.lastEffect ;  
        （lastEffect !== null）の場合{  
          const firstEffect = lastEffect .next;  
          effectをfirstEffectとします。  
          する { 
             const {destroy, tag} = 効果;  
            破棄が未定義の場合{  
              if ((タグ & HookPassive) !== NoHookEffect) {  
                // エフェクトをuseEffect破棄関数キューにプッシュします 
                enqueuePendingPassiveHookEffectUnmount(現在の値、効果)。  
              } それ以外 {  
                // try...catch を使用して destroy を呼び出そうとする 
                安全にDestroyを呼び出します(現在の状態、破棄)。  
                ...  
              }  
            }  
効果effect = effect.next;  
          } while (effect !== firstEffect);  
        }  
      }  
      戻る;  
    }  
    クラスコンポーネントの場合: {  
      安全にデタッチRef(現在のもの);  
      constインスタンス=現在の.stateNode;  
      // componentWillUnmount を呼び出す 
      if (typeof instance.componentWillUnmount === 'function') {  
        安全にコンポーネントをアンマウントします(現在のインスタンス)。  
      }  
      戻る;  
    }  
    ケースホストコンポーネント: {  
      // アンインストール参照 
      安全にデタッチRef(現在のもの);  
      戻る;  
    }  
    ...  
  }  
 }

要約する

削除プロセスの重要なポイントを確認しましょう。

• 削除操作を実行するタイミング
• 削除対象は誰ですか?
• 削除する場所

ファイバー ノードに基づいて DOM に対して他の操作を実行する前に、後続の操作のために残されたファイバー ノードが有効であることを確認するために、まずノードを削除する必要があります。削除の対象は、ファイバー ノードとそのサブツリー、およびファイバー ノードに対応する DOM ノードです。 軌跡全体はファイバー ツリーに沿って進み、対象ノードとすべての子ノードをアンロードし、対象ノードに対応する DOM ノード (またはその下の最初のノード) を削除します。ネイティブ DOM タイプのノードの場合、親 DOM ノードから直接削除されます。HostPortal ノードの場合、子ノードは外部 DOM ノードにレンダリングされるため、この DOM ノードから削除されます。上記 3 つのポイントを明確にし、上記の整理プロセスと組み合わせることで、削除操作のコンテキストを徐々に整理することができます。