Veröffentlichungsdatum von React 18: Ein Panoramablick

React 18 wurde im März 2022 veröffentlicht. Diese Hauptversion der beliebten JavaScript-Bibliothek bietet eine Reihe aufregender neuer Funktionen und Verbesserungen für das React-Ökosystem. React 18 wurde von der Entwickler-Community mit Spannung erwartet und erhielt seitdem positive Kritiken für seine Fortschritte beim Rendern von Daten und den reibungslosen Übergängen zwischen Seiten und Komponenten.

Die Auswirkungen des automatischen Batchings in React 18 auf Zustandsmanagement und Leistung verstehen

Eine der wichtigsten Änderungen in React 18 ist das automatische Batching, das den Speicherverbrauch und die Leistung verbessert, indem Statusaktualisierungen gebündelt werden, um sie nur einmal neu zu rendern. Diese Funktion erfordert jedoch manchmal ein Überdenken der Zustandsverwaltung in einer Anwendung.

Es wurde viel darüber geschrieben, wie Batching funktioniert, zum Beispiel dieser zum Thema.

Als ich React in meinen Projekten, die CRA verwenden, aktualisiert habe, bin ich bis auf einen Fall auf keine nennenswerten Probleme gestoßen. Ich hatte ein Dashboard mit mehreren Karten, von denen jede eine Schaltfläche und Eingaben zum Ausführen von Aktionen enthielt. Das Dashboard hatte jedoch auch einen Countdown-Timer, der Probleme mit dem Status und der Darstellung der Aktionsschaltflächen verursachte. Ich brauchte ein paar Tage, um das Problem zu verstehen, was mich letztendlich dazu veranlasste, die React-Version herunterzustufen.

Bei einer Untersuchung stellte ich fest, dass das Problem durch die Formik-Bibliothek verursacht wurde, die seit geraumer Zeit nicht aktualisiert oder gewartet wurde. Formik verursachte Konflikte mit den vom Timer ausgelösten Statusänderungen. Die Lösung bestand darin, Formik aufzugeben und es durch eine Bibliothek wie React Hook Form zu ersetzen.

Rendern des Clients in React 17

Lassen Sie uns nun über die Änderungen beim Rendern von React-Komponenten von Version 17 bis 18 sprechen, insbesondere über die Vor- und Nachteile der einzelnen Ansätze, und Beispiele für Produktionsszenarien geben, auf die ich gestoßen bin.

React 17 arbeitet mit clientseitigem Rendern als standardmäßiger und am weitesten verbreiteter Methode. Das bedeutet, dass die Komponenten im Browser des Benutzers mithilfe des virtuellen DOM gerendert werden, um die Benutzeroberfläche mit Datenänderungen zu aktualisieren. Wenn ein Benutzer eine mit React 17 erstellte Website oder Webanwendung besucht, sendet der Server den ursprünglichen HTML-Code zusammen mit dem JavaScript-Code für die React-Komponenten. Der Browser führt dann den Code aus und rendert die Komponenten, sodass der Benutzer mit der Benutzeroberfläche interagieren kann.

Einer der Hauptvorteile des clientseitigen Renderings ist die Möglichkeit, schnell zu aktualisieren und interaktive Erlebnisse bereitzustellen. Die Komponenten können auf dem Client problemlos erneut gerendert werden, ohne dass eine vollständige Seitenaktualisierung erforderlich ist. Es ermöglicht auch die Verwendung von clientseitigem Status und APIs, die auf dem Server nicht verfügbar sind. Dies kann jedoch auch zu langsameren anfänglichen Ladezeiten führen, da der Browser zuerst das JavaScript herunterladen und ausführen muss, bevor die Komponenten gerendert werden, was für Benutzer mit langsamen Verbindungen ein Problem sein kann.

Rendern vom Server (SSR) in React 18

React 18 führt die Option des serverseitigen Renderings (SSR) ein, bei dem das anfängliche Rendern der Komponenten auf dem Server statt auf dem Client erfolgt. Wenn ein Benutzer eine Website oder Webanwendung besucht, die mit React 18 und serverseitigem Rendern erstellt wurde, generiert der Server den HTML-Code für das erste Rendern der Komponenten und sendet ihn an den Client. Der Client „hydratisiert“ dann den vorgerenderten HTML-Code mit dem JavaScript-Code und gleicht dabei die Referenzen ab.

Dies führt zu verbesserten anfänglichen Ladezeiten, da der Server den vollständig gerenderten HTML-Code an den Client senden kann, sodass er sofort angezeigt werden kann. Es ermöglicht auch die Verwendung neuer APIs wie Suspense und useTransition. Die Implementierung kann jedoch auch komplexer sein und zu Problemen mit Komponenten führen, die auf APIs angewiesen sind, da das anfängliche Rendern auf dem Server keinen Zugriff auf diese hat.

Herausforderungen und Lösungen für die Verwendung des serverseitigen Renderings von React 18 mit Suspense für den Datenabruf

Verwenden Sie das SSR von React 18 mit Spannung kann beim Abrufen von Daten eine Herausforderung darstellen. Da Suspense auf clientseitigen Status und APIs basiert, wird es auf dem Server nicht unterstützt. Dies führt zu unvollständigem servergerendertem HTML für Komponenten, die Suspense zum Datenabruf verwenden. Um dieses Problem zu beheben, muss ein alternativer Ansatz zum Abrufen von Daten verwendet werden. Das React-Team hat eingeräumt, dass SSR mit Datenabruf nicht für die Verwendung in gängigen Create React App-Projekten konzipiert wurde, und empfiehlt, ein Framework wie NextJS oder Remix zu verwenden, das diese Funktion sofort implementiert. In einem arbeitsbezogenen Projekt ist es jedoch möglicherweise nicht möglich, die gesamte Anwendungsstruktur zu überarbeiten.

Ein Beispiel aus einer Produktionsanwendung

In einem meiner letzten Projekte stieß ich beim Upgrade von React 17 auf React 18 auf eine Herausforderung. Das Problem trat auf, als eine Seite in der Anwendung Daten aus dem Backend abrief und gleichzeitig einen Ladespinner anzeigte. Nach dem Upgrade wurde dem Benutzer die Standard-HTML-Seite angezeigt, bevor der Datenabruf abgeschlossen war. Dadurch wurde die gesamte Seite aktualisiert und die richtigen Informationen wurden erst danach angezeigt.

Um dieses Problem zu lösen, musste ich eine Lösung finden, die innerhalb der Einschränkungen des serverseitigen Renderings (SSR) und des Routings der gesamten Anwendung funktionierte. Meine Lösung bestand darin, eine Bedingung für das Rendern der Seitenkomponente zu erstellen. Ich habe die Komponente so eingestellt, dass sie nur gerendert wird, wenn die Daten vorhanden waren, und ein Ladespinner angezeigt, wenn die Daten noch nicht verfügbar waren. Auf diese Weise ist beim ersten HTML-Rendern die Bedingung nicht erfüllt und der Status ist falsch, wodurch das Ladespinner angezeigt wird. Sobald die Daten abgerufen wurden, kann die Komponente mit allen erforderlichen Informationen und dem richtigen hydratisierten HTML-Code gerendert werden.

Verbesserung langsamer Verbindungen und datenintensiver Anwendungen mit Suspense:

Suspense ist ein leistungsstarkes Tool, das die Benutzererfahrung in bestimmten Situationen verbessern kann.

Erstens kann es besonders für Benutzer mit langsamen Internetverbindungen oder Geräten von Vorteil sein. Suspense ermöglicht es, dass eine Fallback-Komponente wie eine Loader-Seite oder ein Spinner angezeigt wird, während das JavaScript geladen wird, anstatt dem Benutzer eine leere Seite zu hinterlassen.

Zweitens kann Suspense auch verwendet werden, um datenintensive Teile der Anwendung zu optimieren. Durch die Anpassung von Suspense kann es nur auf bestimmte Komponenten angewendet werden, sodass dem Benutzer fast die gesamte Seite angezeigt wird, mit Ausnahme der Teile, die erst später geladen werden.

Navigieren beim Datenabruf in React: Der bevorstehende Anwendungs-Hook

Es wird erwartet, dass zukünftige Versionen von React die Herausforderungen bewältigen werden, mit denen derzeit die Verwendung von Suspense für serverseitiges Rendern (SSR) und Datenabruf konfrontiert ist. Eine Lösung, die derzeit diskutiert wird, ist die Einführung eines neuen Hooks namens „use“. Dieser Hook ermöglicht es Entwicklern, mit Suspense über eine stabile API auf asynchrone Datenquellen zuzugreifen. Sie können unter diesem Link darüber lesen. Obwohl diese Lösung noch nicht verfügbar ist, arbeitet das React-Team immer noch an der Implementierung der Cache-Funktion für diesen Hook. In der Zwischenzeit müssen diejenigen, die Create React App (CRA) verwenden, möglicherweise eine Problemumgehung und Hacks finden, um das Abrufen von Daten in ihren Anwendungen abzuwickeln.

Verbesserung der Benutzererfahrung mit dem useTransition Hook von React 18: Implementierung nahtloser Übergänge in Ihrer Anwendung

Um den Benutzern ein nahtloses und angenehmes Erlebnis zu bieten, ist es wichtig, beim Übergang zwischen Seiten oder Komponenten in einer Anwendung auf die visuellen Effekte zu achten. React 18 hat eine neue API namens eingeführt Verwenden Sie Transition, was es Entwicklern ermöglicht, Übergänge einfach zu implementieren. Der useTransition-Hook gibt ein Tupel zurück, das zwei Objekte enthält: isPending, das angibt, ob der Übergang abgeschlossen ist, und startTransition, eine Methode, die aufgerufen werden kann, um den Übergang einzuleiten.

Dieser Hook kann besonders nützlich sein, wenn er in Kombination mit Suspense verwendet wird, da er Benutzern ein reibungsloses Erlebnis bietet, während neue Komponenten oder Seiten geladen werden. Wenn beispielsweise eine Methode verwendet wird, um einen Klick zum Wechseln eines Tabs auf einer Seite zu verarbeiten, kann der Übergang dort gestartet werden und der boolesche Wert isPending kann als Ladezustand für die Komponente verwendet werden.

Untersuchung der Unterschiede zwischen manuellem Laden in React 17 und Suspense und useTransition in React 18

Ich stelle Ihnen zwei Code-Sandboxen zur Verfügung, mit denen Sie die Methoden zum Laden von Seiten und Status in React vergleichen können. Die erste Sandbox verwendet die traditionellen Methoden in React 17, während die zweite den neuen Suspense- und useTransition-Hook in React 18 verwendet.

Die erste Code-Sandbox demonstriert manuelles Laden mit React 17: react-17: Tabs laden von Inhalten wechseln - CodeSandbox

Die zweite Code-Sandbox zeigt, wie Suspense und useTransition in React 18 verwendet werden können: React-18-Loading-Content-Suspense-UseTransition - CodeSandbox

Beide Sandboxen simulieren eine langsame API-Anfrage mit setTimeout.

Die React 17-Sandbox demonstriert manuelles Laden und die Verwendung eines Ladezustands, was zu Verzögerungen für Benutzer beim Wechseln zwischen Tabs führen kann. Im Gegensatz dazu verwendet die React 18-Sandbox den useTransition-Hook, um eine reibungslosere Benutzererfahrung zu ermöglichen, während neue Inhalte geladen werden. Der Ladevorgang wird durch eine sich progressiv färbende obere Leiste angezeigt, die für den Benutzer weniger störend ist.

Es ist erwähnenswert, dass Suspense zwar zum Laden von Komponenten nützlich sein kann, beim Abrufen von Daten in einer Vanilla React-Anwendung jedoch nicht gut funktioniert. Daher enthält die React 18-Sandbox auch einen normalen Loader zum Abrufen von Daten sowie einen globalen Loader, der setTimeout verwendet, um Suspense auszulösen, während die Komponente geladen wird, wobei die farbige obere Leiste angezeigt wird.

Die neuen Ansätze zum Rendern von Daten verstehen: fetch-as-render, render-then-fetch

Werfen wir einen Blick auf die neuen Ansätze für das Datenrendern in React 18 mit der Einführung von serverseitigem Rendern und Suspense. Zwei neue Ansätze, „fetch-as-render“ und „render-then-fetch“, sind jetzt verfügbar, die sich von dem traditionellen „Fetch-then-Render“ -Ansatz unterscheiden, der in React 17 verwendet wurde.

Beide neuen Methoden ermöglichen das Rendern gleichzeitig mit dem Abrufen der Daten und nicht wie bisher sequentiell. Dies ermöglicht eine bessere Benutzererfahrung, da Daten im Hintergrund abgerufen werden, während der Benutzer mit der Seite interagiert.

Betrachten Sie das folgende Bild, um den Unterschied zwischen diesen Ansätzen zu veranschaulichen:

Beim traditionellen „Fetch-then-Rendern“ -Ansatz erfolgt der Datenabruf sequentiell, ein API-Aufruf nach dem anderen. Mit den Ansätzen „Fetch-as-Render“ und „Render-then-Fetch“ können mehrere API-Aufrufe gleichzeitig ausgeführt werden, während der HTML-Code bereits gerendert werden kann, was zu einem effizienteren Gesamtprozess führt.

Darüber hinaus ist es auch möglich, das Laden jeder Komponente mithilfe verschiedener Suspense (s) in einer SuspenseList anzupassen:

Bewältigung gemeinsamer Herausforderungen: Lösungen für häufig auftretende Probleme

Die Migration zu React 18 kann eine Herausforderung sein, insbesondere wenn es darum geht, neue Funktionen korrekt zu implementieren. Es ist wichtig zu verstehen, wie sich React 18-Updates auf Ihre Anwendung auswirken, und gründlich zu planen und zu testen, um Probleme zu vermeiden. Hier sind einige häufig auftretende Probleme und ihre möglichen Lösungen:

1. Automatische Stapelverarbeitung:

• Problem: In einigen Fällen können bei der automatischen Batchverarbeitung Statusaktualisierungen kombiniert werden, was zu Konflikten mit Bibliotheken von Drittanbietern oder externen Speichern führt.
• Lösung: Speichern Sie den Status an einem anderen Ort oder wechseln Sie von useState zu useRef, um das erneute Rendern von Komponenten zu verhindern.

2. Mehrfache Montage:

• Problem: Im Entwicklungsmodus mit eingeschaltetem Strict-Modus können Komponenten aufgrund von useEffect ohne Abhängigkeiten zweimal gerendert werden. Dies ist ein Ergebnis des neuen strikten Moduszyklus: mounten → rendern → unmount → mounten → rendern.
• Lösung: Binden Sie den useEffect-Code vorübergehend in eine useRef-Bedingung ein, um den Code nur einmal auszuführen. In der Produktion wird die Komponente wie erwartet einmal gemountet und gerendert.

3. Suspense funktioniert nicht beim Datenabruf:

• Problem: React-Entwickler schlagen vor, Frameworks wie NextJS oder Bibliotheken wie React-Query anstelle von Create React App zu verwenden, um eine nahtlose Suspense-Funktionalität zu gewährleisten.
• Lösung: Mit CRA umfassen die Problemumgehungen das Verschieben von Zuständen, das Hinzufügen von Loadern zum Abrufen von Daten oder die Verwendung von useTransition. Der bevorstehende „use“ -Hook könnte ebenfalls eine Lösung bieten.

React wird mit jeder Version immer komplexer, was zu kniffligen Bugs führt. Zum Beispiel:

• Bibliotheken wie Formik können Probleme mit React 18 verursachen, und die Lösung besteht darin, die Bibliotheken zu wechseln.
• Bei React ist es wichtig, jede Komponente mit Hooks wie memo, useMemo und useCallback zu optimieren, um Probleme zu vermeiden. Andere Frameworks wie Vue und SvelteKit haben diese Funktionen integriert.

Fazit

Manchmal zwingen Sie diese bahnbrechenden Änderungen dazu, die Struktur des Projekts komplett zu ändern, weil eine Sache nicht funktioniert.

Die zunehmenden Komplexitätsebenen in React sind interessant, aber gleichzeitig anstrengend. Fehler passieren und es ist schwer zu verstehen, warum. Vor allem für jemanden, der gerade anfängt, es zu lernen.

Zusammenfassend führt React 18 mehrere neue Funktionen ein, die die Benutzererfahrung in Ihren Anwendungen verbessern können. Es ist jedoch wichtig, sich der potenziellen Probleme bewusst zu sein, die bei einer falschen Implementierung von React 18 auftreten können, wie z. B. automatisches Batching und mehrfaches Mounten, und mögliche Lösungen für diese Probleme in Betracht zu ziehen.