In diesem Artikel wird der Arbeitsmechanismus, die Funktionalit?t von React -Spannung und die Integration in reale Webanwendungen untersucht. Wir werden lernen, wie man Routing und Datenbelastung mit Spannung in React integriert. Zum Routing werde ich native JavaScript verwenden und meine eigene Micro-Graphql-Reaktions-GraphQL-Bibliothek für die Datenverarbeitung verwenden.

Wenn Sie in Betracht ziehen, React Router zu verwenden, sieht es gut aus, aber ich hatte nie die Chance, ihn zu verwenden. Mein pers?nliches Projekt hat eine einfache Routing -L?sung, die ich immer manuell gemacht habe. Die Verwendung natives JavaScript bietet uns au?erdem ein besseres Verst?ndnis dafür, wie Spannung funktioniert.

Kurzer Hintergrund

Sprechen wir über Spannung selbst. Kingsley Silas gibt einen umfassenden überblick darüber, aber das erste, was zu beachten ist, ist, dass es sich immer noch um eine experimentelle API handelt. Dies bedeutet - und die Dokumentation von React sagt dies nicht für die Arbeit in einer Produktionsumgebung. Es kann sich jederzeit ?ndern, bis es vollst?ndig abgeschlossen ist. Denken Sie also daran.

Das hei?t, der Kern der Spannung liegt in der Aufrechterhaltung einer konsistenten Benutzeroberfl?che, wenn asynchrone Abh?ngigkeiten (z. B. faule Lade -React -Komponenten, GraphQL -Daten usw.). Suspense bietet APIs auf niedrigem Niveau, mit denen Sie die Benutzeroberfl?che einfach verwalten k?nnen, wenn Ihre Anwendung diesen Inhalt verwaltet.

Aber was bedeutet in diesem Fall "konsistent"? Dies bedeutet, dass die teilweise abgeschlossene Benutzeroberfl?che nicht gerendert wird . Dies bedeutet, dass, wenn es drei Datenquellen auf der Seite gibt, von denen eine abgeschlossen ist, wir das aktualisierte Zustandsfragment und die Lastanzeigen für die beiden anderen veralteten Zustandsfragmente daneben nicht rendern m?chten.

Was wir tun m?chten , ist dem Benutzer anzugeben, dass die Daten geladen werden, w?hrend wir weiterhin die alte Benutzeroberfl?che angezeigt oder eine alternative Benutzeroberfl?che anzeigen, um anzuzeigen, dass wir auf die Daten warten. Suspense unterstützt beide, die ich sp?ter detaillierter eingehen werde.

Die genaue Funktion der Spannung

Dies ist viel einfacher als es scheint. In React haben Sie traditionell den Status festgelegt und Ihre Benutzeroberfl?che wird aktualisiert. Das Leben ist einfach. Es führt aber auch zu Inkonsistenzen in den oben genannten Typen. Suspense fügt eine Funktion hinzu, mit der die Komponente reagieren kann, wenn sie auf asynchrone Daten wartet. Dies wird als Hang bezeichnet, der überall im Komponentenbaum passieren kann und bei Bedarf mehrmals auftreten kann, bis der Baum fertig ist. Wenn eine Komponente h?ngt, weigert sich React, das suspendierte Status -Update zu machen, bis alle ausstehenden Abh?ngigkeiten erfüllt sind.

Was passiert also, wenn die Komponente suspendiert wird? React schaut den Baum hoch und findet den ersten<suspense></suspense> Komponente und machen seinen Fallback -Inhalt. Ich werde viele Beispiele angeben, aber vorerst wissen Sie bitte, dass Sie Folgendes angeben k?nnen:

<suspense fallback="{<Loading"></suspense> }>

……Wenn<suspense></suspense> Alle Kinderkomponenten des Hangs werden gerendert<loading></loading> Komponenten.

Aber was passiert, wenn wir bereits eine gültige, konsistente Benutzeroberfl?che haben und der Benutzer neue Daten l?dt, was dazu führt, dass die Komponente h?ngt? Dies führt dazu, dass die gesamte vorhandene Benutzeroberfl?che nicht enth?lt und den Fallback -Inhalt darstellt. Dies ist immer noch konsistent, aber keine gute Benutzererfahrung. Wir m?chten lieber, dass die alte Benutzeroberfl?che auf dem Bildschirm bleibt, wenn neue Daten geladen werden.

Um dies zu unterstützen, bietet React eine zweite API, useTransition , die effektiv Zustands?nderungen im Ged?chtnis erfolgt. Mit anderen Worten, Sie k?nnen den Zustand im Speicher festlegen und gleichzeitig die vorhandene Benutzeroberfl?che auf dem Bildschirm aufbewahren. Reagieren Sie buchst?blich eine zweite Kopie des Komponentenbaums im Speicher und legt den Zustand auf diesem Baum fest. Die Komponente kann h?ngen, aber nur im Speicher h?ngt, sodass Ihre vorhandene Benutzeroberfl?che weiterhin auf dem Bildschirm angezeigt wird. Wenn die Zustands?nderung abgeschlossen ist und die gesamte ausstehende L?sung aufgel?st wird, wird die Zustands?nderung des Speichers auf den Bildschirm gerendert. Offensichtlich m?chten Sie dem Benutzer im Vorgang Feedback geben, sodass useTransition einen pending booleschen Wert bietet, mit dem Sie eine Art Inline -Lastbenachrichtigung anzeigen k?nnen, w?hrend Sie die anstehende im Speicher aufl?sen.

Wenn Sie es in Betracht ziehen, m?chten Sie m?glicherweise keine vorhandene Benutzeroberfl?che auf unbestimmte Zeit anzeigen, wenn die Last suspendiert wird. Wenn der Benutzer versucht, etwas auszuführen und eine lange Zeit vergangen ist, bevor es fertig ist, sollten Sie wahrscheinlich in Betracht ziehen, dass die vorhandene Benutzeroberfl?che veraltet und ungültig ist. Zu diesem Zeitpunkt m?chten Sie m?glicherweise , dass Ihr Komponentenbaum h?ngen und anzeigen kann<suspense></suspense> Inhalt zurückspulen.

Um dies zu erreichen, nimmt die useTransition den timeoutMs . Dies bedeutet, dass Sie bereit sind, den In-Memory-Zustand für die Zeit vor dem Aufh?ngen zu ver?ndern zu lassen.

 const component = props => {
  const [startTransition, iSpending] = Usetransition ({Timeouts: 3000});
  // .....
};

Hier ist startTransition eine Funktion. Wenn Sie eine Status?nderung "im Speicher" ausführen m?chten, k?nnen Sie startTransition aufrufen und einen Lambda -Ausdruck übergeben, der die Zustands?nderung durchführt.

 starttransition (() => {
  Dispatch ({Typ: load_data_or_ething, Wert: 42});
});

Sie k?nnen startTransition überall anrufen. Sie k?nnen es an untergeordnete Komponenten usw. weitergeben. Wenn Sie es nennen, werden alle staatlichen ?nderungen im Speicher stattfinden. Wenn eine anstehende Ausübung auftritt, wird isPending wahr, mit der Sie eine Art Inline -Lastanzeige anzeigen k?nnen.

Das war's. Das macht Spannung.

Der Rest dieses Artikels führt einen tats?chlichen Code ein, um diese Funktionen zu nutzen.

Beispiel: Navigation

Um die Navigation mit Spannung zu verbinden, werden Sie sich freuen zu wissen, dass React einen primitiven dafür bietet: React.lazy . Es ist eine Funktion, die einen Lambda -Ausdruck akzeptiert, der ein Versprechen zurückgibt, das sich in eine React -Komponente aufl?st. Das Ergebnis dieses Funktionsaufrufs wird zu Ihrer faulen Ladekomponente. Es klingt kompliziert, aber es sieht so aus:

 const EinstellungenComponent = Lazy (() => import ("./ Module/Einstellungen/Einstellungen"));

SettingsComponent ist jetzt eine React -Komponente, die bei gerenderter (jedoch nicht zuvor) die von uns übergebene Funktion aufruft, in der import() und das JavaScript -Modul in ./modules/settings/settings laden.

Der Hauptteil ist: W?hrend import() im Gange ist die Komponente, die SettingsComponent rendert, h?ngt. Es sieht so aus, als h?tten wir alle Komponenten in der Hand, also lass sie sie zusammenstellen und eine spannungsbasierte Navigation bauen.

Navigationsassistentenprogramm

Um einen Kontext bereitzustellen, werde ich zun?chst kurz vorstellen, wie der Navigationsstatus in dieser Anwendung verwaltet wird, damit der Spannungscode sinnvoller ist.

Ich werde meine Buchliste -Anwendung verwenden. Es ist nur ein pers?nliches Projekt von mir, das ich haupts?chlich mit modernsten Webtechnologien experimentieren kann. Es wurde allein von mir geschrieben, also erwarten Sie, dass ein Teil davon etwas rau ist (insbesondere das Design).

Die App ist klein und Benutzer k?nnen ungef?hr acht verschiedene Module ohne tiefere Navigation durchsuchen. Jeder Suchstatus, den das Modul verwenden kann, wird in der Abfragezeichenfolge der URL gespeichert. Vor diesem Hintergrund gibt es M?glichkeiten, den aktuellen Modulnamen und den Suchstatus aus der URL zu extrahieren. Dieser Code verwendet query-string und history von NPM, die ein bisschen so aussieht (einige Details wurden zur Einfachheit halber entfernt, wie z. B. Authentifizierung).

 Import CreateHistory aus "History/CreateBrowserHistory";
Importieren von QueryString von "Query-String";
Export const history = createHistory ();
Exportfunktion getCurrenturlstate () {
  lass location = history.location;
  let Parsed = queryString.parse (location.Search);
  zurückkehren {
    Pfadname: Ort.PathName,
    SearchState: Parsen
  };
}
Exportfunktion getCurrentModuleFromUrl () {
  lass location = history.location;
  Rückgabeort.PathName.Replace (/\ // g, "") .tolowerCase ();
}

Ich habe einen appSettings -Reduzierer, der das aktuelle Modul- und searchState -Werte der Anwendung h?lt und diese Methoden verwendet, um bei Bedarf mit der URL zu synchronisieren.

Spannungsbasierte Navigationskomponenten

Beginnen wir mit einigen Spannungsarbeiten. Lassen Sie uns zun?chst faul geladene Komponenten für unser Modul erstellen.

 const activateComponent = lazy (() => import ("./ Module/Aktivieren/Aktivieren"));
const authenticateComponent = lazy (() => import ("./ Module/authentikat/authentifiziert"));
const booksComponent = lazy (() => import ("./ Module/Bücher/Bücher"));
const homecomponent = lazy (() => import ("./ modules/home/home"));
const Scancomponent = Lazy (() => import ("./ Module/Scan/Scan"));
const fatchscomponent = lazy (() => import ("./ Module/Subjekte/Subjekte"));
const EinstellungenComponent = Lazy (() => import ("./ Module/Einstellungen/Einstellungen"));
const admincomponent = lazy (() => import ("./ modules/admin/admin"));

Jetzt brauchen wir eine M?glichkeit, die richtige Komponente basierend auf dem aktuellen Modul auszuw?hlen. Wenn wir React Router verwenden, haben wir einige nette<route></route> Komponenten. Da wir dies manuell tun, funktioniert switch -Anweisung.

 Export const getModulecomponent = moduletoload => {
  if (moduletoload == null) {
    null zurückkehren;
  }
  Switch (moduletoload.tolowerCase ()) {
    Fall "aktivieren":
      ActivateComponent zurückgeben;
    Fall "authentifiziert":
      return authenticatecomponent;
    Fall "Bücher":
      bookscomponent zurückkehren;
    Fall "Zuhause":
      Homecomponent zurückkehren;
    Fall "Scan":
      Return Scancomponent;
    Fall "Themen":
      Rückgabef?cherkomponenten;
    Fall "Einstellungen":
      Rückgabeeinstellungen Component;
    Fall "Administrator":
      Rückkehr Admincomponent;
  }

  Homecomponent zurückkehren;
};

Alles zusammensetzen

Nachdem alle langweiligen Setups durchgeführt wurden, sehen wir sehen, wie die gesamte Anwendungswurzel aussieht. Hier gibt es viel Code, aber ich verspreche, dass relativ wenige dieser Zeilen mit Spannung zusammenh?ngen und ich alle abdecken werde.

 const app = () => {
  const [starttransitionNewmodule, isNewmodulePending] = Usetransition ({{{{
    Timeouts: 3000
  });
  const [startTransitionModulUpdate, moduleupdatepending] = usetransition ({{{{{{{
    Timeouts: 3000
  });
  lass AppStatePacket = useAppstate ();
  Sei [AppState, _, Dispatch] = AppStatePacket;
  component = getModulecomponent (AppState.module);
  useEffect (() => {
    startTransitionNewmodule (() => {
      Dispatch ({Typ: url_sync});
    });
  }, []);
  useEffect (() => {
    return history.listen (location => {
      if (appstate.module! = getCurrentModuleFromUrl ()) {
        startTransitionNewmodule (() => {
          Dispatch ({Typ: url_sync});
        });
      } anders {
        startTransitionModuleUpdate (() => {
          Dispatch ({Typ: url_sync});
        });
      }
    });
  }, [AppState.module]);
  Zurückkehren (
    <appcontext.provider value="{appStatePacket}">
      <moduleupdatecontext.provider value="{moduleUpdatePending}">
        <div>
          <mainnavigationbar></mainnavigationbar>
          {isNewModulePending?<loading></loading> : null}
          <suspense fallback="{<LongLoading"></suspense> }>
            <div style="{{" flex: overflowy:>
              {Komponente?<component updating="{moduleUpdatePending}"></component> : null}
            </div>
          
        </div>
      </moduleupdatecontext.provider>
    </appcontext.provider>
  );
};

Zuerst haben wir zwei verschiedene Anrufe zum useTransition get?tigt. Wir verwenden eine, um das neue Modul und das andere zu leiten, um den Suchstatus des aktuellen Moduls zu aktualisieren. Warum gibt es einen Unterschied? Nun, das Modul m?chte m?glicherweise eine Inline -Lastanzeige anzeigen, wenn der Suchstatus des Moduls aktualisiert wird. Der Aktualisierungsstatus wird durch die moduleUpdatePending -Variable gespeichert. Sie werden feststellen, dass ich ihn in den Kontext stecke, damit das aktive Modul abgerufen und bei Bedarf verwendet werden kann:

<div>
  <mainnavigationbar></mainnavigationbar>
  {isNewModulePending?<loading></loading> : null}
  <suspense fallback="{<LongLoading"></suspense> }>
    <div style="{{" flex: overflowy:>
      {Komponente?<component updating="{moduleUpdatePending}"></component> : null}
    </div>
  
</div>

appStatePacket ist das Ergebnis des oben diskutierten (aber nicht gezeigten) Anwendungszustands. Es enth?lt verschiedene Anwendungszustandsfragmente, die selten ver?ndert werden (Farbthema, Offline -Status, aktuelles Modul usw.).

 lass AppStatePacket = useAppstate ();

Sp?ter erhalte ich eine aktive Komponente basierend auf dem aktuellen Modulnamen. Anfangs wird dies null sein.

 component = getModulecomponent (AppState.module);

Der erste Aufruf zur useEffect zeigt uns, dass appSettings -Reduzierer beim Start mit der URL synchronisiert wird.

 useEffect (() => {
  startTransitionNewmodule (() => {
    Dispatch ({Typ: url_sync});
  });
}, []);

Da dies das anf?ngliche Modul ist, zu dem die Webanwendung navigiert, wickle ich es in startTransitionNewModule ein, um anzuzeigen, dass das neue Modul geladen wird. W?hrend es verlockend sein k?nnte, den ersten Modulnamen des Reduzierers als Ausgangszustand festzulegen, hindert uns dies daran startTransitionNewModule -Rückruf aufzurufen. Dies bedeutet, dass unsere Spannungsgrenze den Fallback -Inhalt sofort und nicht nach der Zeitüberschreitung macht.

Ein Verlaufsabonnement wird auf den n?chsten Anruf eingestellt, um Effectect zu useEffect . Wie auch immer, wenn sich die URL ?ndert, werden wir unsere Anwendungseinstellungen mit der URL angeben. Der einzige Unterschied besteht darin, dass startTransition der gleiche Anruf verpackt ist.

 useEffect (() => {
  return history.listen (location => {
    if (appstate.module! = getCurrentModuleFromUrl ()) {
      startTransitionNewmodule (() => {
        Dispatch ({Typ: url_sync});
      });
    } anders {
      startTransitionModuleUpdate (() => {
        Dispatch ({Typ: url_sync});
      });
    }
  });
}, [AppState.module]);

Wenn wir in ein neues Modul st?bern, werden wir startTransitionNewModule nennen. Wenn wir eine nicht geladene Komponente laden, h?ngt React.lazy . Aufgrund der Funktionsweise useTransition wird der aktuelle Bildschirm drei Sekunden lang weiter angezeigt. Wenn diese Zeit überschritten wird und die Komponente noch nicht fertig ist, h?ngt unsere Benutzeroberfl?che und der Fallback -Inhalt wird gerendert, was angezeigt wird<longloading></longloading> Komponenten:

 {isNewModulePending?<loading></loading> : null}
<suspense fallback="{<LongLoading"></suspense> }>
  <div style="{{" flex: overflowy:>
    {Komponente?<component updating="{moduleUpdatePending}"></component> : null}
  </div>

Wenn wir das Modul nicht ?ndern, werden wir startTransitionModuleUpdate nennen:

 startTransitionModuleUpdate (() => {
  Dispatch ({Typ: url_sync});
});

Wenn das Update einen Hang verursacht, wird der Hang -Indikator, den wir in den Kontext setzen, abgefeuert. Die aktive Komponente kann dies erkennen und alle gewünschten Inline -Lastanzeigen anzeigen. Wenn die H?ngezeit nach wie vor drei Sekunden überschreitet, wird die gleiche Spannungsgrenze ausgel?st ... es sei denn, wir werden sp?ter sehen, dass die Spannungsgrenze im unteren Teil des Baumes existiert.

Eine wichtige Sache zu beachten ist, dass diese drei Sekunden Zeitüberschreitungen nicht nur für das Laden von Komponenten, sondern auch für die Bereitschaft angegeben sind. Wenn die Komponente in zwei Sekunden geladen ist und beim Rendern im Speicher (da wir uns im startTransition -Anruf befinden) aufgeh?ngt ist, warten useTransition weiterhin auf eine Sekunde, bevor sie erneut h?ngt.

W?hrend ich diesen Beitrag schrieb, habe ich den langsamen Netzwerkmodus von Chrom verwendet, um das Laden zu erzwingen, um langsamer zu werden, um meine Spannungsgrenzen zu testen. Die Einstellungen befinden sich in der Registerkarte "Netzwerk" von Chrome Development Tools.

?ffnen wir unsere Anwendung zum Einstellungsmodul. Dies wird genannt:

 Dispatch ({Typ: url_sync});

Unser appSettings -Reduzierer synchronisiert mit der URL und setzt das Modul dann auf "Einstellungen". Dies geschieht in startTransitionNewModule , damit es h?ngt, wenn die faul geladene Komponente versucht, sie zu rendern. Da wir uns in startTransitionNewModule befinden, wechselt isNewModulePending zu True und wird rendern<loading></loading> Komponenten.

Was passiert also, wenn wir zu einem neuen Ort steigen? Im Grunde genauso wie zuvor, au?er diesem Anruf:

 Dispatch ({Typ: url_sync});

... wird aus der zweiten Instanz der useEffect sein. Lassen Sie uns zum Buchmodul suchen und sehen, was passiert. Erstens zeigt der Inline -Spinner wie erwartet:

(Screenshots sollten hier eingefügt werden)

Suche und Update

Lassen Sie uns im Buchmodul bleiben und die URL -Abfrage -Zeichenfolge aktualisieren, um eine neue Suche zu starten. Erinnern Sie sich daran, dass wir dasselbe Modul im zweiten useEffect -Aufruf erkannt und einen dedizierten useTransition -Aufruf dafür verwendet haben. Von dort setzen wir den Suspend -Indikator in den Kontext so ein, dass jedes aktive Modul, das für uns abgerufen und verwendet werden kann.

Schauen wir uns einen Code an, der ihn tats?chlich verwendet. Hier gibt es keinen viel spannungsbezogenen Code. Ich erhalte den Wert aus dem Kontext und mache einen Inline -Spinner über meine vorhandenen Ergebnisse. Erinnern Sie sich daran, dass dies geschieht, wenn der useTransition -Anruf begonnen hat und die Anwendung im Speicher ausgesetzt ist. W?hrend dieser Zeit werden wir weiterhin die vorhandene Benutzeroberfl?che angezeigt, jedoch mit diesem Lastanzeige.

 const bookResults = ({books, uIview}) => {
  const isupdating = usecontext (modulEpdateContext);
  Zurückkehren (
    <div>
      {! books.length? (
        <div classname="alert alert-warning" style="{{" margintop: marginright:>
          Keine Bücher gefunden
        </div>
      ): null}
      {isupdating?<loading></loading> : null}
      {UIView.isGridView? (
        <gridview books="{books}"></gridview>
      ): uiView.isBasicList? (
        <basiclistview books="{books}"></basiclistview>
      ): uiView.iscoverSlist? (
        <coversview books="{books}"></coversview>
      ): null}
    </div>
  );
};

Lassen Sie uns einen Suchbegriff einrichten und sehen, was passiert. Zun?chst wird der Inline -Spinner angezeigt.

Wenn useTransition zeitlich festgelegt ist, erhalten wir den Fallback -Inhalt der Spannungsgrenze. Das Buchmodul definiert seine eigene Spannungsgrenze, um einen feineren Ladeindikator anzugeben, wie unten gezeigt:

(Screenshots sollten hier eingefügt werden)

Dies ist ein wichtiger Punkt. Versuchen Sie, keine Spinner- und Ladenachrichten anzuzeigen, wenn Sie Spanngrenze erstellen. Dies ist sinnvoll für unsere Top -Navigation, da es nichts anderes zu tun gibt. Wenn Sie sich jedoch in einem bestimmten Teil der Anwendung befinden, versuchen Sie, den Fallback -Inhalt viele der gleichen Komponenten wiederzuverwenden und eine Art Lastanzeige anzuzeigen, wo die Daten sind - aber alles andere ist deaktiviert.

So sehen die relevanten Komponenten meines Buchmoduls aus:

 const rendermodule = () => {
  const UIView = UseBookSearchUiview ();
  const [lastbookResults, setLastbookResults] = usestate ({{{
    Gesamtseite: 0,,
    resultsCount: 0
  });
  Zurückkehren (
    <div classname="standard-module-container margin-bottom-lg">
      <suspense fallback="{<Fallback" uiview="{uiView}"></suspense> }>
        <maincontent setlastbookresults="{setLastBookResults}" uiview="{uiView}"></maincontent>
      
    </div>
  );
};
const fallback = ({uiview, TotalPages, resultingCount}) => {
  Zurückkehren (
    <div>
      <booksmenubardisabled resultscount="{resultsCount}" totalpages="{totalPages}"></booksmenubardisabled>
      {UIView.isGridView? (
        <gridviewshell></gridviewshell>
      ): (
        <h1>
          Bücher laden<i classname="fas fa-cog fa-spin"></i>
        </h1>
      )}
    </div>
  );
};

Kurzanmerkung zur Konsistenz

Bevor wir fortfahren, m?chte ich im vorherigen Screenshot auf eine Sache hinweisen. Schauen Sie sich den Inline -Spinner an, der beim Auslegen der Suche angezeigt wird. Schauen Sie sich dann den Bildschirm an, wenn die Suche suspendiert wird, und sehen Sie sich die abgeschlossenen Ergebnisse an:

(Screenshots sollten hier eingefügt werden)

Beachten Sie, ob sich auf der rechten Seite des Suchscheibe ein "C" -Tag befindet, und gibt es eine Option, um es aus der Suchabfrage zu entfernen? Oder beachten Sie, dass sich das Tag nur auf den letzten beiden Screenshots befindet? In dem Moment, in dem die URL aktualisiert wird, wird der Anwendungsstatus, der das Tag kontrolliert, tats?chlich aktualisiert. Der Status wird jedoch zun?chst nicht angezeigt. Zun?chst h?ngt das Status -Update im Speicher (weil wir useTransition verwendet haben) und die vorherige Benutzeroberfl?che wird weiterhin angezeigt.

Dann wird der Inhalt gesichert. Der Fallback -Inhalt macht eine deaktivierte Version derselben Suchleiste, in der der aktuelle Suchstatus (basierend auf der Auswahl) angezeigt wird. Wir haben jetzt die vorherige Benutzeroberfl?che entfernt (weil sie jetzt ziemlich alt und abgestanden ist) und warten darauf, die in der Menüleiste angezeigte Suche zu deaktivieren.

Dies ist die Art der Konsistenzspannung, die Ihnen kostenlos bietet.

Sie k?nnen Zeit damit verbringen, sch?ne Anwendungsstaaten zu erstellen, und React schlenkt, ob die Dinge fertig sind, ohne dass Sie sich mit dem Versprechen befassen müssen.

Verschachtelte Spannungsgrenzen

Angenommen, unsere obere Navigation dauert eine Weile, bis unsere Buchkomponenten in das Ausma? geladen werden, in dem unser "noch ladener, sorry" -Pinner von der Spannungsgrenze ger?t. Von dort aus wird die Buchkomponente geladen und die neue Spannungsgrenze innerhalb der Buchkomponente wiedergegeben. Aber wenn das Rendering fortgesetzt wird, feuert unsere Buchsuche ab und h?ngt. was geschieht? Wird die obere Spannungsgrenze weiter angezeigt, bis alles fertig ist, oder wird die unteren Spannungsgrenze im Buch im Buch übernehmen?

Die Antwort ist die letztere. Wenn neue Spannungsgrenzen an einer niedrigeren Position im Baum gerendert werden, ersetzt ihr Fallback -Inhalt den Fallback -Inhalt aller angezeigten Spannungs -Rückeninhalte. Derzeit gibt es eine instabile API, die diese Funktion überschreiben kann. Wenn Sie jedoch einen Fallback -Inhalt gut machen, kann dies das gewünschte Verhalten sein. Sie m?chten nicht "noch laden, sorry" weiter angezeigt werden. Sobald die Buchkomponente fertig ist, m?chten Sie stattdessen auf jeden Fall eine Shell mit einer gezielteren Wartenachricht anzeigen.

Was ist nun, wenn unser Buchmodul l?dt und anf?ngt zu rendern, wenn startTransition -Spinner noch zeigt und dann h?ngt? Mit anderen Worten, annehmen, dass unser Timeout startTransition drei Sekunden betr?gt, die Buchkomponente rendert, die verschachtelte Spannungsgrenze befindet sich nach einer Sekunde im Komponentenbaum und die Suchabfrage wird suspendiert. Werden die verbleibenden zwei Sekunden vergangen oder werden der Fallback unmittelbar vor dieser neuen verschachtelten Spannungsgrenze den Fallback -Inhalt darstellt? Die Antwort kann überraschend sein, dass der neue Spannungs -Fallback -Inhalt standardm??ig sofort angezeigt wird. Dies liegt daran, dass es am besten ist, eine neue gültige Benutzeroberfl?che so schnell wie m?glich anzuzeigen, damit der Benutzer sehen kann, dass die Dinge geschehen und sich bewegen.

So integrieren Sie Daten

Die Navigation ist gut, aber wie passen das Laden von Daten in alles?

Es mischt sich v?llig transparent in es ein. Das Laden von Daten l?st einen Hang wie bei React.lazy Navigation aus und h?ngt mit den gleichen useTransition und Spannungsgrenzen an. Deshalb ist Spannung so erstaunlich: Alle asynchronen Abh?ngigkeiten funktionieren nahtlos in demselben System. Vor der Spannung war die manuelle Verwaltung dieser verschiedenen asynchronen Anfragen, um sicherzustellen, dass die Konsistenz ein Albtraum war, weshalb es genau der Grund hat, warum niemand es getan hat. Webanwendungen sind für kaskadierende Spinner berüchtigt, die zu unvorhersehbaren Zeiten stehen und inkonsistente UIs erzeugen, die nur teilweise abgeschlossen sind.

OK, aber wie verbinden wir die Datenlast tats?chlich damit? Das Laden von Daten in Spannung ist sowohl komplexer als auch einfacher.

Lassen Sie mich erkl?ren.

Wenn Sie auf Daten warten, geben Sie ein Versprechen in die Komponente, die die Daten liest (oder versucht zu lesen). Das Versprechen sollte auf der Grundlage von Datenanfragen konsistent sein. Daher sollten vier doppelte Anfragen für dieselbe "C" -Suchabfrage das gleiche und das gleiche Versprechen werfen. Dies bedeutet eine Art Cache -Ebene, um all dies zu verwalten. Sie werden das wahrscheinlich nicht selbst schreiben. Stattdessen m?chten Sie nur die Datenbank, mit der Sie sich selbst aktualisieren, um Suspense zu unterstützen.

Diese Arbeit wurde in meiner Bibliothek mit Micro-Graphql-React-Bibliothek durchgeführt. Sie verwenden den useSuspenseQuery -Hook anstelle des useQuery -Hooks, der dieselbe API hat, aber ein einheitliches Versprechen bringt, wenn Sie auf die Daten warten.

Warten Sie, was ist mit Vorspannung? !

Lesen Sie andere Dinge über Spannung, sprechen Sie über Wasserf?lle, Rendern, Vorspannung usw. Ist Ihr Gehirn schon verwirrt? Mach dir keine Sorgen. Das bedeutet alles.

Angenommen, Sie verz?gern das Laden der Buchkomponente, die dann einige Daten fordert, was zu einer neuen Spannung führt. Die Netzwerkanfragen von Komponenten und Netzwerkanfragen von Daten werden nacheinander nacheinander stattfinden - auf Wasserfall.

Der Schlüsselteil ist jedoch: Wenn Sie mit dem Laden der Komponente beginnen, ist der Anwendungszustand, der eine anf?ngliche Abfrage ausführt, bereits verfügbar (in diesem Fall die URL). Warum also nicht die Abfrage "beginnen", wenn Sie wissen, dass Sie sie brauchen? Sobald Sie zu /Büchern durchsuchen, k?nnen Sie die aktuelle Suchabfrage zu diesem Zeitpunkt sofort starten, damit sie bereits im Laden der Komponente l?uft?

Das Micro-Graphql-React-Modul verfügt über eine Vorspannungsmethode, und ich empfehle Ihnen, es zu verwenden. Vorl?dungsdaten sind eine gute Leistungsoptimierung, aber sie hat nichts mit Spannung zu tun. Klassische React -Anwendungen k?nnen Daten sofort vorladen (und sollten), wenn sie wissen, dass sie sie ben?tigen. VUE -Anwendungen sollten Daten sofort vorladen, wenn sie wissen, dass sie sie ben?tigen. Die schlanke Anwendung sollte ... Sie bekommen es.

Die vorinstallierten Daten sind orthogonal zur Spannung, was Sie mit jedem Framework tun k?nnen. Dies haben auch etwas, was wir alle h?tten tun sollen, obwohl andere es nicht getan haben.

Aber im Ernst, wie hast du vorgeladen?

Es liegt an Ihnen. Zumindest muss die Logik, die aktuelle Suche auszuführen, unbedingt vollst?ndig in ein eigenes unabh?ngiges Modul unterteilt werden. Sie sollten buchst?blich sicherstellen, dass sich diese Vorspannungsfunktion in einer separaten Datei befindet. Verlassen Sie sich nicht auf Webpack für baumartigen Jitter. Wenn Sie Ihr Paket das n?chste Mal überprüft, k?nnen Sie vollst?ndige Traurigkeit haben.

Sie haben eine preload() -Methode in einem eigenen Paket, also nennen Sie sie. Rufen Sie es an, wenn Sie wissen, dass Sie zum Modul navigieren m?chten. Ich gehe davon aus, dass React Router über einige APIs verfügt, die bei ?nderungen der Navigation Code ausführen k?nnen. Für den oben genannten nativen Routing -Code habe ich die Methode im vorherigen Routenwechsel aufgerufen. Ich habe es für die Kürze weggelassen, aber der Bucheintrag sieht tats?chlich so aus:

 Switch (moduletoload.tolowerCase ()) {
  Fall "aktivieren":
    ActivateComponent zurückgeben;
  Fall "authentifiziert":
    return authenticatecomponent;
  Fall "Bücher":
    // Vorspannung! ! !
    booksPreload ();
    bookscomponent zurückkehren;

Das war's. Hier ist eine Live -Demonstration, die Sie versuchen k?nnen:

(Der Link sollte hier eingefügt werden)

Um den Spannungs -Zeitlimitwert zu ?ndern (Standardwert betr?gt 3000 Millisekunden), navigieren Sie zu Einstellungen und sehen Sie sich die anderen Registerkarten an. Achten Sie nach der ?nderung unbedingt die Seite.

Zusammenfassen

Ich war so aufgeregt über alles im Webentwicklungs?kosystem wie mit Spannung. Es ist ein ?u?erst ehrgeiziges System, um eines der schwierigsten Probleme in der Webentwicklung zu verwalten: Asynchronit?t.

Das obige ist der detaillierte Inhalt vonReagieren Sie in der Praxis Spannung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!