Die Suspense -Funktion von React ist aufregend und kommt und erm?glicht es den Entwicklern, das Rendern ihrer Komponenten leicht zu verz?gern, bis sie ?bereit“ sind, was zu einer reibungsloseren Benutzererfahrung führt. "Vorbereitung" kann sich hier auf viele Aspekte beziehen. Beispielsweise kann Ihr Datenladungsdienstprogramm in Verbindung mit Spannung verwendet werden, damit ein konsistenter Ladestatus angezeigt wird, w?hrend Daten übertragen werden, ohne den Laststatus für jede Abfrage manuell zu verfolgen. Wenn Ihre Daten verfügbar sind und Ihre Komponente "bereit" ist, wird sie rendern. Dies ist das Thema, das am h?ufigsten mit Spannung besprochen wird, und ich habe schon einmal darüber geschrieben. Die Datenbelastung ist jedoch nur einer der vielen Anwendungsf?lle, in denen Spannung die Benutzererfahrung verbessern kann. Ein weiterer Anwendungsfall, über den ich heute sprechen m?chte, ist das Vorladung im Bild.

Haben Sie jemals eine Web -App erstellt oder verwendet, in der Ihre Position beim Erreichen des Bildschirms heruntergeladen und gerendert wird? Wir nennen es die Umlagerung von Inhalten und es ist sowohl schockierend als auch unangenehm. Spannung kann dazu beitragen, dieses Problem zu l?sen. Wussten Sie, dass ich gesagt habe, dass der springende Punkt der Spannung darin besteht, das Rendering von Komponenten zu verhindern, bis es fertig ist? Glücklicherweise ist "Ready" hier sehr offen - für unsere Zwecke kann es "die vorinstallierten Bilder, die wir brauchen" enthalten. Mal sehen, wie es geht!

Spannung schneller Start

Bevor wir uns mit den Details befassen, verstehen wir schnell, wie Spannung funktioniert. Es hat zwei Hauptteile. Zun?chst gibt es das Konzept des Bestandteils des Komponenten. Dies bedeutet, dass React versucht, unsere Komponente zu rendern, aber es ist nicht "bereit". In diesem Fall wird der n?chste "Fallback" im Komponentenbaum gerendert. Wir werden sehen, wie man bald einen Fallback macht (was ziemlich einfach ist), aber die Komponente sagt React, dass es noch nicht fertig ist, ein Versprechen zu machen. React wird das Versprechen erfassen, erkennen, dass die Komponente noch nicht fertig ist, und den Fallback zurückzahlen. Wenn Versprechen Parse, wird React versuchen, erneut zu rendern. Wiederholen Sie diesen Vorgang. Ja, ich bin ein wenig zu vereinfacht, aber das ist der Punkt, wie Spannung funktioniert, und wir werden einige dieser Konzepte im Laufe der Zeit erweitern.

Der zweite Teil der Spannung ist die Einführung einer "übergangs" -Status -Update. Dies bedeutet, dass wir den Zustand festlegen, aber React geben, dass die Zustands?nderungen dazu führen k?nnen, dass die Komponente h?ngen kann, und in diesem Fall wird der Fallback nicht gerendert. Stattdessen m?chten wir den aktuellen Bildschirm weiter ansehen, bis das Statusaktualisierung fertig ist. Zu diesem Zeitpunkt wird es rendern. Natürlich bietet React uns einen "ausstehenden" Booleschen Indikator, mit dem Entwickler wissen, dass dieser Prozess im Gange ist, damit wir Inline -Last -Feedback geben k?nnen.

Lassen Sie uns einige Bilder vorladen!

Erstens m?chte ich darauf hinweisen, dass es eine vollst?ndige Demo gibt, die wir am Ende dieses Artikels machen. Wenn Sie nur in den Code springen m?chten, k?nnen Sie jetzt die Demo ?ffnen. Es wird zeigen, wie Spannung in Verbindung mit den Aktualisierungen des übergangszustands verwendet wird, um Bilder vorzuladen. Der Rest dieses Beitrags erstellt den Code Schritt für Schritt und erkl?rt, wie und warum unterwegs.

Ok, lass uns anfangen!

Wir m?chten, dass unsere Komponenten h?ngen, bis alle Bilder vorinstalliert sind. Um den Vorgang so weit wie m?glich zu vereinfachen, lassen Sie uns a erstellen<suspenseimage></suspenseimage> Komponente, die das SRC -Attribut empf?ngt, das Bild vorl?dt, Ausnahmewürfe verarbeitet und dann a rendert a <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358885649082.png" class="lazy" alt="Vorabbilder mit React Spannung vorab"> Verwenden Sie Bilder in HTML, aber wir k?nnen auch Bilder mit Image() -Objekt in JavaScript auf imperativen Weise erstellen. Au?erdem hat das Bild, das wir auf diese Weise erstellen, einen onload -Rückruf, der ausgeladen wird, wenn das Bild geladen wird. Es sieht so aus:

 const img = new Image ();
img.onload = () => {
  // Das Bild ist geladen};

Aber wie kombinieren wir es mit Ausnahmemerken? Wenn Sie wie ich sind, k?nnen Sie zuerst an so etwas denken:

 const suspenseImg = ({src, ... rest}) => {
  Neues Versprechen werfen ((Resolve) => {
    const img = new Image ();
    img.onload = () => {
      l?sen();
    };
    img.src = src;
  });
  Zurückkehren<img alt="" src="%7Bsrc%7D"> ;
};

Das Problem ist natürlich, dass dies immer ein Versprechen geben wird. Jedes Mal, wenn Reagieren Versuche zu rendern<suspenseimg></suspenseimg> Wenn eine Instanz im Gange ist, wird ein neues Versprechen erstellt und sofort geworfen. Stattdessen wollen wir nur ein Versprechen geben, bevor das Bild l?dt. Es gibt ein altes Sprichwort, dass jedes Problem in der Informatik gel?st werden kann, indem eine Indirektionschicht hinzugefügt wird (mit Ausnahme des Problems zu vieler Indirektion). Wenn wir SRC lesen, prüft der Cache, ob er das Bild geladen hat. Wenn nicht, beginnt er vor dem Vorladen und macht eine Ausnahme. Und wenn das Bild vorinstalliert ist, wird es einfach wahr zurückgegeben und React weiterhin unser Bild rendern.

Das geh?rt uns<suspenseimage></suspenseimage> Wie die Komponente aussieht:

 Export const const spenseImg = ({src, ... rest}) => {
  imgcache.read (SRC);
  Zurückkehren<img  src="%7Bsrc%7D" alt="Vorabbilder mit React Spannung vorab" > ;
};

So sieht die minimale Version, die wir zwischengespeichert haben, aus:

 const imgcache = {
  __cache: {},
  Read (src) {
    if (! this .__ cache [src]) {
      Dieser .__ Cache [SRC] = New Promise ((Resolve) => {
        const img = new Image ();
        img.onload = () => {
          Dieser .__ Cache [Src] = true;
          Resolve (this .__ Cache [SRC]);
        };
        img.src = src;
      });
    }
    if (this .__ cache [src] Instanz von Versprechen) {
      Wirf diesen .__ Cache [SRC];
    }
    Gibt diesen Cache [SRC] zurück;
  }
};

Es ist nicht perfekt, aber es reicht vorerst aus. Nutzen wir es weiter.

erreichen

Denken Sie daran, unten finden Sie einen Link zu einer voll funktionsf?higen Demo. Verzweifeln Sie also nicht, wenn ich mich in einem bestimmten Schritt zu schnell bewege. Wir werden erkl?ren, wie wir gehen.

Beginnen wir zun?chst unseren Fallback. Wir definieren den Fallback, indem wir ein Spannungs -Tag in den Komponentenbaum platzieren und unser Fallback -Attribut übergeben. Jede anstehende Komponente wird das neueste Spannungstennzeichen durchsuchen und seinen Fallback rendern (aber wenn das Spannungs -Tag nicht gefunden wird, wird ein Fehler geworfen). Eine echte Anwendung kann w?hrend des gesamten Prozesses viele Spannungs -Tags haben und bestimmte Fallbacks für ihre individuellen Module definieren. Für diese Demonstration ben?tigen wir jedoch nur ein Tag, das unsere Root -Anwendung umhüllt.

 Funktion App () {
  Zurückkehren (
    <suspense fallback="{<Loading"></suspense> }>
      <showimages></showimages>
    
  );
}

<loading></loading> Komponenten sind ein grundlegender Spinner, aber in realen Anwendungen m?chten Sie m?glicherweise eine Art leere Hülle der Komponente machen, die Sie tats?chlich versuchen zu rendern, um ein nahtloseres Erlebnis zu bieten.

Damit unsere<showimages></showimages> Die Komponente wird unser Bild schlie?lich mit Folgendes rendern:

<div>
  {images.map ((img) => (
    <div key="{img}">
      <suspenseimg alt="" src="%7Bimg%7D"></suspenseimg>
    </div>
  ))}
</div>

Bei der ersten Belastung werden unsere Ladespinner angezeigt, bis unsere anf?nglichen Bilder fertig sind. Zu diesem Zeitpunkt werden sie gleichzeitig ohne Verschlechterungsverz?gerungen angezeigt.

übergangsstatus -Update

Sobald die Bilder vorhanden sind, m?chten wir, dass sie nach dem Laden der n?chsten Bilder die n?chste Bilder laden, wenn sie das vorhandene Bild beim Laden auf dem Bildschirm aufbewahren. Wir verwenden den useTransition -Haken, um dies zu tun. Dies gibt eine startTransition -Funktion und einen isPending Booleschen zurück, der darauf hinweist, dass unser Statusaktualisierung in Arbeit ist, aber ausgesetzt wurde (oder selbst wenn es nicht ausgesetzt wurde, kann es immer noch zutreffen, wenn das Status -Update einfach zu lange dauert). Schlie?lich müssen Sie bei useTransition auf einen timeoutMs -Wert bestehen. Dies ist die maximale Zeit, die das isPending -Flag zutreffend sein kann. Danach wird der Fallback aufgeben und den Fallback aufgeben (beachten Sie, dass timeoutMs m?glicherweise in naher Zukunft gel?scht wird, und wenn ein vorhandener Inhalt aktualisiert wird, muss der übergangszustand nur so lange warten).

So sehe ich aus:

 const [startTransition, iSpending] = Usetransition ({Timeouts: 10000});

Wir werden zulassen, dass 10 Sekunden vor unserem Fallback -Display passieren, was im wirklichen Leben zu lang sein kann, aber für diese Demonstration angemessen ist, insbesondere wenn Sie das Netzwerk in Devtools für Experimente absichtlich verlangsamen k?nnen.

Hier erfahren Sie, wie man es benutzt. Wenn Sie auf die Schaltfl?che klicken, die weitere Bilder l?dt, sieht der Code so aus:

 starttransition (() => {
  Setpage ((p) => p 1);
});

Dieses Status-Update l?st eine neue Datenlast mithilfe meines GraphQL-Client-Micro-Graphql-Reaktes aus, was mit Spannung kompatibel ist und uns ein Versprechen für uns macht, wenn die Abfrage im Gange ist. Sobald die Daten zurückgegeben sind, wird unsere Komponente versuchen, wieder zu rendern und zu h?ngen, wenn unser Bild vorinstalliert ist. W?hrend all dies geschieht, wird unser isPending Wert wahr sein, sodass wir den Ladespinner oben am vorhandenen Inhalt anzeigen k?nnen.

Vermeiden Sie Internet -Wasserf?lle

Sie fragen sich vielleicht, wie React das Rendering blockieren kann, w?hrend das Bildvorladen im Gange ist. Verwenden Sie den obigen Code, wenn wir dies tun:

 {images.map ((img) => (

... und was wird darin gerendert<suspenseimage></suspenseimage> , Reagieren versuchen, das erste Bild zu rendern, h?ngen und dann die Liste wiederholen, das erste Bild (jetzt in unserem Cache) überschreiten und dann das zweite Bild h?ngen, dann das dritte, vierte usw. Wenn Sie zuvor über Spannung gelesen haben, fragen Sie sich m?glicherweise, ob wir alle Bilder in der Liste manuell vor der Liste vor dem Vorkommen vorlegen müssen.

Es stellt sich heraus, dass es sich nicht n?tig ist, sich Sorgen zu machen oder unangenehm vorl?dt zu werden, da React ziemlich klug ist, wie es die Dinge in der spannenden Welt macht. Wenn React unseren Komponentenbaum durchquert, h?rt es nicht auf, wenn er auf eine anstehende Begegnung sto?en. Stattdessen versucht es weiterhin, alle anderen Wege in unserem Komponentenbaum zu rendern. Also ja, wenn es versucht, Bild 0 zu rendern, tritt ein Hang auf, aber React wird weiterhin versuchen, Bild 1 bis n zu rendern, bevor es h?ngt.

Sie k?nnen dies anzeigen, indem Sie die Registerkarte Netzwerk in der vollst?ndigen Demo anzeigen, wenn ein neuer Bildsatz geladen wird. Sie sollten den gesamten Image -Bucket sofort in der Netzwerkliste angezeigt, analysiert und nach Abschluss der Ergebnisse sollten auf dem Bildschirm angezeigt werden. Um diesen Effekt wirklich zu verst?rken, m?chten Sie m?glicherweise Ihre Netzwerkgeschwindigkeit auf "Fast 3G" reduzieren.

Zum Spa? k?nnen wir die Spannung erzwingen, unsere Bilder zu durchqueren, indem wir jedes Bild aus unserem Cache manuell lesen, bevor React versucht, unsere Komponenten zu rendern und jeden Weg im Komponentenbaum zu durchqueren.

 Images.foreach ((img) => imgcache.read (img));

Ich habe eine Demo erstellt, um dies zu veranschaulichen. Wenn Sie beim Laden eines neuen Bildsatzes auch die Registerkarte Netzwerk anzeigen, werden Sie feststellen, dass sie der Netzwerkliste in der Reihenfolge hinzugefügt werden (aber diese jedoch nicht mit einer Verlangsamung des Netzwerks ausführen).

Verz?gerter Hang

Wenn Sie Suspense verwenden, müssen Sie sich an eine Schlussfolgerung erinnern: H?ngen Sie so sp?t wie m?glich beim Rendering und der unteren Ebene des Komponentenbaums. Wenn Sie einige aufgeh?ngte Bilder machen<imagelist></imagelist> Stellen Sie sicher, dass jedes Bild in seiner eigenen Komponente suspendiert ist, sodass React separat darauf zugreifen kann, damit keine Bilder andere Bilder blockieren, was zu einem Wasserfall führt.

Die Datenladeversion dieser Regel lautet, dass die Daten von den Komponenten, die sie tats?chlich ben?tigen, so weit wie m?glich geladen werden sollten. Dies bedeutet, dass wir es vermeiden sollten, Folgendes in einer Komponente zu erledigen:

 const {data1} = usesuSpenseQuery (query1, vars1);
const {data2} = useSuSpenseQuery (query2, vars2);

Der Grund, warum wir dies vermeiden m?chten, ist, dass die Frage eine h?ngen und dann zwei befragt, was den Wasserfall verursacht. Wenn dies überhaupt nicht vermeidbar ist, müssen wir beide Abfragen manuell aufladen, bevor wir aufh?ngen.

Demo

Hier ist eine Demonstration meines Engagements. Es ist dasselbe wie die Demo, die ich oben verlinkt habe.

?ffnen Sie die Demo, wenn Sie sie ausführen und das Entwicklungstool ?ffnen. Deaktivieren Sie das auf der Registerkarte "Devtools" angezeigte Deaktivierungs -Cache -Box, oder Sie werden die gesamte Demo brechen.

Der Code ist fast der gleiche wie der, den ich zuvor gezeigt habe. Eine Verbesserung der Demo besteht darin, dass unsere Cache -Lesemethode die folgenden Zeilen enth?lt:

 setTimeout (() => Resolve ({}), 7000);

Alle Bilder gut vorladen, aber im wirklichen Leben m?chten wir m?glicherweise nicht auf unbestimmte Zeit blockieren, einfach weil ein oder zwei hinter den Bildern langsam laden. Nach einer Weile geben wir einfach das grüne Licht, auch wenn das Bild nicht fertig ist. Benutzer sehen ein oder zwei Bilder, aber dies ist besser, als die Frustration des Software -Einfrierens zu ertragen. Ich m?chte auch darauf hinweisen, dass sieben Sekunden zu lang sein k?nnen, aber für diese Demo gehe ich davon aus, dass Benutzer das Netzwerk in Devtools verlangsamen k?nnen, um die Suspense -Funktionalit?t klarer und hoffentlich zu sehen.

Die Demo hat auch Kontrollk?stchen Precache Image. Es ist standardm??ig ausgew?hlt, aber Sie k?nnen es deaktivieren, um normal zu verwenden<img alt="Vorabbilder mit React Spannung vorab" > Tagersatz<suspenseimage></suspenseimage> Komponente, wenn Sie die Suspense -Version mit "Normal React" vergleichen m?chten (überprüfen Sie sie einfach nicht, wenn das Ergebnis angezeigt wird, andernfalls kann die gesamte Benutzeroberfl?che h?ngen und den Fallback rendern).

Schlie?lich k?nnen einige Zust?nde wie Codesandbox manchmal nicht synchronisiert sein.

Verschiedenes

Ich habe versehentlich einen gro?en Fehler gemacht, als ich diese Demo zusammenstellte. Ich m?chte nicht, dass die Demo ihren Effekt verliert, da der Browser das Bild, das sie heruntergeladen hat, vorgeordnet ist. Daher modifiziere ich alle URLs manuell mit einem Cache -Breaker:

 const [cacheBuster, setCacheBuster] = usestate (initial_time);

const {data} = useSuspenseQuery (get_images_query, {page});
const images = data.allbooks.books.map (
  (b) => b.smallimage `? cacheBust = $ {cacheBuster}`
);

Initial_time wird auf Modulebene definiert (d. H. Global):

 const initial_time = new Date ();

Wenn Sie sich fragen, warum ich das nicht getan habe:

 const [cacheBuster, setCacheBuster] = usustate (new Date ());

... das liegt daran, dass es schreckliche und schreckliche Konsequenzen haben kann. Beim ersten Rendering versucht das Bild zu rendern. Cache bewirkt, dass das Rendering von St?ckeln abh?ngt und unseren Fallback zeigt. Wenn alle Versprechungen analysiert wurden, wird React versuchen, das Rendern wieder initial zu integrieren, und unser anf?nglicher Gebrauchsaufruf wird erneut ausgeführt , was bedeutet:

 const [cacheBuster, setCacheBuster] = usustate (new Date ());

... wird mit einem neuen Anfangswert umgeleitet, der zu einem brandneuen Satz von Bild -URLs führt, die wieder auf unbestimmte Zeit h?ngen. Die Komponenten werden niemals ausgeführt, und die Codesandbox -Demo wird nicht mehr ausgeführt (was das Debuggen frustrierend macht).

Dies scheint eine seltsame Sonderausgabe zu sein, die durch die einzigartigen Anforderungen dieser speziellen Demonstration verursacht wird, aber es gibt eine gr??ere Lektion: Das Rendering sollte rein sein und hat keine Nebenwirkungen. React sollte in der Lage sein, Ihre Komponente mehrmals neu zu rendern, und (bei derselben anf?nglichen Requisite) sollte vom anderen Ende den gleichen genauen Zustand erhalten.

Das obige ist der detaillierte Inhalt vonVorabbilder mit React Spannung vorab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!