React Diff-Algorithmus-Quellcodeanalyse

  // Einzelknotenvergleichsfunktion reconcileSingleElement(
    returnFiber: Faser,
    currentFirstChild: Fiber | null,
    Element: ReactElement,
    Fahrspuren: Fahrspuren,
  ): Faser {
    // Der Schlüssel des neuen reactElement
    const Schlüssel = Element.Schlüssel;
    //Aktueller untergeordneter Faserknoten let child = currentFirstChild;
    während (Kind !== null) {
      // Nur unterscheiden, wenn der Schlüssel derselbe ist
      wenn (Kind.Schlüssel === Schlüssel) {
        Schalter (untergeordnetes Tag) {
          // ...
          Standard: {
            // Wenn die aktuelle Faser und das ReactElement den gleichen Typ haben, dann wenn (child.elementType === element.type) {
              // Andere Knoten auf derselben Ebene löschen deleteRemainingChildren(returnFiber, child.sibling);
              // Aktuelle untergeordnete Faser erneut verwenden
              const vorhanden = useFiber(Kind, Element.Eigenschaften);
              bestehend.ref = coerceRef(returnFiber, Kind, Element);
              bestehend.return = returnFiber;
              // Eine wiederverwendbare untergeordnete Faser zurückgeben
              bestehende zurückgeben;
            }
            brechen;
          }
        }
        // Nicht übereinstimmende Löschknoten deleteRemainingChildren(returnFiber, child);
        brechen;
      } anders {
        //Knoten direkt löschen, wenn der Schlüssel unterschiedlich ist deleteChild(returnFiber, child);
      }
      Kind = Kind.Geschwister;
    }

    // Neuer Fiber-Knoten const erstellt = createFiberFromElement(element, returnFiber.mode, lanes);
    erstellt.ref = coerceRef(returnFiber, aktuellesErstesKind, Element);
    erstellt.return = returnFiber;
    Rückgabe erstellt;
  }

wenn (istArray(neuesKind)) {
  returniere versöhnlichesKinderArray(
    Rückkehrfaser,
    aktuellesErstesKind,
    neues Kind,
    Fahrspuren,
  );
}

wenn (getIteratorFn(neuesKind)) {
  returniere reconcileChildrenIterator(
    Rückkehrfaser,
    aktuellesErstesKind,
    neues Kind,
    Fahrspuren,
  );
}

// Alter Knoten <li key="0"/>
<li-Taste="1"/>
<li-Taste="2"/>
// Neuer Knoten <li key="0"/>
<li-Taste="1"/>
<li-Taste="5"/>

// key="5" ist anders, springe aus der Durchquerung // Die erste Runde der Durchquerung Knoten <li key="0"/>
<li-Taste="1"/>
// <li key="2"/> und <li key="5"/> verbleiben in der zweiten Runde der Durchquerung und des Vergleichs.

// Alter Knoten <li key="0"/>
<li-Taste="1"/>
<li-Taste="2"/>
// Neuer Knoten <li key="0"/>
<li-Taste="2"/>
<li-Taste="1"/>

// Die zweite Durchlaufrunde vergleicht die beiden Knoten <li key="2"/> und <li key="1"/>

  Funktion reconcileChildrenArray(
    returnFiber: Faser,
    currentFirstChild: Fiber | null,
    neueUntergeordnete: Array<*>,
    Fahrspuren: Fahrspuren,
  ): Faser | null {
    // Von der Funktion let resultingFirstChild zurückgegebener Fiber-Knoten: Fiber | null = null;
    let previousNewFiber: Fiber | null = null;

    // oldFiber ist eine verknüpfte Liste let oldFiber = currentFirstChild;
    // Wird verwendet, um zu bestimmen, ob der Knoten verschoben wird. let lastPlacedIndex = 0;
    sei newIdx = 0;
    let nextOldFiber = null;
    // In der ersten Durchlaufrunde werden nur Knoten mit dem gleichen Schlüssel durchlaufen for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
      wenn (alterFiber.index > neueIdx) {
        nächsteAlteFiber = alteFiber;
        alteFiber = null;
      } anders {
        // Jedes Mal, wenn der alte Fiber-Knoten durchlaufen wird, zeigt er auf das Geschwisterelement, das der Fiber-Knoten der nächsten Schleife ist. nextOldFiber = oldFiber.sibling;
      }
      // Wenn der Schlüssel derselbe ist, gib den Faserknoten zurück; wenn der Schlüssel unterschiedlich ist, gib null zurück
      // Wenn der Typ derselbe ist, den Knoten erneut verwenden, andernfalls einen neuen Knoten zurückgeben const newFiber = updateSlot(
        Rückkehrfaser,
        alteFaser,
        neueKinder[neueIdx],
        Fahrspuren,
      );
      // newFiber ist null, was darauf hinweist, dass der Schlüssel unterschiedlich ist. Die Schleife wird beendet, wenn (newFiber === null) {
        wenn (alteFaser === null) {
          alteFaser = nächstealteFaser;
        }
        brechen;
      }
      // Wenn newFiber.alternate null ist, handelt es sich um einen neuen Knoten, was darauf hinweist, dass ein neuer Fiber-Knoten mit einem anderen Typ erstellt wird, wenn (oldFiber && newFiber.alternate === null) {
        // Das oldFiber-Tag muss gelöscht werden deleteChild(returnFiber, oldFiber);
      }
      // Platziere den Knoten und aktualisiere den lastPlacedIndex
      letzterPlatzierterIndex = OrtKind(neueFaser, letzterPlatzierterIndex, neueIdx);
      // Bilde eine neue Fiber-Knotenkette if (previousNewFiber === null) {
        resultierendesErstesKind = neueFaser;
      } anders {
        vorherigeNeueFiber.geschwister = neueFiber;
      }
      vorherigeNeueFiber = neueFiber;
      alteFaser = nächstealteFaser;
    }

    /*
    Nach der ersten Durchlaufrunde ist die Anzahl der neuen Knoten geringer als die Anzahl der alten Knoten. newChildren wurde durchlaufen und die verbleibenden Faserknoten werden gelöscht. Die mögliche Situation ist wie folgt ⬇️
    Vorher <li key="0"/>
    <li-Taste="1"/>
    <li-Taste="2"/>
    Neu <li key="0"/>
    <li-Taste="1"/>
    <li key="2"/> wird gelöscht*/
    wenn (newIdx === neueKinder.Länge) {
      löscheRestKinder(returnFiber, oldFiber);
      gib das resultierendeErsteKind zurück;
    }

    /*
    Nach der ersten Durchlaufrunde ist die Anzahl der neuen Knoten größer als die Anzahl der alten Knoten. OldFiber wurde durchlaufen. Die mögliche Situation ist wie folgt ⬇️
    Vorher <li key="0"/>
    <li-Taste="1"/>
    Neu <li key="0"/>
    <li-Taste="1"/>
    <li-Taste="2"/>
    Ein neuer <li key="2"/> wird hinzugefügt. Dieser Abschnitt ist die Einfügelogik des neuen Knotens*/
    wenn (alteFaser === null) {
      für (; newIdx < newChildren.length; newIdx++) {
        const newFiber = createChild(returnFiber, newChildren[newIdx], lanes);
        wenn (newFiber === null) {
          weitermachen;
        }
        letzterPlatzierterIndex = OrtKind(neueFaser, letzterPlatzierterIndex, neueIdx);
        // Bilde eine neue Fiber-Knotenkette if (previousNewFiber === null) {
          resultierendesErstesKind = neueFaser;
        } anders {
          vorherigeNeueFiber.geschwister = neueFiber;
        }
        vorherigeNeueFiber = neueFiber;
      }
      gib das resultierendeErsteKind zurück;
    }
      
    // ---------------------------------------------------------------------

    // Verwende die verbleibende oldFiber, um eine Schlüssel->Fiber-Knoten-Map zu erstellen, sodass der entsprechende alte Fiber-Knoten über den Schlüssel const existingChildren = mapRemainingChildren(returnFiber, oldFiber); abgerufen werden kann.
    
    // Zweite Durchlaufrunde, fahren Sie mit dem Durchlaufen der verbleibenden Knoten fort. Diese Knoten müssen möglicherweise verschoben oder gelöscht werden für (; newIdx < newChildren.length; newIdx++) {
      // Den alten Knoten entsprechend dem Schlüssel aus der Karte abrufen und den aktualisierten neuen Knoten zurückgeben const newFiber = updateFromMap(
        bestehendeKinder,
        Rückkehrfaser,
        neueIdx,
        neueKinder[neueIdx],
        Fahrspuren,
      );
      wenn (neueFiber !== null) {
        // Den neuen Knoten wiederverwenden und den alten Knoten aus der Karte löschen. Die entsprechende Situation kann eine Positionsänderung sein, wenn (newFiber.alternate !== null) {
          // Die wiederverwendeten Knoten müssen aus der Karte entfernt werden, da die verbleibenden Knoten in der Karte als Löschung markiert werden existingChildren.delete(
            newFiber.key === null ?
          );
        }
        // Platzieren Sie den Knoten und bestimmen Sie, ob er verschoben werden soll lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
        wenn (vorherigeNeueFiber === null) {
          resultierendesErstesKind = neueFaser;
        } anders {
          vorherigeNeueFiber.geschwister = neueFiber;
        }
        vorherigeNeueFiber = neueFiber;
      }
    }

    // Löschen Sie die verbleibenden nutzlosen Knoten existingChildren.forEach(child => deleteChild(returnFiber, child));

    gib das resultierendeErsteKind zurück;
  }

Funktion OrtKind(
  newFiber: Faser,
  lastPlacedIndex: Nummer,
  newIndex: Nummer,
): Nummer {
  newFiber.index = neuerIndex;
  const current = neueFiber.alternate;
  wenn (aktuell !== null) {
    const alterIndex = aktueller.index;
    if (alterIndex < letzterplatzierterIndex) {
 			// Knotenbewegung newFiber.flags = Platzierung;
      gibt letzten platzierten Index zurück;
    } anders {
      // Die Knotenposition hat sich nicht geändert return oldIndex;
    }
  } anders {
    // Neuen Knoten einfügen newFiber.flags = Placement;
    gibt letzten platzierten Index zurück;
  }
}

// altes abcd
// Neues acbd

// Alter BCD
// Neues CBD

c => existiert im alten Knoten und kann wiederverwendet werden. Sein Index im alten Knoten ist 2. 2 > lastPlacedIndex(0). Kein Verschieben nötig. Weisen Sie lastPlacedIndex den Wert 2 zu.
b => existiert im alten Knoten und kann wiederverwendet werden. Sein Index im alten Knoten ist 1, 1 < lastPlacedIndex(2). Es muss verschoben und mit Placement markiert werden.
d => existiert im alten Knoten und kann wiederverwendet werden. Sein Index im alten Knoten ist 3, 3 > lastPlacedIndex(2), also muss er nicht verschoben werden.