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 関数はファイバーノードを削除します。削除されたノードはターゲットノードと呼ばれ、その役割は次のとおりです。

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

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

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

Refのアンインストール
クラスコンポーネントのライフサイクル呼び出し
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 つのポイントを明確にし、上記の整理プロセスと組み合わせることで、削除操作のコンテキストを徐々に整理することができます。

<<: ロボット革命が都市のライフスタイルをどう変えるのか

>>: 業界丨2020年のインテリジェントウェーブを理解するには、BaiduとGoogleのAIの足跡から始める