React 18 wurde veröffentlicht. React hat in den letzten zehn Jahren eine beeindruckende Entwicklung durchlaufen und sich zu einem der am weitesten verbreiteten Frontend-UI-Frameworks entwickelt. Anfangs war React aufgrund seiner umständlichen Syntax für Entwickler herausfordernd. Doch mit der Einführung von JSX wurde die Komponentenerstellung vereinfacht. Funktionskomponenten mit Hooks erleichterten die Verwaltung von Zustand und Lebenszyklusfunktionen, was zu lesbarerem und wartbarerem Code führte. Mit React 16 wurde die serverseitige Rendering (SSR) eingeführt, wodurch die Leistung verbessert und schnellere Seitenladezeiten sowie eine bessere Suchmaschinenoptimierung (SEO) ermöglicht wurden. Full-Stack-Frameworks wie Next.js und Remix haben React noch zugänglicher gemacht und seine Beliebtheit weiter gesteigert.
Die neueste Version der Bibliothek, React 18, wurde im März 2022 veröffentlicht. In diesem Artikel werden wir uns mit den neuen Funktionen befassen und die Vorteile für Benutzer und Entwickler erkunden. Wir werden auch untersuchen, wie diese neuen Funktionen implementiert werden können, und über die Pläne sprechen, die das React-Team für die Zukunft des Frameworks hat.
Neue Funktionen und Updates in React 18
React 17 war eine „Zwischenversion“, die als wichtige Vorbereitung für die neuen Funktionen von React 18 diente. Obwohl in React 17 keine Änderungen an der React-Entwickler-API vorgenommen wurden, wurden Möglichkeiten zur inkrementellen Aktualisierung von Versionen eingeführt und die Möglichkeit geschaffen, mehrere Versionen von React innerhalb eines einzelnen Komponentenbaums auszuführen. Dies war ein wichtiger Schritt für die Implementierung der aktualisierten Funktionen in React 18.
Eine neue Concurrent Rendering Engine
React 18 führte eine neue Concurrent Rendering Engine ein, die sowohl für das Frontend-Rendering als auch für das serverseitige Rendering optimiert wurde. Diese Umstellung auf Nebenläufigkeit vereinfacht den Prozess des Renderings der Benutzeroberfläche sowohl auf dem Server als auch auf dem Client. Benutzer können somit schneller mit der Seite interagieren, was auch auf datenintensiven Seiten zu einer flüssigeren Benutzererfahrung führt. Ein Großteil dieser Verbesserung ist Teil der erweiterten <Suspense>-Komponente.
Serverseitige <Suspense>-Komponenten
Die Verwendung von serverseitigen <Suspense>-Komponenten wurde optimiert, um das teilweise serverseitige Rendering und die Hydration zu erleichtern. Dies bedeutet, dass nur die „leichteren“ Teile der App auf dem Server gerendert und an den Client gesendet werden, um eine sofortige Seitenaktualisierung zu ermöglichen. Auf der Clientseite wurde <Suspense> mit asynchronem Datenabruf integriert, sodass das Abrufen von Daten und das Rendern der schwereren Teile der Seite ermöglicht wird. Das Ergebnis ist eine Verringerung der Wartezeit und eine reibungslosere Benutzererfahrung.
Eine reaktionsfreudigere Benutzeroberfläche
Die neue unterbrechbare Rendering-Engine ermöglicht eine Neu-Priorisierung der Hydration von serverseitigen Komponenten basierend auf den Benutzerinteraktionen mit der Benutzeroberfläche. Benutzer können mit der Seite interagieren, bevor das HTML mit Browserereignissen aktiviert wird. Abhängig davon, auf welchen Bereich ein Benutzer klickt, priorisiert React diesen Teil des Komponentenbaums, was zu einer schnelleren und reaktionsschnelleren Benutzeroberfläche führt.
Ein Upgrade-Prozess nach Bedarf
Ein herausragendes Merkmal von React 18 ist der Upgrade-Prozess nach Bedarf. Standardmäßig verwendet React 18 die React 17 Rendering-Engine. Das React-Team hat dies erreicht, indem sie neue Kernfunktionen in ihrer API eingeführt haben, während sie gleichzeitig die Unterstützung für die alten Funktionen beibehalten haben. Um die neuen Funktionen in React 18 nutzen zu können, müssen Entwickler explizit die neuen API-Funktionen verwenden. Dieser Ansatz ermöglicht es Entwicklern, ihre Komponenten zu testen und mit minimalem Aufwand zu aktualisieren, selbst wenn dabei Änderungen an bestehendem Code erforderlich sind.
Concurrent Rendering in React 18
Laut dem React-Blog ist die Rendering-Engine von React 18 so konzipiert, dass Entwickler sich auf ihren Anwendungscode konzentrieren können, ohne sich um den Rendering-Prozess kümmern zu müssen.
In den meisten Fällen werden die Änderungen innerhalb der Rendering-Engine selbst vorgenommen und sollten sich nicht auf den Code auswirken, mit möglichen Ausnahmen für Drittanbieter-Bibliotheken.
Die vorherige Rendering-Engine in React arbeitete als ein einziger, ununterbrochener, synchroner Prozess, der den gesamten Komponentenbaum renderte. Dies bedeutete, dass Entwickler warten mussten, bis das Rendern abgeschlossen war, bevor sie Änderungen sehen konnten. Solche Änderungen wurden in späteren Render-Warteschlangen geplant.
Im Gegensatz dazu wurde die Rendering-Engine in React 18 aktualisiert, um unterbrechbar, fortsetzbar und in der Lage zu sein, den resultierenden DOM zu verwerfen und zu ersetzen. Diese Aktualisierung ermöglicht einen flexibleren und effizienteren Rendering-Prozess.
Es ist wichtig zu beachten, dass React ein konsistentes Rendern garantiert. Das bedeutet praktisch, dass React, wenn Sie es ohne externe Speicher verwenden, der Synchronisation erfordert, das Rendering mit seinen Nebenläufigkeitsfähigkeiten durchführt und ein konsistentes Rendern garantiert. Wenn Sie hauptsächlich das useState-Hook verwenden, um pure React zu schreiben, können Sie kürzere Wartezeiten bei konsistenten Ergebnissen erwarten.
Die Hauptbedingung ist, dass Code-Bibliotheken, die Datenabruf oder Zustandsverwaltung handhaben, unterschiedlich sind und eine Code-Rewrite erfordern, um Inkonsistenzen zu vermeiden. Mit diesen Überlegungen im Hinterkopf hat das React-Team React 18 als optionalen Upgrade-Prozess gestaltet, der es Entwicklern ermöglicht, ihre Komponenten zu testen und zu aktualisieren, bevor sie die neue Version vollständig übernehmen.
Nun werfen wir einen Blick auf die neuen Funktionen, die die meisten React-Entwickler voraussichtlich nutzen werden.
React’s <Suspense>-Komponente auf der Client-Seite
Die <Suspense>-Komponente wurde in React 16.6 eingeführt, hatte aber einen begrenzten Anwendungsbereich. Sie funktionierte nur mit React.Lazy, was es ermöglichte, Komponenten während des Wartens auf das Laden eines bestimmten Bundles auszusetzen. Anfangs konnte sie jedoch nicht für den Datenabruf verwendet werden. Diese Einschränkung wurde in der neuesten Version von React behoben, sodass die <Suspense>-Komponente jetzt für den Datenabruf verwendet werden kann.
Im Wesentlichen vereinfacht die <Suspense>-Komponente den asynchronen Datenabruf und das Anzeigen von Ladeanzeigen. Sie kann um eine Komponente gewickelt werden, die den Datenabruf behandelt, und ermöglicht es Entwicklern, eine Ladekomponente deklarativ in ihr Layout einzufügen.
Hier ist ein Beispiel für die vorherige Methode, Ladelogik innerhalb einer Komponente zu implementieren, um Ladevorgänge anzuzeigen:
import React, { useState, useEffect } from "react";
import axios from "axios";
import ListUniversities from "./ListUniversities";
const AsyncComponent = () => {
const [loading, setLoading] = useState(true);
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get(
"http://universities.hipolabs.com/search?country=United+States"
);
setData(response.data);
setLoading(false);
} catch (e) {
setLoading(false);
setData([]);
}
};
fetchData();
}, []);
return (
<>
{loading ? (
<p>Loading please wait...</p>
) : (
<ListUniversities list={data} />
)}
</>
);
};
export default AsyncComponent;In diesem Beispiel wird die Logik für die Ladeanzeige in der Komponente verborgen und auf einer höheren Ebene, der App-Komponente, nicht sichtbar gemacht. Die AsyncComponent-Komponente behandelt die Anzeigelogik für die Ladeanzeige intern.
Hier ist dieselbe App.js, umgeschrieben mit der <Suspense>-Komponente:
import React, { Suspense } from "react";
import "./App.css";
import AsyncSuspendableComponent from "./components/AsyncSuspendableComponent";
function App() {
return (
<div className="App">
<h1>Suspense Example: Full List of American Universities</h1>
<Suspense fallback={<p>Loading, please wait...</p>}>
<AsyncSuspendableComponent />
</Suspense>
</div>
);
}
export default App;Die Async-Komponente wurde entfernt, was mehrere Vorteile mit sich bringt.
Erstens ist die Ladelogik jetzt unabhängig von der Datenabrufkomponente. Das bedeutet, dass das Design der Ladevorgänge geändert werden kann, ohne den Code einzelner Komponenten zu ändern.
Zweitens können <Suspense>-Komponenten ineinander geschachtelt werden, sodass Ladeanzeigen für einen gesamten Abschnitt sowie für Unterkomponenten mit eigenen Ladeanzeigen angezeigt werden können.
Schließlich ist die Implementierung der suspendierbaren Version der Datenabrufkomponente nun viel sauberer und einfacher zu pflegen:
import React from "react";
import ListUniversities from "./ListUniversities";
import { fetchData } from "../lib/suspense-demo-api";
const resource = fetchData();
const AsyncSuspendableComponent = () => {
const data = resource.data.read();
return <ListUniversities list={data} />;
};
export default AsyncSuspendableComponent;Bitte beachten Sie, dass das hier gezeigte Beispiel einer suspendierbaren Komponentenimplementierung als „ad-hoc“ Implementierung angesehen wird und nicht vom React-Team empfohlen wird. Stattdessen empfiehlt das React-Team die Verwendung von Frameworks, die die Logik für den Datenabruf bereits mit Suspense integriert haben, sodass Sie sie nicht selbst implementieren müssen. Hier ist eine teilweise Liste von React-18-kompatiblen Datenabruf-Frameworks und -Bibliotheken, darunter Next.js, Gatsby, Relay und Apollo.
Schließlich ist das spannendste Merkmal von <Suspense>, dass es auch serverseitiges Rendering mit derselben Syntax unterstützt, was die Entwicklung von Komponenten erleichtert, die datenreiche Seiten optimieren. Werfen wir einen Blick darauf, wie SSR mit <Suspense> funktioniert.
Serverseitiges Rendern mit <Suspense>
Das serverseitige Rendering wurde in React 16 eingeführt und wurde hauptsächlich in größeren Frameworks wie Next.js verwendet. Einer der Hauptvorteile von SSR besteht darin, die SEO zu verbessern, da React-Apps, die nur auf der Client-Seite ausgeführt werden, kein HTML enthalten, das von Web-Crawlern gelesen werden kann.
Ein weiteres Anwendungsgebiet für SSR besteht darin, eine schnellere Anzeige des Einstiegspunkts der App zu ermöglichen, indem das HTML sofort gesendet wird. Diese Methode funktioniert jedoch am besten für Seiten, die größtenteils statisch sind und eine gute Benutzererfahrung bieten. Wenn eine SSR-Seite viele dynamische Daten enthalten muss, ist die Benutzererfahrung nicht optimal.
Vor React 18 musste der gesamte SSR-Prozess abgeschlossen sein, bevor der Endbenutzer mit der Seite interagieren konnte. Das serverseitige Rendering würde die erforderlichen Daten für die Anzeige abrufen, das HTML rendern und es an den Client senden. Auf der Client-Seite würden die JavaScript-Bundles geladen und das serverseitige HTML „hydratisiert“ werden, d.h. alle Browserereignis-Handler, die die UI interaktiv machen, werden an das serverseitige HTML gebunden. Wenn die Seite viele dynamische Komponenten enthält, die Daten abrufen, können die Wartezeiten beim initialen Laden lang sein.
Mit React 18 kann <Suspense> auf dem Server verwendet werden, um das Rendern auf den Client zu verschieben. Suspendierte Komponenten werden immer auf der Client-Seite gerendert, was bedeutet, dass die Syntax konsistent bleibt und keine serverseitige Syntax für Suspense erforderlich ist. Die Innovation in React 18 besteht darin, dass der Server ein teilweises Rendering an den Client sendet, sodass der Endbenutzer bestimmte Abschnitte der Seite sofort sehen und damit interagieren kann, während Ladeanzeigen angezeigt werden, während der Client Daten abruft und rendert.
Das Ergebnis ist, dass Benutzer schneller mit der Benutzeroberfläche interagieren können als dies zuvor mit React 18 möglich war. Die statischen Teile der Seite sind bereits durch den unterbrechbaren Rendering-Mechanismus aktiviert, sodass Benutzer auf Links klicken und sogar von der Seite weg navigieren können, wodurch das Rendern der mit <Suspense> umwickelten Komponente unterbrochen wird.
Priorisierte Aktivierung
Betrachten wir eine komplexere Seite mit zwei Abschnitten, die aufgrund einer großen Anzahl von interaktiven Elementen länger zum Laden benötigen. Zum Beispiel eine Kopfzeile, eine Seitenleiste und zwei Inhaltskomponenten, die alle hydratisiert werden. Wenn der Benutzer mit der UI interagieren möchte, während sie noch lädt, priorisiert der unterbrechbare Rendering-Mechanismus von React 18 die Aktivierung der Komponente, auf die der Benutzer klickt. Das bedeutet, dass der Komponentenbaum schneller interaktiv wird als andere Komponenten.
Der unterbrechbare Rendering-Mechanismus handhabt diese selektive Aktivierung von Komponenten intern, was zu einem nahtloseren Benutzererlebnis führt. Durch Klicken auf einen bestimmten Bereich der Seite wird der Aktivierungsprozess unterbrochen und neu geplant, was zu einer schnelleren Ladezeit und einer schneller interaktiven Benutzeroberfläche führt. Als Entwickler müssen Sie sich keine Gedanken darüber machen, wie dies geschieht, solange Sie die neue Aktivierungs-API verwenden.
Die Kombination von SSR mit der <Suspense>-Komponente und der neuen unterbrechbaren Aktivierungsfunktion auf der Client-Seite bietet klare Vorteile, die das Benutzererlebnis erheblich verbessern und zu einem insgesamt positiven Eindruck führen, den Benutzer beim Interagieren mit Ihrer Webseite haben. Zusätzlich kommen diese Vorteile mit dem zusätzlichen Bonus einer guten SEO, was es zu einer „win win“-Situation macht.
Automatisches Batching und Übergänge in React 18
Die <Suspense>-Komponentenänderungen in React 18 bringen eine signifikante Verbesserung für die Interaktion des Endbenutzers mit Ihrer App. Doch React 18 führt auch weitere Änderungen ein, die darauf abzielen, das Rendering und die Interaktivität in Ihren Seiten weiter zu beschleunigen, wie zum Beispiel automatisches Batching und Übergänge. Diese Optimierungen konzentrieren sich auf die Zustandsverwaltung auf der Client-Seite und können die Leistung aller interaktiven Komponenten verbessern. Insbesondere nutzen Übergänge den unterbrechbaren Rendering-Mechanismus umfangreich aus.
Automatisches Batching für verbesserte Leistung
Das automatische Batching in React 18 verbessert die Leistung der Komponentenzustandsverwaltung, indem alle relevanten Zustandsänderungen in einem einzigen erneuten Rendering gruppiert werden. Betrachten Sie zum Beispiel das folgende Beispiel eines Zählers, der auch anzeigt, ob die gezählte Zahl gerade oder ungerade ist:
import React, { useEffect, useState } from "react";
import { flushSync } from "react-dom";
function AutoBatchedComponent() {
const [autoBatching, setAutoBatching] = useState(true);
const [count, setCount] = useState(0);
const [isEven, setIsEven] = useState(false);
function handleClick() {
setCount((c) => c + 1); // Führt noch nicht zu einem erneuten Rendering
setIsEven((count + 1) % 2 === 0); // Führt noch nicht zu einem erneuten Rendering
// React führt jetzt ein Rendering für 2 Zustandsänderungen durch
}
function handleClickWithFlush() {
// erzwingt ein erneutes Rendering
flushSync(() => {
setCount((c) => c + 1);
});
// verursacht ein weiteres erneutes Rendering
setIsEven((count + 1) % 2 === 0);
}
useEffect(() => {
console.log("Rendering der auto-gebatchten Komponente");
});
return (
<div>
<p>
AutoBatching ist {autoBatching ? "EIN" : "AUS"}{" "}
<button onClick={() => setAutoBatching(!autoBatching)}>umschalten</button>{" "}
</p>
<button onClick={autoBatching ? handleClick : handleClickWithFlush}>+1</button>
<p className="even-odd">
{count} ist {isEven ? "gerade" : "ungerade"}
</p>
</div>
);
}
export default AutoBatchedComponent;Die Callback-Funktion des Effekts gibt in der gegebenen Beispiel-Implementierung jedes Mal, wenn sie die Komponente rendert, „Rendering der auto-gebatchten Komponente“ in der Konsole aus. Standardmäßig verwendet React 18 das automatische Batching, um Zustandsaktualisierungen zu gruppieren und die Komponente nur einmal neu zu rendern, wie im Beispiel gezeigt, in dem zwei Zustandsaktualisierungen nur eine Zeile in der Konsole ausgeben.
Es gibt jedoch Szenarien, in denen Sie die Komponente bei jeder Zustandsänderung erneut rendern müssen, wie es in
React 17 der Fall war. In solchen Fällen können Sie flushSync() verwenden, um das automatische Batching zu umgehen. Es ist jedoch erwähnenswert, dass dieses Verhalten nicht empfohlen wird und nur als vorübergehende Lösung gedacht ist, bis Entwickler ihre Komponenten für das automatische Batching umschreiben können.
In dem obigen Beispiel verwenden wir flushSync(), um React 17 nachzuahmen. Wir wechseln zwischen zwei Klick-Handlern, einer verwendet automatisches Batching, um die Zustandsvariablen zu aktualisieren, und einer verwendet flushSync(), um nach jeder Zustandsänderung ein erneutes Rendering zu erzwingen. Dadurch werden im letzteren Fall bei jedem Klick auf den „+1“-Button zwei Zeilen in der Konsole ausgegeben. Den vollständigen Code für dieses Beispiel finden Sie hier.
Übergänge zur Priorisierung von UI-Änderungen
Übergänge in React bieten eine neue Möglichkeit zur Priorisierung von UI-Änderungen. Mit Übergängen können Sie zwischen dringenden und nicht dringenden Aktualisierungen des UI unterscheiden. Diese Unterscheidung ermöglicht es Ihnen, die wichtigeren Aktualisierungen vor weniger dringenden zu priorisieren.
Um Übergänge zu nutzen, müssen Sie den neuen Hook useTransition() verwenden. Im folgenden Code liefert der useTransition() Hook ein Array mit zwei Werten: einer booleschen Variable namens isPending, die true gesetzt wird, wenn ein Übergang stattfindet, und einer Funktion namens startTransition, die den Übergang durch Aufrufen einer Rückruffunktion einleitet.
const [isPending, startTransition] = useTransition();Der Code, der innerhalb der Rückruffunktion platziert wird, wird mit niedrigerer Priorität als Zustandsänderungen außerhalb der startTransition-Funktion ausgeführt. Dies bedeutet, dass Zustandsänderungen, die nicht innerhalb von startTransition gewickelt sind, eine höhere Priorität haben, während die Zustandsänderungen innerhalb der Rückruffunktion im Hintergrund stattfinden.
Das resultierende gleichzeitige Rendering, das mit startTransition erstellt wurde, ist abbrechbar. Wenn der Benutzer weitere Änderungen vornimmt, die die Gültigkeit des Renderings beeinflussen, wird dieses Rendering unterbrochen und verworfen. Insgesamt sorgen Übergänge für eine reaktionsfreudigere Benutzeroberfläche.
Es ist wichtig, den Anwendungsfall für Zustandsänderungen zu verstehen, wenn Sie die startTransition-Rückruffunktion verwenden. Diese Funktion ist hauptsächlich für den Übergang von einem Rendern zum anderen in React 18 gedacht. Die Rückruffunktion muss eine synchrone Funktion sein, da sie sonst nicht korrekt funktioniert.
Hier ist ein Beispiel, um zu verdeutlichen, wie die startTransition()-Rückruffunktion verwendet wird:
import React, { useState, useTransition } from "react";
import TabButton from "./TabButton";
import Grid from "./Grid";
const Transition = () => {
const [isPending, startTransition] = useTransition();
const [selected, setSelected] = useState(10);
const [count, setCount] = useState(10);
const clickTab = (amount) => {
setSelected(amount);
startTransition(() => set
Count(amount));
};
return (
<div>
<h3>
Klicken Sie auf die Schaltflächen, um größere
Gitter anzuzeigen.
</h3>
<p>
Wenn Sie auf die Schaltfläche klicken, um die Größe des Gitter
auszuwählen, ändert sich der Zustand der Schaltfläche sofort, aber
das Gitter kann sehr lange dauern, um gerendert zu werden.
</p>
<p>
Klicken Sie auf die Schaltfläche "500 x 500" und dann auf "10 x 10",
um das Rendering abzubrechen.
</p>
<div className="tabs">
<TabButton
isActive={selected === 10}
onClick={() => {
clickTab(10);
}}
>
10 x 10
</TabButton>
<TabButton
isActive={selected === 100}
onClick={() => {
clickTab(100);
}}
>
100 x 100 (langsamer)
</TabButton>
<TabButton
isActive={selected === 500}
onClick={() => {
clickTab(500);
}}
>
500 x 500 (am langsamsten)
</TabButton>
<div className="rendering">{isPending ? " Rendering..." : ""}</div>
</div>
<Grid count={count} />
</div>
);
};
export default Transition;In diesem Beispiel wird der useTransition()-Hook verwendet, um zwischen zwei Zuständen zu wechseln: einer zur Anzeige der markierten Registerkarte und einer innerhalb einer startTransition-Rückruffunktion, um die Anzahl der Zeilen und Spalten festzulegen, die im -Komponenten gerendert werden sollen.
Wenn ein Benutzer auf die Schaltfläche „100 x 100“ oder „500 x 500“ klickt, erscheint eine „Rendering…“-Nachricht, wenn die Konstante isPending true ist. Dies zeigt an, dass im Hintergrund ein Rendervorgang stattfindet und nur angezeigt wird, wenn das Rendering lange dauert.
Während die Änderung der Schaltfläche sofort erfolgt, wird das Rendern des Gitters später stattfinden. Wenn der Benutzer jedoch während des Wartens auf die Schaltfläche „10 x 10“ klickt, wird das lange Rendern abgebrochen. Dies verdeutlicht, wie die Funktion im unterbrechbaren/kündbaren gleichzeitigen Rendering-Mechanismus von React 18 funktioniert.
Neue Hooks in React 18
React 18 führt mehrere neue Hooks ein, die darauf abzielen, die Leistung und Robustheit von React-Anwendungen zu verbessern. Neben dem bereits ausführlich besprochenen useTransition-Hook gibt es einige andere, die es sich lohnt, zu erkunden.
useId
Der useId-Hook generiert eindeutige IDs, die auf der Server- und Client-Seite stabil sind. Er wurde entwickelt, um mit Komponenten verwendet zu werden, die eindeutige IDs benötigen, wie z.B. UI-Testsequenzen, die Benutzeraktionen nachahmen. Es wird jedoch nicht empfohlen, eindeutige Schlüssel für das Rendern von Sammlungen zu erstellen. Weitere Informationen zum useId-Hook finden Sie hier.
useDeferredValue
Der useDeferredValue Hook hat eine ähnliche Funktion wie useTransition und wird häufig für das Debouncing verwendet. Im Gegensatz zu herkömmlichem Debouncing-Code, der auf einer bestimmten Zeitspanne basiert, aktualisiert React den Wert, sobald die anderen wartenden Aufgaben abgeschlossen sind. Weitere Informationen zu diesem Hook finden Sie auf dieser Seite.
React.StrictMode
<React.StrictMode> ist ein Entwicklungstool, das Entwicklern dabei hilft, die Robustheit ihrer Komponenten zu testen, während sie sich auf eine Zukunft vorbereiten, in der das Montieren und Demontieren mit wiederverwendbarem Zustand funktioniert. Dies ist nur im Entwicklungsmodus verfügbar.
React simuliert das Demontieren und Wiederanbringen von Komponenten, sodass Sie sicher sein können, dass Ihre Komponenten korrekt funktionieren, wenn der wiederverwendbare Zustand verfügbar wird. Weitere Informationen zu StrictMode in React 18 finden Sie hier.
Wie man auf React 18 aktualisiert
Die Veröffentlichung von React 18 bringt zahlreiche Änderungen an der Kern-API für das Server-seitige Rendern und den Client-seitigen Anwendungscode mit sich. Dieser Artikel hat jedoch nur einige der herausragenden Funktionen behandelt. Wenn Sie daran interessiert sind, auf React 18 zu aktualisieren, bietet der React-Blog umfassende Informationen zu diesem Thema, einschließlich eines Upgrade-Leitfadens.
Abschließende Gedanken zu React 18
React 18 markiert einen bedeutenden Meilenstein für die Bibliothek mit einer grundlegenden Veränderung in ihrer Funktionsweise. Obwohl diese Veränderung auf den ersten Blick einschüchternd erscheinen mag, handelt es sich bei vielen der Updates um Optimierungen, die automatisch erfolgen und keine Code-Änderungen erfordern.
Aber das ist erst der Anfang. Das React-Team plant die Veröffentlichung einer neuen Version des <Offscreen>-Komponenten, die es Entwicklern ermöglicht, UI-Screens im Hintergrund vorzubereiten und den aktuellen Zustand der Komponente beizubehalten, wenn sie demontiert und wieder montiert wird. Darüber hinaus werden Server-Komponenten entwickelt, die die Funktionen von <Suspense> mit serverseitigen Fähigkeiten kombinieren.
Als Entwickler können wir uns auf die vielen neuen Funktionen freuen, die React und Drittanbieter-Bibliotheken in den kommenden Jahren einführen werden. Obwohl einige der Änderungen anfangs schwierig zu verstehen sein mögen, können wir uns auf die Vision verlassen, die das React-Team für die Zukunft hat.
Wenn Sie sich fragen, ob Sie auf React 18 aktualisieren sollten, lautet meine Antwort eindeutig ja. Dies ist nicht nur ein großer Release, sondern ein Game Changer, und das React-Team hat viel Arbeit investiert, um den Übergang so reibungslos wie möglich zu gestalten. Durch ein Upgrade können Sie die neuen Funktionen nutzen, an denen das React-Team für die Zukunft arbeitet.
