Was hat sich in React geändert?

Als Entwickler müssen Sie über die von Ihnen verwendete Technologie auf dem Laufenden bleiben. Kürzlich wurde Version 19 von React stabilisiert. In diesem Beitrag machen Sie sich mit den Änderungen vertraut, die in Version 19 eingeführt wurden.

Der Beitrag besteht aus zwei Teilen. Im ersten Teil geht es darum, was in Version 19 neu ist und welche Teile in React verbessert wurden. Schauen wir uns vor den Neuigkeiten an, was sich verbessert hat.

Ref als Requisiten geben

Wir müssten „forwardRef“ verwenden, um die

refs als Requisiten zu übergeben, und das wäre überflüssig. Und der darin geschriebene Code wäre:

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  // ...
});

Jetzt kann der Schiedsrichter direkt als Requisiten angegeben werden

function MyInput({placeholder, ref}) {
  return <input placeholder={placeholder} ref={ref} />
}

//...
<MyInput ref={ref} />

Bereinigungsfunktion für Ref

Wenn die Referenz in einer Komponente verwendet wird, muss die Referenz gelöscht werden, wenn die Bereitstellung der Komponente von der Benutzeroberfläche aufgehoben wird. Dies ist wichtig für eine effiziente Speicherverwaltung und um unerwartete Situationen zu vermeiden. In früheren Versionen wurde dies im Rückgabeteil von useEffect:
geschrieben

function Example() {
    const ref = useRef(null);

    useEffect(() => {
        ref.current = null; // Reset ref if needed
    }, [/* dependencies */]);
}

Nach der Änderung in Version 19 wird der obige Code wie folgt geschrieben:

<input
  ref={(ref) => {
    // ref created

    // NEW: return a cleanup function to reset
    // the ref when element is removed from DOM.
    return () => {
      // ref cleanup
    };
  }}
/>

Option zum Zuweisen eines Anfangswerts zu useDeferredValue

Sie wissen bereits, warum initialValue angegeben wird, sodass Sie mit dem nächsten Abschnitt fortfahren können)

Metadatenunterstützung

Um Metaelemente wie

Meta, Titel der gewünschten Seite zuzuweisen, musste man useEffect oder Bibliotheken wie React-Helm verwenden.

Version 19 hat die Möglichkeit hinzugefügt, diese Tags direkt zu verwenden.

function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}

bindet beim Rendern einer React-Komponente automatisch Meta-Tags in das

-Element ein.

Unterstützen Sie Stile

Diese Version konzentrierte sich auch auf die Optimierung von Stilen und fügte die Möglichkeit hinzu, Stile zum richtigen Zeitpunkt herunterzuladen, sowie das Prioritätsattribut. Dieses Attribut steuert die Reihenfolge, in der Stile zum DOM hinzugefügt werden. Stile werden geladen, bevor ihre abhängige Komponente bereitgestellt wird.

Unterstützung für asynchrone Skripte

Asynchrone Skripte können genau wie Stile zum gewünschten Zeitpunkt heruntergeladen werden. Eine Komponente, die Stile und asynchrone Skripte lädt, muss sich nicht darum kümmern, sie erneut herunterzuladen, wenn sie an mehreren Orten verwendet werden, da sie beim ersten Laden zwischengespeichert werden)

Ressourcen vorab laden

Das möglichst schnelle Herunterladen einer Ressource wirkt sich positiv auf die Leistung der Website aus. In React 19 wurden neue APIs angekündigt, um diese Funktion zu nutzen. Dies sind die folgenden

preinit – um die Ressource (Skripte oder Module) schnell herunterzuladen und zu verwenden;
Vorladen – um die Ressource im Voraus herunterzuladen. In diesem Fall ist es nicht erforderlich, die geladene Ressource schnell zu verwenden (Schriftarten, Stile)
preconnect – öffnet eine Verbindung zu dem Server, auf den Sie die Ressource laden möchten, was die Ladezeit der Ressource beschleunigt.
prefetchDNS funktioniert wie preconnect, außer dass es eine Ressource herunterlädt und zwischenspeichert, bevor eine Anfrage gestellt wird, ohne eine Verbindung herzustellen.

Unterstützung für benutzerdefinierte Elemente

React hat in früheren Versionen keine Requisiten erkannt, wenn benutzerdefinierte Elemente verwendet wurden. Ab der neuen Version können sie problemlos verwendet werden. Ein Beispiel für ein benutzerdefiniertes Element -> .

Hinweis: An einigen Stellen werden im Code keine Beispiele bereitgestellt. Beispiele finden Sie hier

Das obige ist der detaillierte Inhalt vonWas hat sich in React geändert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!