React diffアルゴリズムソースコード分析

  // 単一ノード比較関数 reconcileSingleElement(
    returnFiber: ファイバー、
    currentFirstChild: ファイバー | null、
    要素: ReactElement、
    レーン: レーン、
  ): ファイバー {
    // 新しい reactElement のキー
    定数キー = 要素.キー;
    //現在の子ファイバーノード let child = currentFirstChild;
    while (child !== null) {
      // キーが同じ場合のみ比較
      if (child.key === key) {
        スイッチ（子タグ）{
          // ...
          デフォルト： {
            // 現在のファイバーと reactElement が同じタイプの場合、if (child.elementType === element.type) {
              // 同じレベルの他のノードを削除します deleteRemainingChildren(returnFiber, child.sibling);
              // 現在の子ファイバーを再利用します
              const existing = useFiber(child, element.props);
              existing.ref = coerceRef(returnFiber、child、element);
              既存の.return = returnFiber;
              // 再利用可能な子ファイバーを返す
              既存のものを返します。
            }
            壊す;
          }
        }
        // 一致しないノードを削除します deleteRemainingChildren(returnFiber, child);
        壊す;
      } それ以外 {
        // キーが異なる場合はノードを直接削除します deleteChild(returnFiber, child);
      }
      子 = 子.兄弟;
    }

    // 新しいファイバーノード const created = createFiberFromElement(element, returnFiber.mode, lanes);
    created.ref = coerceRef(returnFiber、currentFirstChild、要素);
    作成された戻り値 = returnFiber;
    戻り値が作成されました。
  }

if (isArray(newChild)) {
  reconcileChildrenArray() を返す
    リターンファイバー、
    現在の最初の子、
    新しい子、
    車線、
  );
}

（getIteratorFn（新しい子））の場合{
  reconcileChildrenIterator() を返す
    リターンファイバー、
    現在の最初の子、
    新しい子、
    車線、
  );
}

// 古いノード <li key="0"/>
<li キー="1"/>
<li キー="2"/>
// 新しいノード <li key="0"/>
<li キー="1"/>
<li キー="5"/>

// key="5" は異なるため、トラバーサルから抜ける // トラバーサル ノードの最初のラウンド <li key="0"/>
<li キー="1"/>
// <li key="2"/> と <li key="5"/> は、2 回目の走査と比較で残ります。

// 古いノード <li key="0"/>
<li キー="1"/>
<li キー="2"/>
// 新しいノード <li key="0"/>
<li キー="2"/>
<li キー="1"/>

// 2 回目の走査では、2 つのノード <li key="2"/> と <li key="1"/> を比較します。

  関数 reconcileChildrenArray(
    returnFiber: ファイバー、
    currentFirstChild: ファイバー | null、
    新しい子: 配列<*>,
    レーン: レーン、
  ): ファイバー | null {
    // 関数によって返されるファイバー ノード let resultsingFirstChild: Fiber | null = null;
    previousNewFiber: Fiber | null = null; とします。

    // oldFiber はリンク リストです。let oldFiber = currentFirstChild;
    // ノードが移動されたかどうかを判断するために使用されます。let lastPlacedIndex = 0;
    newIdx = 0 とします。
    nextOldFiber を null にします。
    // 最初の走査では、同じキーを持つノードのみが走査されます for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
      (oldFiber.index > newIdx) の場合 {
        次の古いファイバー = 古いファイバー;
        古いファイバー = null;
      } それ以外 {
        // 古いファイバー ノードがループされるたびに、次のループのファイバー ノードである兄弟要素を指します。 nextOldFiber = oldFiber.sibling;
      }
      // キーが同じ場合はファイバーノードを返します。キーが異なる場合は null を返します。
      // 型が同じ場合はノードを再利用し、そうでない場合は新しいノードを返します。const newFiber = updateSlot(
        リターンファイバー、
        古いファイバー、
        新しい子供[newIdx]、
        車線、
      );
      // newFiber は null で、キーが異なることを示し、ループは終了します if (newFiber === null) {
        （古いファイバーがnullの場合）{
          古いファイバー = 次の古いファイバー;
        }
        壊す;
      }
      // newFiber.alternate が null の場合、それは新しいノードであり、異なるタイプの新しいファイバーノードが作成されたことを示します。if (oldFiber && newFiber.alternate === null) {
        // oldFiber タグを削除する必要があります deleteChild(returnFiber, oldFiber);
      }
      // ノードを配置し、lastPlacedIndexを更新します
      lastPlacedIndex = placeChild(newFiber、lastPlacedIndex、newIdx);
      // 新しいファイバーノードチェーンを形成する if (previousNewFiber === null) {
        結果として得られるFirstChild = newFiber;
      } それ以外 {
        前のNewFiber.sibling = newFiber;
      }
      前のNewFiber = 新しいFiber;
      古いファイバー = 次の古いファイバー;
    }

    /*
    最初の走査ラウンドの後、新しいノードの数は古いノードの数よりも少なくなります。newChildren は走査され、残りのファイバーノードは削除されます。考えられる状況は次のとおりです⬇️
    <li key="0"/> の前
    <li キー="1"/>
    <li キー="2"/>
    新規 <li key="0"/>
    <li キー="1"/>
    <li key="2"/> は削除されます*/
    (newIdx === newChildren.length) の場合 {
      残りの子供を削除します(returnFiber、oldFiber);
      結果のFirstChildを返します。
    }

    /*
    最初のトラバースラウンドの後、新しいノードの数が古いノードの数より多くなっています。OldFiber がトラバースされました。考えられる状況は次のとおりです⬇️
    <li key="0"/> の前
    <li キー="1"/>
    新規 <li key="0"/>
    <li キー="1"/>
    <li キー="2"/>
    新しい <li key="2"/> が追加されます。このセクションは、新しいノードの挿入ロジックです*/
    （古いファイバーがnullの場合）{
      (; newIdx < newChildren.length; newIdx++) {
        const newFiber = createChild(returnFiber, newChildren[newIdx], レーン);
        (newFiber === null)の場合{
          続く;
        }
        lastPlacedIndex = placeChild(newFiber、lastPlacedIndex、newIdx);
        // 新しいファイバーノードチェーンを形成する if (previousNewFiber === null) {
          結果として得られるFirstChild = newFiber;
        } それ以外 {
          前のNewFiber.sibling = newFiber;
        }
        前のNewFiber = 新しいFiber;
      }
      結果のFirstChildを返します。
    }
      
    // ---------------------------------------------------------------------

    // 残りの oldFiber を使用して、key->fiber ノード マップを作成し、対応する古いファイバー ノードを key で取得できるようにします。const existingChildren = mapRemainingChildren(returnFiber, oldFiber);
    
    // 2 回目のトラバーサル。残りのノードのトラバーサルを続けます。これらのノードは移動または削除する必要がある可能性があります。for (; newIdx < newChildren.length; newIdx++) {
      // マップからキーに対応する古いノードを取得し、更新された新しいノードを返します。const newFiber = updateFromMap(
        既存の子供、
        リターンファイバー、
        新しいIDx、
        新しい子供[newIdx]、
        車線、
      );
      newFiber !== null の場合 {
        // 新しいノードを再利用し、古いノードをマップから削除します。対応する状況は位置の変更である可能性があります if (newFiber.alternate !== null) {
          // 再利用されたノードはマップから削除する必要があります。マップ内の残りのノードは削除としてマークされるためです existingChildren.delete(
            newFiber.key === null ? newIdx : newFiber.key,
          );
        }
        // ノードを配置し、移動するかどうかを決定します lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
        if (以前の新しいファイバー === null) {
          結果として得られるFirstChild = newFiber;
        } それ以外 {
          前のNewFiber.sibling = newFiber;
        }
        前のNewFiber = 新しいFiber;
      }
    }

    // 残りの不要なノードを削除します existingChildren.forEach(child => deleteChild(returnFiber, child));

    結果のFirstChildを返します。
  }

関数 placeChild(
  newFiber: ファイバー、
  lastPlacedIndex: 数値、
  新しいインデックス: 数値、
）： 番号 {
  新しいファイバーのインデックスを作成します。
  現在の定数を newFiber.alternate に設定します。
  (現在の値 !== null) の場合 {
    const oldIndex = 現在のインデックス;
    （古いインデックスが最後の配置インデックスより小さい場合）{
 			// ノードの移動 newFiber.flags = Placement;
      lastPlacedIndex を返します。
    } それ以外 {
      // ノードの位置は変更されていません return oldIndex;
    }
  } それ以外 {
    // 新しいノードを挿入します newFiber.flags = Placement;
    lastPlacedIndex を返します。
  }
}

// 古いabcd
// 新しいacbd

// 古いbcd
// 新しい CBD

c => 古いノードに存在し、再利用できます。古いノードのインデックスは 2 です。2 > lastPlacedIndex(0)。移動する必要はありません。lastPlacedIndex に 2 を割り当てます。
b => は古いノードに存在し、再利用できます。古いノードでのインデックスは 1 で、1 < lastPlacedIndex(2) です。移動して Placement でマークする必要があります。
d => 古いノードに存在し、再利用できます。古いノードのインデックスは3で、3 > lastPlacedIndex(2)なので、移動する必要はありません。