Einfache Analyse von EffectList in React

In React wird EffectList durchlaufen, um Knotenoperationen, Lebenszyklusmethoden und Effektmethoden auszuführen. EffectList kann mit den bunten Lichtern verglichen werden, die an einem Weihnachtsbaum hängen, und dieser Weihnachtsbaum ist der Fiber-Baum.

Warum gibt es EffectList? Beispielsweise gibt es in einem Fiber-Baum einige Fiber-Knoten, die die Methode componentDidMount ausführen müssen. Wenn der Fiber-Baum erstellt und dann erneut durchlaufen wird, um die Fiber-Knoten zu finden, die componentDidMount ausführen müssen, ist dies sehr ineffizient.

EffectList löst dieses Problem. Wenn während der Konstruktion des Fiber-Baums das flags Feld eines Fiber-Knotens nicht NoFlags ist (was darauf hinweist, dass Nebeneffekte ausgeführt werden müssen), wird der Fiber-Knoten zur EffectList hinzugefügt. Nachdem der Fiber-Baum erstellt wurde, werden auch die durch die Fiber-Knoten aneinandergereihten farbigen Lichter erstellt, sodass Sie nur die farbigen Lichter durchlaufen müssen.

EffectList-Sammlung

EffectList ist eine einseitig verknüpfte Liste. firstEffect stellt den ersten Fiber-Knoten in der verknüpften Liste dar lastEffect stellt den letzten Fiber-Knoten in der verknüpften Liste dar.

Der Aufbau des Fiber-Baums erfolgt tiefenorientiert, d. h., die untergeordneten Fiber-Knoten werden zuerst nach unten aufgebaut, und nachdem die untergeordneten Knoten aufgebaut sind, werden die übergeordneten Fiber-Knoten nach oben aufgebaut, sodass die untergeordneten Fiber-Knoten in der Effektliste immer vorne stehen.

Der Vorgang zum Abschließen der Konstruktion des Fiber-Knotens wird in der Methode completeUnitOfWork ausgeführt. Bei dieser Methode wird nicht nur der Knoten abgeschlossen, sondern auch der Fiber-Knoten mit flags zur EffectList hinzugefügt.

Der vereinfachte Code ist wie folgt.

Funktion kompletteArbeitseinheit(Arbeitseinheit: Fiber): void {
 let abgeschlosseneArbeit = Arbeitseinheit;
 Tun {
  const current = abgeschlosseneArbeit.alternate;
  const returnFiber = abgeschlosseneArbeit.return;
  
  let next = kompletteArbeit(aktuell, kompletteArbeit, subtreeRenderLanes);

  // Effektlistenkonstruktion, wenn (
   returnFiber !== null &&
   (returnFiber.flags & Unvollständig) === NoFlags
  ) {
   // Schicht für Schicht kopieren if (returnFiber.firstEffect === null) {
    returnFiber.firstEffect = abgeschlosseneArbeit.firstEffect;
   }
   if (completedWork.lastEffect !== null) {
    // Dies bedeutet, dass der aktuelle Knoten ein Geschwisterknoten ist, der untergeordnete Knoten eine Auswirkung hat und returnFiber.lastEffect ein Wert zugewiesen wurde, wenn (returnFiber.lastEffect !== null) {
     // Auswirkung der Verbindung von Geschwisterknoten
     returnFiber.lastEffect.nextEffect = abgeschlosseneArbeit.ersterEffect;
    }
    returnFiber.lastEffect = abgeschlosseneArbeit.lastEffect;
   }
   
   const flags = abgeschlosseneArbeit.flags;
   
   // Dieser Faserknoten hat eine Wirkung
   if (flags > DurchgeführteArbeit) {
    // Der aktuelle Knoten hat einen Effekt, der mit der Effektliste verbunden ist
    if (returnFiber.lastEffect !== null) {
     returnFiber.lastEffect.nextEffect = abgeschlossene Arbeit;
    } anders {
     // Der Fall, in dem returnFiber nicht über firstEffect verfügt, ist das erste Mal, dass es auf einen Knoten mit dem Effekt returnFiber.firstEffect = completedWork trifft;
    }
    returnFiber.lastEffect = abgeschlossene Arbeit;
   }
  }

  // Geschwisterelemente durchlaufen und zum übergeordneten Element zurückkehren const siblingFiber = completedWork.sibling;
  if (geschwisterfaser !== null) {
   workInProgress = Geschwisterfaser;
   zurückkehren;
  }
  abgeschlosseneArbeit = returnFiber;
  workInProgress = abgeschlossene Arbeit;
 } während (abgeschlosseneArbeit !== null);
}

EffectList funktioniert tatsächlich wie eine Blase und sammelt Daten Schicht für Schicht bis zur oberen Schicht, beginnend beim ersten Knoten mit flags . Jeder neue Knoten in jeder Schicht kopiert firstEffect und lastEffect des vorherigen Knotens in sich selbst und stellt dem oberen Knoten dann wieder eine Kopie zur Verfügung.

Wie in der folgenden Struktur, wenn jedes div flags hat.

<div id="1">
 <div id="4"/>
 <div id="2">
  <div id="3"/>
 </div>
</div>

Die endgültige Effektliste ist

ersterEffekt => div4
letzterEffekt => div1

Da der Fiber-Baum tiefenorientiert aufgebaut ist, führt alle div4 zuerst completeWork aus und erstellen firstEffect .

Die EffectList-Durchquerung beginnt bei firstEffect und findet den nächsten Knoten über nextEffect jedes Knotens.

ersterEffekt => div4
div4.nextEffect => div3
div3.nextEffect => div2
div2.nextEffect => div1

Effektliste beim ersten Rendern

In React gibt es eine Leistungsoptimierung für den ersten Mount, bei der die flags des Fiber-Knotens nicht placement enthalten und der entsprechende DOM-Knoten nicht durchlaufen und zum DOM-Baum hinzugefügt wird, sondern zum DOM-Baum hinzugefügt wird, wenn der DOM-Knoten erstellt wird. Nur die flags des rootFiber-Knotens FiberRootNode enthalten placement .

EffectList enthält nicht root . Daher müssen Sie root zu EffectList hinzufügen, damit die placement korrekt ausgeführt und der DOM-Baum auf der Seite angezeigt werden kann.

 lass firstEffect;
 // Verbinde auch den Stammknoten finishedWork if (finishedWork.flags > PerformedWork) {
  if (fertigeArbeit.letzterEffekt !== null) {
   fertigeArbeit.letzterEffekt.nächsterEffekt = fertigeArbeit;
   ersterEffekt = fertigeArbeit.ersterEffekt;
  } anders {
   ersterEffekt = fertigeArbeit;
  }
 } anders {
  // Der Stammknoten hat keine Wirkung.
  ersterEffekt = fertigeArbeit.ersterEffekt;
 }

Durchlaufen der Effektliste

EffectList wird hauptsächlich für die Ausführung von Lebenszyklusmethoden der Layoutphase und von DOM-Operationen verwendet.

// getSnapshotBeforeUpdate verarbeiten und useEffect einplanen
nächsterEffekt = ersterEffekt;
Tun {
 commitBeforeMutationEffects();
} während (nächsterEffekt !== null);
//DOM-Operation nextEffect = firstEffect;
Tun {
 commitMutationEffects(root, renderPriorityLevel);
} während (nächsterEffekt !== null);
// Ausführung von Lebenszyklusmethoden nextEffect = firstEffect;
Tun {
 commitLayoutEffects(Wurzel, Fahrspuren);
} während (nächsterEffekt !== null);

In diesen drei Methoden in der Layoutphase wird nextEffect durchlaufen und bei jeder Ausführung erneut auf firstEffect verweisen. Auf die spezifischen Vorgänge in der Layoutphase wird nicht näher eingegangen.

Zusammenfassen

EffectList ist keine globale Variable. Während der Erstellung des Fiber-Baums werden Fiber-Knoten mit effect Schicht für Schicht gesammelt. Der letzte root sammelt alle Fiber-Knoten mit effect . Wir nennen diese verknüpfte Liste mit effect EffectList.

Da der Erfassungsprozess tiefenorientiert ist, werden die untergeordneten Elemente zuerst erfasst, sodass die untergeordneten Elemente während der Durchquerung zuerst bearbeitet werden. Wenn ein Interviewer also fragt, welcher der untergeordneten und übergeordneten Lebenszyklen oder useEffect zuerst ausgeführt wird, wissen Sie eindeutig, dass die untergeordnete Operation zuerst ausgeführt wird.

Das Obige ist eine kurze Analyse der Details von EffectList in React. Weitere Informationen zu EffectList in React finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!