Das lang erwartete React v18 wurde vor einigen Monaten endlich veröffentlicht. Obwohl es keine großen Änderungen gab, wurden einige interessante Funktionen hinzugefügt, die einen Blick wert sind. In diesem Artikel werden einige neue Ergänzungen und das Upgrade auf React v18 beschrieben.

Upgrade auf React 18

Um die neueste Version von React zu installieren, führen Sie diesen Befehl in einem Terminal aus:

npm Installieren reagieren reagieren-dom

Oder wenn Sie Garn verwenden:

Garn hinzufügen reagieren reagieren-dom

Sobald Sie die neueste Version installiert haben, können Sie die neuen Funktionen nutzen.

Es gibt mehrere Ergänzungen in React 18; Hier sind vier der bemerkenswertesten.

1. strikter Modus

StrictMode ist eine Funktion, mit der Sie potenzielle Probleme in einer Anwendung hervorheben können. Prüfungen im strengen Modus werden nur im Entwicklungsmodus ausgeführt und wirken sich nicht auf den Produktions-Build aus. Sie können jedoch sehr nützlich sein, um potenzielle Probleme in Ihrem Code zu identifizieren.

instagram viewer

Sie können den strikten Modus für jeden Teil Ihrer Anwendung aktivieren. Sie können es beispielsweise für alle Ihre Komponenten oder nur für einige von ihnen aktivieren.

importieren Reagieren aus 'reagieren';
FunktionDemoBeispiel() {
Rückkehr (
<div>
<ErsteKomponente />
<Reagieren. Strikter Modus>
<ZweiteKomponente />
<Dritte Komponente />
</React.StrictMode>
<Vierte Komponente />
</div>
 );
}

Im obigen Code würden alle vier Komponenten auf mögliche Probleme überprüft. Strenge Modusprüfungen gelten jedoch nur für die und .

StrictMode hilft auch auf andere Weise, wie zum Beispiel:

  • Identifizieren von Komponenten mit unsicheren Lebenszyklen: Wenn eine Komponente über eine als unsicher gekennzeichnete Lebenszyklusmethode verfügt, werden Sie im strikten Modus gewarnt.
  • Warnung zur Verwendung der Legacy-String-Ref-API: Wenn Sie die Legacy-String-Ref-API verwenden, warnt Sie der Strict-Modus vor seiner Verwendung.
  • Warnung zur veralteten findDOMNode-Nutzung: Wenn Sie die veraltete findDOMNode-API verwenden, werden Sie im strikten Modus davor gewarnt.
  • Unerwartete Nebenwirkungen erkennen: Wenn eine Komponente an unerwarteten Stellen Seiteneffekte (wie setState) auslöst, warnt Sie der strikte Modus davor.
  • Legacy-Kontext-API erkennen: Wenn Sie die veraltete Kontext-API verwenden (die jetzt veraltet ist), werden Sie im strikten Modus davor gewarnt.
  • Wiederverwendbarkeit sicherstellen: Wenn Sie einen Zustand haben, der von mehreren Komponenten verwendet wird, hilft der strikte Modus sicherzustellen, dass er ordnungsgemäß synchronisiert wird.

Insgesamt kann der strikte Modus ein nützliches Feature in der Entwicklung sein, um potenzielle Probleme in Ihrem Code zu identifizieren.

2. Übergänge

Übergänge ermöglichen es Ihnen, bestimmte UI-Updates als nicht dringend zu markieren. Das bedeutet, dass React andere wichtigere Updates priorisieren kann.

Wenn Sie beispielsweise zwei Textfelder haben – eines für eine Suchanfrage und eines für die zugehörigen Ergebnisse – möchten Sie das Textfeld der Suchergebnisse als Übergang markieren. Auf diese Weise weiß React, dass es dieses Textfeld nicht jedes Mal dringend neu rendern muss, wenn der Benutzer etwas in das Textfeld der Suchanfrage eingibt.

Sie können die startTransition-Funktion verwenden, um ein UI-Update als Übergang zu markieren. Hier ist ein Beispiel:

importieren { StartÜbergang } aus 'reagieren';
StartÜbergang(() => {
// Alle nicht dringenden Zustandsaktualisierungen darin als Übergänge markieren
});

Dieser Code würde alle Zustandsaktualisierungen innerhalb der startTransition-Funktion als Übergänge markieren. Auf diese Weise kann sich React auf andere, wichtigere UI-Updates konzentrieren.

3. Automatisches Batching

React bietet eine hilfreiche Funktion namens Batching, die die Anzahl der erneuten Renderings reduziert, die stattfinden, wenn sich ein Status ändert. Dies kann bei der Optimierung der Leistung sehr hilfreich sein, insbesondere wenn Arbeiten mit asynchronem Code.

Wenn Sie zuvor ein Versprechen hatten oder einen Netzwerkanruf tätigten, wurden die Statusaktualisierungen nicht gestapelt und React musste mehrmals neu rendern. Beim automatischen Batching in React 18 werden jedoch alle Statusaktualisierungen gestapelt, sogar innerhalb von Promises, setTimeouts und Event-Callbacks. Dadurch wird die Arbeit, die React im Hintergrund leisten muss, erheblich reduziert.

Sie können Zustandsaktualisierungen manuell stapeln, indem Sie die Funktion flushSync verwenden, aber ab React 18 ist dieser Prozess jetzt automatisch. Dies führt zu einer viel besseren Leistung, da React auf die Beendigung einer Mikroaufgabe wartet, bevor es erneut gerendert wird.

4. Neue Haken

Version 18 führt viele neue ein Haken reagieren, einschließlich useId, useTransition und useDeferredValue. Diese neuen Hooks bieten eine großartige Möglichkeit, Ihren React-Apps mit minimalem Aufwand zusätzliche Funktionen hinzuzufügen.

React 18 liefert verbesserte App-Performance

React 18 ist da und bringt einige großartige Verbesserungen der Leistung von Web-Apps mit sich. Mit der neuen Version von React können Sie ganz einfach Web-Apps erstellen, die reaktionsschneller sind und insgesamt eine bessere Leistung erbringen. Wenn Sie also eine Web-App erstellen möchten, die reibungslos läuft und großartig aussieht, sollten Sie sich unbedingt React 18 ansehen.