Vorabbilder mit React Spannung vorab

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!