Major React 18 Änderungen / Sudo Null IT News

Hallo, mein Name ist Christina, ich bin Frontend-Entwicklerin bei DomClick. Ich möchte euch ein wenig über die wichtigsten Änderungen in React 18 erzählen.

Was gibt’s Neues:

  • Neue Funktionen (useId, useDeferredValue, useSyncExternalStore, useInsertionEffect).

  • Übergänge (startTransition, useTransition).

  • Spannung auf dem Server.

Verbessert:

Veraltet:

  • ReactDOM.render ⇒ ReactDOM.createRoot

  • ReactDOM.hydrate ⇒ ReactDOM.hydrateRoot

  • ReactDOM.unmountComponentAtNode

  • ReactDOM.renderSubtreeIntoContainer

  • ReactDOMServer.renderToNodeStream

Wie aktualisiere ich?

  1. npm installiere React React-Dom oder Garn füge React React-Dom hinzu.

  2. Da ReactDOM.render veraltet ist, müssen Sie mit ReactDOM.createRoot einen Stamm erstellen und damit rendern. Ohne dies sind die neuen Funktionen von React 18 nicht verfügbar.

importiere ReactDOM aus ‘react-dom’; App aus „App“ importieren; const container = document.getElementById(‘app’); const root = ReactDOM.createRoot (Container); root.render();

Konkurrenzfähiges Rendering (Parallelität)

Was Wettbewerbsfähigkeit? Sie müssen beispielsweise Alice und Bob anrufen. Im nicht kompetitiven Modus rufst du zuerst Alice an und erst nach dem Gespräch mit ihr rufst du Bob an. Wenn die Gespräche kurz sind, ist alles in Ordnung, aber wenn sich das Gespräch mit Alice beispielsweise aufgrund von Problemen auf der Leitung verzögert, kann dies Zeitverschwendung sein.

Im Wettbewerbsmodus können Sie Alice anrufen und dann das Gespräch halten, während Sie Bob anrufen. Dies bedeutet jedoch nicht, dass Sie mit zwei Personen gleichzeitig sprechen, sondern Sie können aus zwei oder mehr Anrufen das für Sie wichtigste auswählen. So funktioniert kompetitives Rendern in React 18.

Das Rendern kann unterbrochen, angehalten, fortgesetzt oder gestoppt werden. Dadurch kann React schnell auf Benutzerinteraktionen reagieren. Vor React 18 war das Rendern eine fortlaufende synchrone Transaktion, die nach dem Start nicht mehr unterbrochen werden konnte.

Automatische Chargenbildung

Was Chargenbildung? Ich schlage vor, ein weiteres Beispiel aus dem Leben zu betrachten. Angenommen, Sie beschließen, einen Salat zuzubereiten. Erstellen Sie eine Liste aller Produkte, die Sie kaufen müssen, gehen Sie in den Laden und kaufen Sie alles auf einmal – das ist Batching.

Ohne Batching fängst du an zu kochen, dann hast du keine Gurken für den Salat, du gehst in den Laden, du kaufst Gurken, du kommst zurück und kochst weiter, dann findest du heraus, dass du keine Tomaten hast, du gehst in den Laden und … in diesem Moment haben Sie bereits ihr tägliches Kontingent an einem Fitnessarmband erfüllt.

In React hilft Batching dabei, die Anzahl der erneuten Renderings zu reduzieren, die beim Aufrufen von setState auftreten.

setIsLoaded (true); setError(true); setModalStatus(‘error’);

In diesem Code wird React nach jedem der Aufrufe neu rendern, aber das ist nicht effizient. Es wäre besser, zuerst alle Zustandsaktualisierungen aufzuzeichnen und danach einmal zu rendern. Aber wie kann React wissen, dass Sie die Statusaktualisierung abgeschlossen haben? Und er kann zum Beispiel mit einem Event-Handler verstehen:

// Dieses Verhalten in React 17 und React 18 function handleClick() { setIsLoaded(true); setError(true); setModalStatus(‘error’); }

Das erneute Rendern erfolgt, nachdem die Funktion ausgeführt wurde.

Schauen wir uns ein anderes Beispiel an:

setTimeout(() => { setIsLoaded(true); setError(true); setModalStatus(‘error’); }, 1000);

Vor React 18 wurde bei jeder Zustandsaktualisierung erneut gerendert. Aber jetzt werden alle Updates automatisch innerhalb von Timeouts, Promises oder nativen Event-Handlern gestapelt.

Übergänge

Übergänge können verwendet werden, um dringende und nicht dringende Aktualisierungen anzuzeigen. Wenn Sie beispielsweise Text in ein Suchfeld eingeben, erscheint ein blinkender Cursor, um eine visuelle Rückmeldung zu geben, und eine Datensuchfunktion wird ausgeführt. Visuelles Feedback ist für den Benutzer wichtiger, während die Suche weniger wichtig ist und als nicht dringend gekennzeichnet werden kann. Diese nicht dringenden Aktualisierungen werden als Übergänge bezeichnet. Indem Sie sie festlegen, teilen Sie React mit, welche Updates priorisiert werden sollen. Dies vereinfacht die Rendering-Optimierung.

Updates können mit startTransition als nicht dringend markiert werden:

importiere { startTransition } von ‘react’; // Dringende Aktualisierung des Eingabewerts setInputValue(value); // Nicht dringende Aktualisierung der Suchanfrage startTransition(() => { setSearchValue(value); });

Was ist der Unterschied zu setTimeout?

  1. setTimeout hat eine Verzögerung bei der Ausführung, während die startTransition-Verzögerung von dem Gerät abhängt, auf dem es ausgeführt wird, und anderen dringenden Renderings.

  2. StartTransition-Updates können abgebrochen werden.

  3. Mit startTransition können Wartezustände mit dem neuen useTransition-Hook nachverfolgt werden.

function Counter() { // Wartestatus const [isPending, startTransition] = useTransition(); konst [value, setValue] = useState(0); const handleClick = () => { startTransition(() => { setValue(c => c + 1); }) } return ( <> { isPending && } ); }

Spannung

In React 18 wurde diese Technologie architektonisch verbessert. Geändertes Rendering von untergeordneten Komponenten in Suspense. Es ist jetzt auch möglich, Suspense auf dem Server zu verwenden. Aber was ist es?

Stellen Sie sich eine Komponente vor, die eine asynchrone Aufgabe wie das Abrufen von Daten ausführen muss, bevor sie etwas rendern kann. Ohne Suspense würde eine solche Komponente das Flag isFetching / isLoading beibehalten und abhängig davon einen Loader, ein Skelett oder etwas anderes rendern. Und jetzt kann die Komponente mit Hilfe von Suspense anzeigen, dass sie noch nicht bereit ist, und das Rendern anhalten. Zu diesem Zeitpunkt geht React im Baum nach oben zum nächsten Suspense, das einen Fallback setzt, den sogenannten Fallback, der angezeigt wird, bis die Komponente „bereit“ ist.

Strenges Regime

Der strenge Modus in React 18 simuliert das Aushängen und erneute Einhängen einer Komponente mit ihrem vorherigen Zustand, wenn das Einhängen zum ersten Mal erfolgt. Dies bereitet die Voraussetzungen für eine zukünftige Wiederverwendung des Zustands vor, bei der React den vorherigen Bildschirm sofort bereitstellen kann.

Vielleicht ist das alles, worüber ich in diesem Artikel sprechen wollte. Jede Veränderung führt zu neuen Möglichkeiten. Viel Glück mit dem Update!

Similar Posts

Leave a Reply

Your email address will not be published.