Wie migriere ich zu React 18?

React 18  entwickelt das beliebte JavaScript-Komponenten-Framework mit neuen Funktionen, die auf gleichzeitigem Rendern und Pausieren basieren. Es verspricht eine bessere Leistung, mehr Funktionen und ein verbessertes Entwicklererlebnis für Apps, die den Übergang vollziehen.

In diesem Artikel zeigen wir Ihnen, wie Sie vorhandene Codebasen auf React 18 aktualisieren. Beachten Sie, dass diese Anleitung nur einen Überblick über die am weitesten verbreiteten Änderungen gibt. Die Migration sollte für kleine Projekte, die bereits den Best Practices von React folgen, ziemlich schmerzlos sein; Große Mengen komplexer Komponenten können einige Probleme verursachen, die wir im Folgenden näher erläutern werden.

React 18 installieren

Bevor Sie etwas anderes tun, verwenden Sie npm, um die React-Abhängigkeit Ihres Projekts auf Version 18 zu aktualisieren:

$ npm install react@latest react-dom@latest

Die neue Version ist technisch nicht abwärtskompatibel. Neue Funktionen werden per Abonnement aktiviert. Da Sie den Code noch nicht geändert haben, sollten Sie in der Lage sein, Ihre Anwendung auszuführen und zu sehen, dass sie korrekt gerendert wird. Ihr Projekt funktioniert mit dem bestehenden React 17-Verhalten.

$ npm start

Funktionen von React 18 aktivieren: Neue Root-API

Die Verwendung von React 18 ohne Änderungen an der Codebasis führt zu einem Nebeneffekt: Jedes Mal, wenn Ihre Anwendung im Entwicklungsmodus gemountet wird, wird eine Browserkonsolenwarnung angezeigt.

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.

Diese Verfallsmeldung kann problemlos ignoriert werden, es sei denn, Sie sind bereit, Ihr Projekt zu aktualisieren. Wenn Sie die Funktionen von React 18 nutzen möchten, müssen Sie die darin beschriebene Änderung vornehmen. Die alte ReactDOM.render()Funktion wurde durch eine neue Root-API ersetzt, die stärker objektorientiert ist. Neben einer verbesserten Benutzerfreundlichkeit aktiviert es auch das parallele Rendering-System, das alle neuen Titelfunktionen unterstützt.

index.jsSuchen Sie in Ihrer Datei app.jsnach ähnlichen Zeilen wie diesen:

Dies ist ein typischer Einstiegspunkt für eine React-Anwendung. Es rendert eine Instanz der importierten AppKomponente als Stammelement Ihrer Anwendung. Der gerenderte Inhalt wird als innerHTMLHTML-Element mit einer id="react".

Um zur React 18-Root-API zu wechseln, ersetzen Sie den obigen Code durch den folgenden:

Der Effekt ist ähnlich wie bei der alten ReactDOM.render()API. Anstatt das Root-Element zu initialisieren und Ihre App als eine einzige zwingende Operation zu rendern, zwingt Sie React 18, zuerst das Root-Objekt zu erstellen und dann Ihren Inhalt explizit zu rendern.

Suchen Sie dann die Stellen im Code, an denen Sie den Root-Knoten aushängen werden. Navigieren Sie ReactDOM.unmountComponentAtNode()zu einer neuen unmount()Methode für Ihr Stammobjekt:

Ersetzen von Render-Callbacks

ReactDOM.render()Das optionale Methoden-Callback-Argument hat kein direktes Gegenstück in der Root-API von React 18. Früher konnten Sie diesen Code verwenden, um sich Rendered!bei der Konsole anzumelden, nachdem React das Rendern des Root-Knotens abgeschlossen hat:

Diese Funktion wurde entfernt, da das Callback-Timing unvorhersehbar ist, wenn die neuen React 18-Serverfunktionen für Teilhydratation und Thread-Rendering verwendet werden. Wenn Sie bereits Render-Callbacks verwenden und die Kompatibilität aufrechterhalten müssen, können Sie ein ähnliches Verhalten mit dem Link-Mechanismus erreichen:

React ruft beim Mounten von Komponenten Funktionsreferenzen auf. Durch das Setzen eines Verweises auf die Komponente, die Ihr Stammknoten ist, können Sie bestimmen, wann das Rendern stattfindet, was einen ähnlichen Effekt wie das alte Render-Callback-System bietet.

Fehlerbehebung bei Aktualisierungsproblemen

Ihre App sollte jetzt mit React 18-Funktionen und ohne Konsolenwarnungen gerendert werden. Testen Sie Ihre Anwendung gründlich, um sicherzustellen, dass alles wie erwartet funktioniert. Wenn Sie Probleme finden, können Sie diese mit diesen allgemeinen Lösungen beheben.

Aktivieren Sie <strikter Modus>

In Komponenten verpackte Apps <StrictMode>verhalten sich möglicherweise anders, wenn sie im Designmodus von React 18 gerendert werden, da der strenge Modus jetzt überprüft, ob Ihre Codebasis den wiederverwendbaren Zustand unterstützt , ein Konzept, das in einer zukünftigen Version vollständig in React eingeführt wird.

Der wiederverwendbare Zustand ermöglicht es React, eine zuvor entfernte Komponente neu zu verdrahten und automatisch ihren letzten Zustand wiederherzustellen. Dies erfordert, dass Ihre Komponenten gegenüber Double-Call-Effekten resistent sind. Der strenge Modus hilft Ihnen jetzt bei der Vorbereitung auf die Wiederverwendung, indem er das Einhängen, Aushängen und erneute Einhängen Ihrer Komponenten bei jeder Verwendung simuliert und alle Probleme identifiziert, bei denen der vorherige Zustand nicht wiederhergestellt werden kann. Sie können den strikten Modus deaktivieren, wenn er Probleme in Ihrer Anwendung oder ihren Abhängigkeiten findet, die Sie nicht angehen möchten.

Unterstützt Batch-Statusaktualisierung

React 18 ändert, wie Zustandsaktualisierungen „verpackt“ werden, um die Leistung zu verbessern. Wenn Sie Statuswerte in einer Funktion mehrmals ändern, versucht React, sie zu einem Re-Rendering zusammenzuführen:

Dieser Mechanismus verbessert die Effizienz, funktionierte aber bisher nur innerhalb von React-Ereignishandlern. In React 18 funktioniert es bei allen Zustandsaktualisierungen, auch wenn sie von nativen Event-Handlern, Timeouts oder Promises stammen. Einige Codes verhalten sich möglicherweise anders als zuvor, wenn Sie an einer dieser Stellen sequenzielle Statusaktualisierungen durchführen.

Sie können dieses Verhalten in Situationen deaktivieren, in denen Sie nicht bereit sind, Ihren Code umzugestalten. Statusaktualisierungen umschließen flushSync(), um sie zum sofortigen Commit zu zwingen:

Hören Sie auf, entfernte und nicht unterstützte Funktionen zu verwenden

Sobald alle oben genannten Aspekte berücksichtigt wurden, sollte Ihre Anwendung vollständig mit React 18 kompatibel sein. Es gibt zwar noch einige Änderungen an der API-Oberfläche , diese sollten sich jedoch nicht auf die meisten Anwendungen auswirken. Hier sind einige davon, die Sie beachten sollten:

• unstable_changedBitswurde entfernt – diese nicht unterstützte API ermöglichte das Deaktivieren kontextbezogener Aktualisierungen. Es ist nicht mehr verfügbar.
• Object.assign()object-assignDas Polyfill wurde entfernt – Sie müssen das Polyfill-Paket manuell hinzufügen , wenn Sie sehr alte Browser ohne integrierte Object.assign().
• Internet Explorer wird nicht mehr unterstützt – Reagieren Sie offiziell auf die Einstellung der Kompatibilität mit dem Internet Explorer bis zum Ende des Supports für den Browser im Juni. Sie sollten nicht auf React 18 upgraden, wenn Ihre Anwendung weiterhin im IE funktionieren soll.
• Die Verwendung von suspend with undefinedfallback ist jetzt äquivalent zu zuvor weggelassenen suspend nulllimits fallback={undefined}, sodass Code bis zur nächsten übergeordneten Grenze im Baum kaskadiert werden kann. React 18 respektiert jetzt Suspense-Komponenten ohne Fallback.

Serverseitiges Rendern

Anwendungen, die serverseitiges Rendering verwenden, erfordern einige weitere Änderungen, um mit React 18 zu funktionieren.

Gemäß der neuen Root-API sollten Sie die alte hydrate()Funktion im clientseitigen Code durch die neue ersetzen, die vom Paket hydrateRoot()bereitgestellt wird react-dom/client:

Ersetzen Sie in Ihrem serverseitigen Code ältere Rendering-API -Aufrufe durch ihre neueren Gegenstücke. In den meisten Fällen sollten Sie renderToNodeStream()zu einem neuen wechseln renderToReadableStream(). Die neuen Streaming-APIs stellen die Streaming-Server-Rendering-Funktionen von React 18 bereit, bei denen der Server weiterhin neuen HTML-Code an den Browser liefern kann, nachdem Ihre App ursprünglich gerendert wurde.

Beginnen Sie mit der Nutzung der Funktionen von React 18

Nachdem Sie das Upgrade durchgeführt haben, können Sie damit beginnen, Ihre App leistungsfähiger zu machen, indem Sie Funktionen von React 18 integrieren. Die Verwendung von Parallelität in React bedeutet, dass das Rendern von Komponenten unterbrochen werden kann, was neue Möglichkeiten und reaktionsschnellere Benutzeroberflächen eröffnet.

Einige der hinzugefügten Funktionen umfassen wichtige Suspense-Updates, eine Möglichkeit , Statusaktualisierungen mithilfe von Transitions zu priorisieren , und einen integrierten Mechanismus zum Drosseln von erneuten Renderings, die durch nicht dringende, aber häufige Updates verursacht werden. Es gibt auch ein paar verschiedene Änderungen und Verbesserungen: Sie können undefinedvon render()einer Komponentenmethode zurückkehren, die Warnung zum Aufrufen setState()unverdrahteter Komponenten wurde entfernt und ein paar neue HTML-Attribute wie imageSizes, imageSrcSet, und werden aria-descriptionvom React DOM-Renderer erkannt.

Zusammenfassung

React 18 ist stabil und einsatzbereit. In den meisten Fällen sollte der Upgrade-Prozess schnell und einfach sein und nur ein npm-Upgrade und einen Wechsel zur neuen Root-API erfordern. Sie sollten jedoch trotzdem alle Ihre Komponenten testen: Sie können sich in einigen Situationen anders verhalten, z. B. im strikten Modus oder wenn die automatische Paketierung angewendet wird.

Diese neue Version weist auf die zukünftige Ausrichtung von React als Hochleistungs-Framework für alle Arten von Webanwendungen hin. Es erweitert auch die serverseitigen Rendering-Funktionen von React, indem eine serverseitige Pause hinzugefügt wird und die Möglichkeit besteht, nach dem ersten Rendern weiterhin Inhalte an Ihre Benutzer zu streamen. Dies gibt Entwicklern mehr Flexibilität, um das Rendering sowohl auf dem Client als auch auf dem Server zu verteilen.