Denken Sie darüber nach, das Codieren mit React auszuprobieren? Hier sind die wichtigsten neuen Funktionen, die Sie in React 18 ausprobieren können.

React ist eine sehr beliebte Open-Source-JavaScript-Bibliothek, die 2013 von Facebook erstellt wurde. Aufgrund seiner Flexibilität nutzen viele Entwickler einige seiner Funktionen zum Erstellen schneller, effizienter und wiederverwendbarer Benutzeroberflächenkomponenten.

Im März 2022 veröffentlichte das Team die neueste und erwartete Version der React-Bibliothek, React 18, die neue Funktionen enthält, die sich auf die Verbesserung der Anwendungsleistung konzentrieren.

Die neuen Funktionen in React 18

React 18 besteht aus einigen nützlichen neuen Funktionen, die dem hinzugefügt wurden Open-Source-JavaScript-Bibliothek. Viele dieser Änderungen gab es in der Vorgängerversion nicht, während andere Funktionen verbessert wurden. Zu diesen Funktionen gehören: eine neue Root-API, automatische Stapelverarbeitung, Übergangs-API, Suspense-API und die Veröffentlichung neuer Hooks.

instagram viewer

Neue Root-API

Die Root-API in React verfolgt, wie die Komponente der obersten Ebene im Baum gerendert wird. In den vorherigen Versionen von React war die machen Die Methode wurde zum Ausführen des Renderings verwendet, das jetzt als Legacy-Root-API bezeichnet wird.

Allerdings verfügt React 18 über eine neue Root-API, die mithilfe von einen Root erstellt createRoot -Methode und rendert dann mithilfe der eine React-Komponente in das erstellte Stammverzeichnis machen Methode.

Mit dieser neuen Root-API erhalten Sie Zugriff auf die Funktionen dieser aktuellen Version, beispielsweise auf die später besprochene Übergangs-API-Funktion. Während die alte Methode in React 18 weiterhin funktioniert, wird sie möglicherweise in Zukunft auslaufen.

Der folgende Ausschnitt zeigt, wie die Root-API sowohl auf alte als auch auf neue Weise strukturiert ist.

Legacy-Root-API

importieren ReactDOM aus'react-dom';
importieren App aus'./App';
ReactDOM.render(<App />, dokumentieren.getElementById('App'))

Neue Root-API

importieren ReactDOM aus'react-dom/client';
importieren App aus'./App';
const root = ReactDOM.createRoot(dokumentieren.getElementById('App'));
root.render(<App />)

Automatisches Batching

Batching in React umfasst mehrere Statusaktualisierungen in einem einzigen erneuten Rendern bei jedem Browserereignis, zum Beispiel a Klicken Sie auf ein Ereignis. Alle Zustandsänderungen, die außerhalb eines Ereignisses wie einem Versprechen oder einem Rückruf aufgetreten sind, werden nicht gestapelt.

Mit React 18 werden Batch-Statusaktualisierungen automatisch durchgeführt, unabhängig davon, wo diese Aktualisierungen stattfinden. Diese Funktion bietet eine sofort einsatzbereite Verbesserung der Leistung und Renderzeit. Wenn Sie jedoch einen Komponentenstatus haben, den Sie nicht stapelweise verarbeiten möchten, können Sie dies mit dem deaktivieren FlushSync Methode. Nachfolgend finden Sie einen Beispielausschnitt, wie dies durchgeführt werden kann.

importieren {flushSync} aus'react-dom';
FunktionhandleClick() {
 FlushSync(() => {
 setCount(zählen => zählen + 1);
]});
 FlushSync(() => {
 setStore(speichern => !speichern);
});
}

Übergangs-API

In React können in der Benutzeroberfläche vorgenommene Aktualisierungen als dringend kategorisiert werden und Übergangsaktualisierungen werden auch als nicht dringend bezeichnet. Ein Beispiel für eine dringende Aktualisierung kann die Eingabe eines Textes in ein Feld sein, während es sich bei einer Übergangsaktualisierung um eine Suchfilterfunktion handeln könnte.

Wenn solche Aktualisierungen gleichzeitig erfolgen, könnte dies als schwerer Vorgang bezeichnet werden und zum Einfrieren Ihrer Anwendung führen. Um dieses Problem zu lösen, wurde hier die Übergangs-API aufgerufen startTransition kommt zum Spielen. Diese neue Funktion teilt React mit, welche Updates als „Übergänge“ markiert werden sollen, was wiederum die Benutzerinteraktionen verbessert. Hier ist ein Codebeispiel dafür, wie es funktioniert;

importieren {startTransition} aus"reagieren";
startTransition(() => {
 setSearch (Eingabe);
});

Spannung

Wenn eine Anwendung auf dem Server gerendert wird, wird eine statische HTML-Datei an den Browser zurückgegeben, sodass der Benutzer sehen kann, wie die App aussieht, während das JavaScript geladen wird. Wenn die Datei geladen wird, wird der HTML-Code dynamisch mit dem sogenannten Flüssigkeitszufuhr. Der Nachteil besteht darin, dass Ihre Anwendung nicht interaktiv werden würde, wenn all dies nicht vorhanden wäre.

Um dieses Problem zu lösen, bietet React 18 zwei neue SSR-Funktionen (Server Side Rendering) unter Verwendung von Spannung Komponente;

  • Durch Streaming von HTML können Teile einer Komponente gesendet werden, während sie gerendert werden.
  • Die selektive Hydratation priorisiert die Interaktivität der vom Benutzer ausgewählten Komponenten.

Neue Haken

Ein großer Wendepunkt für React war die Einführung von Haken in React Version 16, die es Funktionskomponenten ermöglicht, auf Zustände und andere React-Funktionen zuzugreifen, ohne Klassen schreiben zu müssen. Der React 18 wird mit fünf neuen Hooks ausgeliefert, um das Entwicklererlebnis zu verbessern;

  • useId: Mit diesem Hook können wir in unserer Anwendung sowohl auf dem Server als auch auf dem Client eine eindeutige Kennung (ID) erstellen.
  • useTransition: Wird daneben verwendet startTransition um eine neue Statusaktualisierung zu erstellen, die als nicht dringend bezeichnet werden kann.
  • useDefferedValue: Ermöglicht das Aufschieben von weniger dringenden Updates.
  • useSyncExternalStore: Dieser Hook ist nützlich, wenn Sie Abonnements für externe Datenquellen implementieren.
  • useInsertionEffect: Dieser Hook ist auf CSS-in-JS-Bibliotheksautoren zum Einfügen von Stilen in das DOM beschränkt.

So aktualisieren Sie auf React 18

Um ein Update durchzuführen, kann der npm- oder Yarn-Paketmanager verwendet werden, indem der folgende Befehl im Terminal ausgeführt wird.

npm Installieren reagieren

oder

Garn hinzufügen reagieren reagieren reagieren-dom

Dann müssen Sie eine Änderung vornehmen index.js Datei im Stammverzeichnis des Projektordners von der alten API zur neuen Stamm-API, wie zuvor gezeigt.

So richten Sie ein neues React 18-Projekt ein

Um ein neues React 18-Projekt einzurichten, wird das Paket „create-react-app“ mit npm oder garn im Terminal installiert;

npx erstellen-react-app meine-react-app

oder

Garn hinzufügen erstellen-react-app meine-react-app

Verbessern Sie die Leistung Ihrer Anwendung mit React 18

Jetzt kennen Sie einige neue Funktionen in React 18 wie die neue Root-API, Suspense, Transition oder Automatic Batching und wissen, wie Sie auf diese neue Version aktualisieren und sie von Grund auf einrichten.

Diese jüngsten Änderungen an React können Sie jetzt erleben.