Erfahrung mit parallelen React-Funktionen (gleichzeitiger Front-End-Modus)

React ist eine Open-Source-JavaScript-Bibliothek, die von Entwicklern zum Erstellen web- und mobilbasierter Anwendungen verwendet wird und den Aufbau interaktiver Benutzeroberflächen und UI-Komponenten unterstützt. React wurde vom Facebook-Softwareentwickler Jordan Walke entwickelt. Die erste Version von React wurde vor sieben Jahren veröffentlicht und wird jetzt von Facebook gepflegt. Seit der Erstveröffentlichung des React-Frameworks ist die Popularität von React sprunghaft angestiegen und wächst weiterhin.
Im Oktober 2020 wurde React 17 veröffentlicht, aber überraschenderweise – mit „null neuen Funktionen“. Das bedeutet natürlich nicht, dass keine neuen Funktionen hinzugefügt wurden, die die Programmierer-Community begeistern würden. Tatsächlich bringt uns diese Version viele wichtige Funktionsupgrades und Fehlerbehebungen für Version 16 und führt ein: Concurrent Mode und Suspense.
Obwohl diese beiden Funktionen noch nicht offiziell veröffentlicht wurden, stehen sie Entwicklern zum Testen zur Verfügung. Nach der Veröffentlichung werden sie die Art und Weise ändern, wie React seine Benutzeroberfläche rendert, und so die Leistung und das Benutzererlebnis verbessern.

Kurz gesagt: Mit Concurrent Mode und Suspense können Benutzer das Laden von Daten, den Ladestatus und Benutzeroberflächenvorgänge reibungsloser und reibungsloser handhaben. Im Parallelmodus kann React das Rendern kostenintensiver, nicht dringender Komponenten anhalten und sich auf dringendere Aufgaben wie das UI-Rendering konzentrieren, um die Reaktionsfähigkeit der Anwendung stets aufrechtzuerhalten und weiße Bildschirme, Einfrieren und andere Phänomene zu vermeiden.

Dieser Artikel vermittelt hauptsächlich ein tiefgreifendes Verständnis der Datenextraktionsfunktion im Concurrent-Modus und im Suspense-Modus.

Warum brauchen wir den Concurrent-Modus?

Wie wir alle wissen, sind JavaScript-Frameworks oder -Bibliotheken Single-Thread-Worker. Während also ein Codeblock ausgeführt wird, müssen die übrigen Blöcke auf ihre Ausführung warten. Es können nicht mehrere Arbeitsthreads gleichzeitig ausgeführt werden. Dasselbe gilt für die Schnittstellendarstellung.
Sobald React mit dem Rendern beginnt, gibt es keine Möglichkeit, es zu unterbrechen, bis es fertig ist. React-Entwickler nennen diese Art des Renderings „blockierendes Rendering“. Durch diese Rendering-Blockierung entsteht eine instabile Benutzeroberfläche, die jederzeit nicht mehr reagieren kann.

Spezifische Probleme

Angenommen, wir müssen eine lange Auswahlliste zum Filtern von Produktanwendungen anzeigen. Wir verwenden das Suchfeld zum Filtern von Datensätzen. Das Design sieht vor, dass die Benutzeroberfläche aktualisiert wird und die zugehörigen Daten auflistet, wenn der Benutzer auf die Suchschaltfläche klickt.

Wenn die Liste zu lang ist und zu viele Daten enthält, „ruckelt“ die Benutzeroberfläche, d. h. die Darstellung ist für den Benutzer sichtbar. Diese Verzögerung verringert außerdem die Produktleistung erheblich. Entwickler können Techniken wie Drosselung und Entwackeln einsetzen, die zwar hilfreich sein können, aber keine perfekte Lösung darstellen.
Durch die Drosselung wird die Häufigkeit begrenzt, mit der eine bestimmte Funktion aufgerufen werden kann. Durch Drosselung können wir wiederholte Aufrufe teurer und zeitaufwändiger APIs oder Funktionen vermeiden. Dieser Vorgang kann die Leistung verbessern, insbesondere bei der Darstellung von Informationen in der Benutzeroberfläche.

Beim Entprellen werden Aufrufe einer Funktion für eine vorbestimmte Zeitspanne ignoriert. Der Funktionsaufruf erfolgt erst nach Ablauf einer vorgegebenen Zeit.

Die folgende Abbildung beschreibt das Störungsphänomen:
Während auf den Abschluss nicht dringender API-Aufrufe gewartet wird, friert die Benutzeroberfläche ein, wodurch die Darstellung der Benutzeroberfläche verhindert wird. Die Lösung besteht darin, den Parallelmodus für unterbrechungsfreies Rendering zu verwenden.

Unterbrechungsfreies Rendern

Mit unterbrechbarem Rendering blockiert React.js die Benutzeroberfläche nicht, während die Liste verarbeitet und erneut gerendert wird. Es macht React.js granularer, indem es einfache Arbeiten unterbricht, das DOM aktualisiert und sicherstellt, dass es nicht zu Verzögerungen bei der Benutzeroberfläche kommt. React aktualisiert oder zeichnet das Eingabefeld parallel zur Benutzereingabe neu. React verarbeitet die Benutzereingaben und zeichnet das Eingabefeld parallel neu. Außerdem wird die Liste im Arbeitsspeicher aktualisiert. Sobald React mit der Aktualisierung fertig ist, aktualisiert es das DOM und rendert die Liste erneut auf dem Display des Benutzers. Im Wesentlichen ermöglicht unterbrechungsfreies Rendern React „Multitasking“. Diese Funktion sorgt für ein reibungsloseres Benutzeroberflächen-Erlebnis.

Parallelitätsmodus

Der Concurrent-Modus ist eine Reihe von Funktionen, die dazu beitragen, dass React-Anwendungen reaktionsfähig bleiben und sich reibungslos an das Gerät des Benutzers und die Netzwerkgeschwindigkeit anpassen. Der Parallelmodus teilt die Aufgaben in kleinere Teile auf. Der Scheduler von React kann die auszuführenden Jobs auswählen. Die Einplanung der Jobs erfolgt abhängig von ihrer Priorität. Durch die Priorisierung von Aufgaben können triviale oder nicht dringende Dinge gestoppt oder weiter hinausgezögert werden. Bei React stehen UI-Updates und Rendering immer an erster Stelle.

Im Parallelmodus können wir:

• Steuerung des ersten Rendervorgangs
• Priorisieren Sie Rendering-Prozesse
• Anhalten und Fortsetzen des Renderns von Komponenten
• Zwischenspeichern und Optimieren des Laufzeit-Renderings von Komponenten
• Verbergen Sie den angezeigten Inhalt, bis er benötigt wird

Neben der Benutzeroberflächendarstellung verbessert der Concurrent-Modus die Reaktionsfähigkeit auf eingehende Daten, das verzögerte Laden von Steuerelementen und die asynchrone Verarbeitung. Der Concurrent-Modus stellt sicher, dass die Benutzeroberfläche immer aktiv ist und im Hintergrund weiterhin Daten aktualisiert. Der Concurrent-Modus verwendet außerdem immer zwei Hooks von React: useTransition und useDeferredValue

Verwenden useDeferredValue Hook

Die Definition des useDeferredValue Hook lautet wie folgt:

const deferredValue = useDeferredValue(Wert, { TimeoutMs: <ein Wert> });

Dieser Befehl setzt den Wert nach der in timeoutMs festgelegten Zeit auf „lag“. Unabhängig davon, ob die Benutzeroberfläche sofort aktualisiert werden muss oder auf Daten gewartet werden muss, hält dieser Befehl die Benutzeroberfläche aktiv und reaktionsfähig. Dieser Hook verhindert das Einfrieren der Benutzeroberfläche und sorgt dafür, dass die Benutzeroberfläche immer reaktionsfähig bleibt, um die Kosten für die Verzögerung beim Abrufen von Daten gering zu halten.

Verwenden des Übergangshakens

useTransition Hook ist der Haupt- Hook für die Unterbrechung in React verwendet wird. Angenommen, es gibt eine Webseite mit einer Schaltfläche mit Benutzernamen. Klicken Sie einfach auf eine Schaltfläche und die Webseite zeigt die Benutzerdetails auf dem Bildschirm an.
Angenommen, der Benutzer klickt zuerst auf eine Schaltfläche und dann auf die nächste. Entweder wird der Bildschirm schwarz oder wir sehen einen Spinner auf dem Bildschirm. Wenn das Abrufen detaillierter Informationen zu lange dauert, kann es sein, dass die Benutzeroberfläche einfriert.
Die Methode useTransition gibt die Werte von zwei Hook zurück: startTransition und isPending . Die Syntax für die Definition lautet wie folgt:

const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });

Die Syntax der startTransition Definition lautet:

<Schaltfläche deaktiviert={isPending}  
  startTransition(() => {  
        <Anrufe abrufen>  
  });  
  </button>  
  {isPending? " Wird geladen...": null}

Mithilfe useTransition Hooks zeigt React.js die Benutzeroberfläche weiterhin ohne Benutzerdetails an, bis die Benutzerdetails bereit sind, die Benutzeroberfläche reagiert jedoch. React priorisiert die Benutzeroberfläche, um beim parallelen Abrufen von Daten reaktionsfähig zu bleiben.

Suspense zum Abrufen von Daten

Suspense ist eine weitere experimentelle Funktion, die von React zusammen mit dem Concurrent-Modus eingeführt wurde. Suspense können Komponenten vor dem Rendern eine vorbestimmte Zeitspanne warten.
Der Hauptzweck von Suspense besteht darin, Daten asynchron aus einer Komponente zu lesen, ohne sich Gedanken darüber zu machen, woher die Daten kommen. Suspense funktioniert am besten mit dem Konzept des Lazy Loading. Suspense können Datenabrufbibliotheken React Komponenten benachrichtigen, ob Daten verfügbar sind. React aktualisiert die Benutzeroberfläche erst, wenn die erforderlichen Komponenten bereit sind.

Vorteile der Verwendung von Suspense :

1. Integration zwischen Datenabrufbibliotheken und React Komponenten

2. Kontrollieren Sie den visuellen Ladezustand

3. Vermeiden Sie Race Conditions

Die grundlegende Syntax der Spinner Komponente lautet wie folgt:

Spinner aus „./Spinner“ importieren;  
    <Spannungsfallback={<Spinner />}>  
      <IrgendeineKomponente />  
</Spannung>

Durch die Verwendung Suspense im Concurrent Mode kann mit dem Rendern zeitaufwändiger Komponenten begonnen werden, während auf Daten gewartet wird. Zeigt auch Platzhalter an. Diese Kombination sorgt für ein reibungsloseres UI-Erlebnis.

Suspense- und Lazy-Loading-Komponenten

React.lazy ist eine neue Funktion, die React.js das verzögerte Laden von Komponenten ermöglicht. Lazy Loading bedeutet, dass Komponenten (der Code, der sie abruft und rendert) nur dann geladen werden, wenn sie benötigt werden. Sie priorisieren die kritischsten UI-Komponenten. React -Entwickler empfehlen, verzögert geladene Komponenten in eine Suspense Komponente zu verpacken.
Dadurch wird sichergestellt, dass die Komponente beim Rendern nicht in einen „schlechten Zustand“ gerät. Die Benutzeroberfläche bleibt während des gesamten Vorgangs reaktionsfähig und sorgt für ein reibungsloseres Benutzererlebnis.

Gleichzeitigen Modus aktivieren

Installieren Sie die neueste Betaversion, um den Parallelmodus zu aktivieren. Voraussetzung für die Installation von React ist Node Package Manager (npm). Um die Testversion zu installieren, führen Sie den folgenden Befehl aus:

npm installiere react@experimental react-dom@experimental

Um zu testen, ob der Testbuild eingerichtet ist, erstellen Sie eine Beispiel-React-Anwendung. Der Rendering-Code ohne die Testfunktion lautet wie folgt:

importiere * als React von „react“;  
  importiere { Render } von „react-dom“;  
  render(<App />, document.getElementById('root'));

Der spezifische Code für den Parallelmodus lautet wie folgt:

importiere * als React von „react“;  
    importiere { createRoot } von „react-dom“;  
Erstellen Sie ein Root-Element.

Dadurch wird der Parallelmodus für die gesamte Anwendung aktiviert. React teilt den Renderaufruf in zwei Teile auf:

1. Erstellen des Stammelements
2. Verwenden von Renderaufrufen

Derzeit plant React, drei Modi beizubehalten:

1. Der Legacy-Modus ist abwärtskompatibel mit dem Legacy- oder Current-Modus
2. Der Blockierungsmodus ist ein Zwischenstadium bei der Entwicklung des Parallelmodus.
3. Parallelitätsmodus

Der Blockierungsmodus ersetzt den Aufruf createRoot durch einen Aufruf createBlockingRoot. Bei paralleler Entwicklung bietet der Blockierungsmodus Entwicklern die Möglichkeit, Fehler zu beheben oder Probleme zu lösen.

In der offiziellen React-Dokumentation werden auch die von jedem Modus unterstützten Funktionen erläutert:

Beispielanwendung:

Dieser Artikel erstellt auch ein Testprogramm, um die Verwendung und Auswirkungen des Parallelmodus und anderer Modi zu überprüfen. Dieser Artikel verwendet die Pixelanwendung als Beispiel, um Pixel zufällig auf einer 150 x 150 großen Leinwand zu verteilen und ein Suchfeld einzuschließen. Jedes Mal, wenn der Benutzer auf das Suchfeld klickt, wird die Leinwand neu gerendert.
Auch wenn die Benutzeroberfläche nicht im gleichzeitigen Modus gerendert werden kann, wird die Aktualisierung der Benutzereingaben nicht unterbrochen. Nach Abschluss der Verarbeitung wird die Pixelleinwand neu gerendert. Im Legacy-Modus fror die Benutzeroberfläche beim schnellen Tippen manchmal ein, bevor die Leinwand erneut gerendert wurde. Auch die Benutzereingabe wird gestoppt und nicht aktualisiert.

Die Hauptdatei zum Erstellen von Pixelanwendungen ist canvas.js. Wir haben auch ein Eingabefeld erstellt, in das der Benutzer alles eingeben kann. Bei jedem Tastendruck wird die Pixel-Leinwand neu gerendert.

Codebeispiel: Index.js

importiere React von „react“;  
    importiere ReactDOM von „react-dom“;  
    App aus "./App" importieren;  
    // Traditioneller oder nicht-Concurrent-Modus reagieren  
    const rootTraditional = document.getElementById("root");  
    ReactDOM.render(<App caption="Traditionelles oder Block-Rendering" />,  
    WurzelTraditionell);  
    // Gleichzeitiger Modus aktiviert  
    const rootConcurrent = document.getElementById("root-concurrent");  
    ReactDOM.createRoot(rootConcurrent).render(<App caption="Unterbrechbar  
Rendern" />);

App.js

importiere React, { useState, useDeferredValue } von „react“;  
  importiere "./App.css";  
  importiere { Canvas } aus "./Canvas";  
  Standardfunktion App(props) exportieren  
  { const [Wert, gesetzter Wert] = useState("");  

 //Dies ist nur im Concurrent-Modus verfügbar.

    const aufgeschobenerWert = useDeferredValue(Wert, {  
      Zeitüberschreitungsrate: 5000  
    });  

    const keyPressHandler = e => {  
      setzeWert(e.Ziel.Wert);  
    };  

    zurückkehren (  
      <div Klassenname="App">  
        <h1>{props.caption}</h1>  
        <input onKeyUp={keyPressHandler} />  
        <Canvas-Wert={deferredValue} />  
      </div>  
    );  
  }

Canvas.js

importiere React von „react“;  
   Konstante CANVAS_SIZE = 70;  
   const generateRandomColor = () => {  
    var Buchstaben = "0123456789ABCDEF";  
    var Farbe = "#";  
    für (var i = 0; i < 6; i++) {  
      Farbe += Buchstaben[Math.floor(Math.random() * 16)];  
    }  
    Farbe zurückgeben;  
  };  
   const createCanvas = (Zeilen, Spalten) => {  
    lass array = [];  
    für (lass i = 0; i < Zeilen; i++) {  
      lass Zeile = [];  
      für (lass j = 0; j < Spalten; j++) {  
        Zeile.push(0);  
      }  
      array.push(Zeile);  
    }  
    Array zurückgeben;  
  };  
   //Dies ist das Quadrat mit den Pixeln  
  const drawCanvas = Wert => {  
    const canvas = createCanvas(CANVAS_SIZE, CANVAS_SIZE);  
    returniere canvas.map((Zeile, Zeilenindex) => {  
      let cellsArrJSX = row.map((Zelle, Zellindex) => {  
        let key = Zeilenindex + "-" + Zellenindex;  
        zurückkehren (  
         <div  
            Stil={{ Hintergrundfarbe: generateRandomColor() }}  
            Klassenname="Zelle"  
            Schlüssel = {"Zelle-" + Schlüssel}  
          />  
        );  
      });  
      zurückkehren (  
        <div Schlüssel = {"Zeile-" + Zeilenindex} Klassenname = "Leinwandzeile">  
          {cellsArrJSX}  
        </div>  
      );  
    });  
  };  
  export const Canvas = ({ Wert }) => {  
    zurückkehren (  
     <div>  
        <h2 Stil={{ minHeight: 30 }}>{Wert}</h2>  
       <div Klassenname = "Leinwand">{drawCanvas(Wert)}</div>  
     </div>  
   );  
 };

Index.html

<!DOCTYPE html>  
  <html lang="de">  
    <Kopf>  
      <meta charset="utf-8" />  
      <meta  
        Name="Ansichtsfenster"  
        Inhalt = "Breite = Gerätebreite, Anfangsmaßstab = 1, passend verkleinern = nein"  
      />  
      <meta name="Themenfarbe" content="#000000" />  
      Gleichzeitiger Modus der React-App  
    </Kopf>  
    <Text>  
      <keinSkript>  
     Sie müssen JavaScript aktivieren, um diese App auszuführen.  
      </noscript>  
      <div id="Behälter">  
        <div id="Wurzel" Klasse="Spalte"></div>  
        <div id="root-concurrent" class="column"></div>  
      </div>  
    </body>  
  </html>

Ausführen des Beispiels

Werfen wir einen Blick auf unseren Code. Der erste Bildschirm, den wir sehen, ist der Begrüßungsbildschirm. Die Verwendung von traditionellem oder Block-Rendering ist die aktuelle Vorgehensweise in React. Unterbrechbares Rendering ist eine Betafunktion des Parallelmodus. Schauen wir uns zunächst die traditionelle Rendering-Arbeit an.

Die Pixel-Leinwand wird bei jedem Tastendruck neu gerendert. Beim herkömmlichen Rendering wird die gesamte Benutzeroberfläche bei jedem Tastendruck angehalten, bis der Bildschirm erneut gerendert werden kann. Während dieser Zeit wird die Benutzereingabe nicht aktualisiert, auch wenn wir weiter tippen.

Das folgende Bild zeigt unterbrechbares Rendering. Während des unterbrechbaren Renderings kann der Benutzer weiter tippen. Die Benutzeroberfläche bleibt nicht hängen oder wird angehalten, während die Leinwand für jeden Tastendruck parallel neu gerendert wird.

Nachdem das erneute Rendern abgeschlossen ist, aktualisiert React die Benutzeroberfläche. Obwohl es im statischen Screenshot schwer zu erkennen ist, können wir sehen, dass sich das Raster ändert, der Benutzer aber weiterhin ohne Verzögerung der Benutzeroberfläche tippen kann.

Zusammenfassen

In diesem Artikel haben wir uns mit dem Testen der Parallelität in React und Suspense befasst. Durch die Verwendung des Concurrent-Modus sorgt React.js dafür, dass die Benutzeroberfläche jederzeit reaktionsfähig bleibt. Es zerlegt die Aufgaben der Anwendung in kleinere Teile und ermöglicht die Priorisierung von Aufgaben der Benutzeroberfläche. Daher bietet dieser Modus ein reibungsloseres und nahtloseres Benutzererlebnis und verbessert die Gesamtleistung der Anwendung.

In Kombination mit dem Concurrent-Modus sorgt Suspense dafür, dass die Benutzeroberfläche reaktionsfähig bleibt. Gleichzeitig können umfangreiche und zeitaufwändige Aufgaben wie das Abrufen von Daten parallel ausgeführt werden, was insgesamt für ein nahtloses Erlebnis sorgt.

Ausführliche Informationen zum Concurrent-Modus finden Sie in der offiziellen React-Dokumentation.
Mit der Verbesserung der React-Versionen wird das React-Framework bei immer mehr chinesischen Front-End-Entwicklern immer bekannter und wird bei ihrer Projektentwicklung häufig verwendet. Es ist nach Vue.js ein weiteres beliebtes Front-End-Mainstream-Framework. Mittlerweile wurden viele Funktionstools, die die Integration mit dem React-Framework unterstützen, daraus abgeleitet, wie beispielsweise das Front-End-Berichtssteuerelement ActiveReportsJS, das einen Online-Editor und ein direkt in React integriertes Berichtsanzeigetool bietet, um die Front-End-Datenanzeigefunktion zu verbessern.

Dies ist das Ende dieses Artikels über die Erfahrung mit paralleler React-Arbeit – der parallele Front-End-Modus ist da. Weitere relevante Inhalte zu paralleler React-Arbeit finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!