Neue Funktionen und Änderungen in React 18

React 18 wurde am 29. März 2022 auf den Markt gebracht und das React-Team verspricht, dass diese Version neue erstaunliche Änderungen enthält:

Werfen wir einen Blick auf die neuen Funktionen und Extras:

• Upgrades von alten Versionen
• Gleichzeitiger Renderer
• createRoot
• hydrateRoot
• onRecoverableError
• automatische Dosierung
• useTransition
• useDeferredValue
• useId
• useSyncExternalStore
• useInsertionEffect

 

Upgrades von alten Versionen ♻️

1. React 18 installieren

   Hinweis Sie werden wahrscheinlich die Warnmeldung ReactDOM.render wird in React 18 nicht mehr unterstützt sehen, wenn Sie versuchen, die Anwendung auszuführen.

    

2. Ersetzen Sie die Rendering-Methode

   Wooohoooooo!!!

Wenn Sie gerade ein neues Projektbeginnen, nutzen Sie die unten aufgeführten neuen Funktionen Wenn Sie ein altes Projekt migrieren, stellen Sie sicher, dass Sie die aktuelle Liste der gemeldeten Bugs im offiziellen Repo hier

 

---

 

Gleichzeitiger Renderer ️

Das React-Team verkauft es als das wichtigste *Feature (eigentlich ist es kein Feature):

"Es handelt sich um einen neuen Mechanismus hinter den Kulissen, der es React ermöglicht, mehrere Versionen Ihrer Benutzeroberfläche gleichzeitig vorzubereiten.

React-Team

Gleichzeitige Rendering-Implementierung ermöglicht:

• Prioritäts-Warteschlange
• mehrfache Pufferung.

Aber nichts davon ist über die API für Entwickler sichtbar. Es handelt sich eher um eine Implementierung unter der Haube. Es ist wichtig zu wissen, dass bei einem Upgrade auf React 18, bevor Sie weitere Funktionen hinzufügen, die Aktualisierungen genauso gerendert werden wie in früheren Versionen von React.

Kurz gesagt bedeutet dies, dass es bisher so war, dass React, sobald es mit dem Rendern begonnen hatte, nicht mehr gestoppt werden konnte, bis der Benutzer das Ergebnis auf dem Bildschirm sehen konnte, aber von nun an stehen neue Möglichkeiten zur Verfügung, wie z.B:

• Abbrechen umfangreicher UI-Renderings mitten im Prozess
• Benutzerinteraktionen eine höhere Priorität einräumen, zum Beispiel

React Concurrency ist eine Kernimplementierung, die Funktionen wie Suspense, Übergänge und Streaming Server Rendering ermöglicht und die Tür für neue Möglichkeiten in der nahen Zukunft öffnet.

---

 

createRoot

Eine neue Methode, die die alte ReactDOM.render im Stammverzeichnis Ihrer Anwendung ersetzt. Dadurch werden die nächsten, unten beschriebenen Methoden verfügbar.

⚠️ Achtung: Die Änderung der Art und Weise, wie Ihre Anwendung gerendert wird, kann zu unerwartetem Verhalten führen. Lesen Sie im ersten Punkt dieser Liste nach, wie Sie dies implementieren können.

---

 

hydrateRoot

Neue Methode zur Hydrierung einer vom Server gerenderten Anwendung. Verwenden Sie es anstelle von ReactDOM.createRoot oder dem alten ReactDOM.hydrate.

Sie benötigen auch einen Server zum Rendern (Node, Denojs, etc...), um die Hauptdatei mit dem ReactDOMServer.

Da dies ein wenig komplexer ist, werde ich die Details für einen nächsten Artikel aufheben.

Ich würde es nur für ältere Projekte empfehlen, bei denen neue Frameworks (wie NextJS oder Remix) nicht in Frage kommen, oder wenn Sie lieber die Kontrolle über alles haben möchten.

---

 

onRecoverableError

Eine neue, einfachere Möglichkeit, globale Fehler während des Renderings oder der Hydrierung zu protokollieren. In älteren Browsern verwendet React reportError oder console.error. Es gibt nicht viele Informationen darüber und auch die offizielle Dokumentation zeigt kein Ergebnis.

Aber Sie können es selbst ausprobieren:

---

 

Automatische Dosierung ✂️

Batching bedeutet, (Dinge) in Sets oder Gruppen anzuordnen. Denken Sie also an "Funktionen in Gruppen aufrufen".

Das folgende Beispiel verdeutlicht dies wahrscheinlich besser:

Einfach, nicht wahr? Dies ist nur dank der neuen Kernimplementierung des React 18 Concurrent Renderers möglich.

Hinweis Die automatische Stapelverarbeitung ist standardmäßig aktiviert. Wenn Sie sie also überspringen möchten, müssen Sie die Funktion flushSync verwenden.

---

 

useTransition

Mit dieser Methode können Sie einem Codeblock eine niedrige Priorität zuweisen, so dass alles andere zuerst ausgeführt und gerendert wird als der Code in der startTransition-Methode.

Mit Chrome Entwickler geöffnet haben, können Sie die CPU-Drosselung einschalten, um den Effekt besser zu sehen

[caption id="attachment_55178" align="aligncenter" width="851"] Chrom-Entwickler-Tools[/caption]

 

Beispiel:

Sehen Sie den vollständigen Code hier: codesandbox.io/s/use-transition

Das Hauptziel besteht darin, alle Prozesse und Rendervorgänge anzuhalten, bis React den Code in der startTransition-Methode ausführen kann, damit die Benutzereingabe nicht unterbrochen wird, was das Benutzererlebnis verbessert.

Natürlich sollten Sie nicht alle Funktionen oder mehrere startTransition-Methoden darin unterbringen, da es bereits einige Kosten verursacht, um sich selbst auszuführen. Daher wird empfohlen, sie nur in langsamen und verzögerten Benutzeroberflächen zu verwenden.

Das obige Beispiel ist nur eine künstliche Implementierung, um zu sehen, wie es funktioniert. Weitere Beispiele aus der Praxis werden hier diskutiert: github.com reactwg react-18 discussions

 

---

 

useDeferredValue

In diesem Fall bedeutet "aufschieben", etwas zu verschieben oder im Grunde aufzuschieben, bis es ausgeführt werden kann.

Hm... das scheint der vorherigen Funktion ziemlich ähnlich zu sein, nicht wahr?

Laut Dan Abramov ist useDeferredValue nützlich, wenn der Wert "von oben" kommt und Sie keine Kontrolle über den entsprechenden setState-Aufruf haben.

Ein anderes Beispiel könnte also sein:

Sehen Sie den vollständigen Code hier: codesandbox.io use-deferred-value

 

---

 

useId

Ein einfacher Hook zur Erzeugung eindeutiger IDs, die zwischen Server und Client stabil sind.

Hinweis Es ist nicht empfehlenswert, Schlüssel in einer Liste zu erzeugen. Sie sollten immer eine ID aus Ihren eigenen Listendaten wählen, wie hier erklärt.

 

---

 

Hinweis ⚠️ Die folgenden Hooks werden für Bibliotheksautoren bereitgestellt, um Bibliotheken tief in das React-Modell zu integrieren, und werden laut React-Dokumentation normalerweise nicht im Anwendungscode verwendet, aber es ist immer gut zu wissen, oder?

useSyncExternalStore

Diese Methode wurde beschrieben als:

"Sie ermöglicht es React-Komponenten, sicher und effizient aus einer veränderlichen externen Quelle zu lesen. Die API erkennt Mutationen, die während eines Renderings auftreten, um Tearing zu vermeiden, und plant automatisch Aktualisierungen, wenn die Quelle verändert wird.

React-Team

Dieser Hook akzeptiert drei Argumente:

• subscribe: Funktion zur Registrierung eines Rückrufs, der immer dann aufgerufen wird, wenn sich der Speicher ändert.
• getSnapshot: Funktion, die den aktuellen Wert des Speichers zurückgibt.
• getServerSnapshot: Funktion, die den beim Server-Rendering verwendeten Snapshot zurückgibt.

 

---

 

useInsertionEffect

Es funktioniert genau wie useEffect, wird aber synchron vor allen DOM-Mutationen aufgerufen. Sie empfehlen es, um Stile in das DOM zu injizieren, bevor Sie das Layout lesen. Denken Sie daran, dass der Zugriff auf einige Daten, wie useRef oder schedule update, aufgrund seiner eigenen Natur eingeschränkt ist.

 

---

 

Fazit

Einige kleinere Änderungen (aber nicht weniger wichtig) finden Sie im offiziellen Änderungsprotokoll. Werfen Sie einen Blick in das offizielle Änderungsprotokoll: