Reagieren Sie auf neue Funktionen – der „use“-Hook

React 19 (RC-Version – Stand September 2024) ist die neueste Version der beliebten Webentwicklungsbibliothek.
V19 ist ein bedeutender Meilenstein und bringt viele neue Funktionen und Haken mit sich. In diesem Beitrag wird einer dieser Hooks besprochen, der Use-Hook.

Der Verwendungshaken

Mit diesem Hook können Entwickler das Rendern einer UI-Komponente anhalten, bis eine asynchrone Aufgabe, wie etwa das Abrufen von Daten oder das Laden von Ressourcen, abgeschlossen ist, indem das empfangene Versprechen angehalten wird, ohne dass eine komplexe Statusverwaltung erforderlich ist.

Beispiel für das Abrufen von Daten

Wir haben eine einfache Komponente, die den klassischen Ansatz, den useEffect-Hook, verwendet und Daten von einer Schein-API abruft (ich verwende MSW).
Wir verwalten einen lokalen Status zum Speichern der Daten, zusammen mit den Abrufstatus isLoading und isError:

const [users, setUsers] = useState<any>(null);
const [isError, setIsError] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(true);

Wenn die Seite zum ersten Mal geladen wird, führen wir diesen useEffect-Hook aus, um die Daten abzurufen, zu speichern und die verschiedenen Zustände zu aktualisieren:

const fetchData = async () => {
  const response = await fetch('/api/users');
  return response.json();
};


useEffect(() => {
  fetchData()
    .then(setUsers)
    .catch(() => setIsError(true))
    .finally(() => setIsLoading(false));
}, []);

Wir zeigen eine Benutzeroberfläche an, während die Anfrage verarbeitet wird oder wenn ein Fehler auftritt:

if (isLoading) {
  return <h2>Loading...</h2>;
}
if (isError) {
  return <h2>Error</h2>;
}

und endlich! Wir rendern die Benutzerliste:

return ( 
  <>
    {users.map((user) => {
      return (
        <div>
          {user.lastName}, {user.firstName}
        </div>
      );
    })}
  </>
);

Viel Boilerplate-Code!

Jetzt lasst uns umgestalten!

Entfernen wir die Hooks useState und useEffect. Wir behalten die fetchData-Methode bei, wie sie ist.
Jetzt rufen wir die Daten mithilfe des neuen Use-Hooks ab, der ein Versprechen entgegennimmt und entweder JSON-Daten oder einen Fehler zurückgibt:

const users = use(fetchData());

Die Funktionsweise dieses Hooks ähnelt der Vorgehensweise:

const users = await fetchData();

Behandlung von isLoading und isError

Um diese Statusänderungen zu verarbeiten, gehen wir zu unserer App-Komponente. Wir verwenden die React Suspense-Komponente, die darauf ausgelegt ist, auf asynchrone Ereignisse zu reagieren. Es zeigt eine Fallback-Benutzeroberfläche an, bis die untergeordneten Elemente vollständig geladen sind.

Für die Fehlerbehandlung bei der Arbeit mit Suspense ist es üblich, eine ErrorBoundary zu verwenden. Wir fügen eine ErrorBoundary-Komponente hinzu, die die getDerivedStateFromError()-Methode von React implementiert.

<ErrorBoundary fallback={<h2>Error</h2>}>
  <Suspense fallback={<h2>Loading...</h2>}>
    <UserList />
  </Suspense>
</ErrorBoundary>

Einige Extras

Die üblichen Regeln für Haken gelten hier nicht – Sie können diesen Haken überall verwenden, wo Sie möchten!

Im Gegensatz zu normalen Hooks kann der Use-Hook bedingt mit einer if-Anweisung verwendet werden, sodass Sie entscheiden können, ob er ausgelöst werden soll oder nicht. Wenn Sie beispielsweise eine neue API-Anfrage mit einem Feature-Flag umschließen und zum Testen umschalten möchten, übergeben Sie einfach das Feature-Flag an die UserList-Komponente und umschließen Sie den Use-Hook. So einfach ist das!

Ändern Sie nun die App-Komponente:

<ErrorBoundary fallback={<h2>Error</h2>}>
  <Suspense fallback={<h2>Loading...</h2>}>
    <UserList testNewApi={true} />
  </Suspense>
</ErrorBoundary>

Ändern Sie die UserList-Komponente:

let users = [];
if(testNewApi){
  user = use(fetchData());
}

Sie können diesen Hook auch verwenden, um ein Kontextobjekt abzurufen, anstatt die reguläre Methode zu verwenden:

const data = useContext(myContext);

Sie können hier beispielsweise den Use-Hook verwenden, wenn Sie den Kontext basierend auf einer bedingten Anweisung abrufen möchten.

Abschluss

In diesem Artikel habe ich die Syntax des Use-Hooks erläutert und Anwendungsbeispiele bereitgestellt. Dies soll Ihnen helfen, diese Haken zu verstehen und sie effektiv umzusetzen. Ich hoffe, dass Sie diese Informationen für Ihre zukünftigen Projekte nützlich finden.

Das obige ist der detaillierte Inhalt vonReagieren Sie auf neue Funktionen – der „use“-Hook. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!