Eine Einführung in SWR: Reaktions-Hooks für das Abrufen von Daten aus der Ferne

SWR ist eine leichtgewichtige Bibliothek, die von Vercel (ehemals ZEIT) erstellt wurde und das Abrufen, Zwischenspeichern oder erneute Abrufen von Daten in Echtzeit mithilfe von React Hooks ermöglicht. Es wurde mit React Suspense erstellt, wodurch Ihre Komponenten auf etwas „warten“ können, bevor sie rendern können, einschließlich Daten. SWR wird auch mit großartigen Funktionen wie abhängigem Abrufen, Fokus auf Neuvalidierung, Wiederherstellung der Bildlaufposition und so weiter ausgeliefert. Es ist auch ein sehr leistungsfähiges Tool, da es Backend-agnostisch ist und TypeScript gut unterstützt. Es ist ein Paket, das eine glänzende Zukunft hat.

Warum sollte es dich interessieren? Sie sollten sich darum kümmern, wenn Sie nach einer Bibliothek gesucht haben, die nicht nur Daten von APIs abruft, sondern auch Dinge wie Caching und abhängiges Abrufen ermöglicht. Was in diesem Tutorial behandelt wird, wird sich als nützlich erweisen, wenn Sie React-Anwendungen mit vielen beweglichen Teilen erstellen. Es wird erwartet, dass Sie Axios und die Fetch-API verwendet haben sollten, obwohl wir vergleichen werden, wie sie sich von SWR unterscheiden, werden wir nicht ins Detail gehen, wie sie implementiert werden.

In diesem Leitfaden werde ich Ihnen React Hooks für den Remote-Datenabruf vorstellen, indem ich eine Pokedex-App baue, die Daten von der Pokemon-API anfordert. Wir werden auch auf andere Funktionen eingehen, die ebenfalls mit SWR geliefert werden, und die Unterschiede zu gängigen Lösungen wie der Fetch-API und der Axios-Bibliothek hervorheben und Ihnen die Gründe nennen, warum Sie diese Bibliothek verwenden und warum Sie SWR im Auge behalten sollten.

Beginnen wir also mit der Beantwortung einer grundlegenden Frage: Was ist SWR?

Was ist SWR?

SWR ist ein Initialismus von stale-while-revalidate. Es ist eine React Hooks-Bibliothek zum Abrufen von Daten aus der Ferne. SWR arbeitet mit drei Hauptschritten: Zuerst gibt es die Daten aus dem Cache zurück (der veraltete Teil), sendet dann die Abrufanforderung (der Revalidierungsteil) und kommt schließlich mit den aktuellen Daten. Aber keine Sorge, der SWR übernimmt all diese Schritte für uns. Das einzige, was wir tun müssen, ist, dem useSWR Hook die erforderlichen Parameter zu geben, um die Anfrage zu stellen.

SWR hat auch einige nette Features wie:

• Back-End-Agnostiker
• Schnelle Seitennavigation
• Revalidierung im Fokus
• Intervallabfrage
• Deduplizierung anfordern
• Lokale Mutation
• Seitennummerierung
• TypeScript bereit
• SSR-Unterstützung
• Suspense-Modus
• Reagieren Sie auf native Unterstützung
• Leicht.

Klingt magisch? Nun, SWR vereinfacht die Dinge und erhöht mit Sicherheit die Benutzererfahrung Ihrer React-App. Und sobald wir mit der Implementierung in unserem Projekt beginnen, werden Sie sehen, warum dieser Haken praktisch ist.

Es ist wichtig zu wissen, dass der Name des Pakets swr oder SWR ist und der Hook, der zum Abrufen der SWR-Funktionen verwendet wird, useSWR .

Theoretisch ist das SWR vielleicht das, was Sie brauchen, um Ihren Datenabruf zu verbessern. Wir haben jedoch bereits zwei großartige Möglichkeiten, HTTP-Anfragen in unserer App zu stellen: die Fetch-API und die Axios-Bibliothek.

Warum also eine neue Bibliothek zum Abrufen von Daten verwenden? Lassen Sie uns versuchen, diese berechtigte Frage im nächsten Abschnitt zu beantworten.

Vergleich mit Fetch und Axios

Wir haben bereits viele Möglichkeiten, HTTP-Anfragen in unseren React-Apps zu stellen, und zwei der beliebtesten sind die Fetch-API und die Axios-Bibliothek. Sie sind beide großartig und ermöglichen es uns, Daten einfach abzurufen oder zu senden. Sobald die Operation abgeschlossen ist, helfen sie uns jedoch nicht dabei, Daten zwischenzuspeichern oder zu paginieren, Sie müssen dies selbst tun.

Axios oder Fetch verarbeiten nur die Anfrage und geben die erwartete Antwort zurück, mehr nicht.

Und im Vergleich zu SWR ist es ein bisschen anders, weil das SWR unter der Haube die Fetch-API verwendet, um Daten vom Server anzufordern – es ist eine Art Schicht, die darauf aufgebaut ist. Es hat jedoch einige nette Funktionen wie Caching, Paginierung, Wiederherstellung der Bildlaufposition, abhängiges Abrufen usw. und um genau zu sein, ein gewisses Maß an Reaktionsfähigkeit, das Axios oder Fetch nicht haben. Dies ist ein großer Vorteil, da solche Funktionen dazu beitragen, unsere React-Apps schnell und benutzerfreundlich zu machen und die Größe unseres Codes deutlich zu reduzieren.

Denken Sie abschließend daran, dass SWR nicht dasselbe ist wie Axios oder Fetch, auch wenn es bei der Verarbeitung von HTTP-Anforderungen hilfreich ist. SWR ist fortschrittlicher als sie, es bietet einige Verbesserungen, um unsere App mit dem Backend zu synchronisieren und erhöht somit die Leistung unserer App.

Nachdem wir nun wissen, welche Unterschiede SWR im Vergleich zur Axios-Bibliothek oder der Fetch-API hat, ist es an der Zeit, sich mit der Frage zu befassen, warum ein solches Tool verwendet wird.

Empfohlene Lektüre : Nutzung von REST-APIs in Reaktion auf Fetch und Axios

Warum SWR zum Abrufen von Daten verwenden?

Wie ich bereits sagte, enthält SWR einige praktische Funktionen, die dazu beitragen, die Benutzerfreundlichkeit Ihrer App zu verbessern. Mit SWR können Sie Ihre Daten mit useSWRPages im Handumdrehen paginieren, Sie können auch Daten abrufen, die von einer anderen Anfrage abhängen, oder eine Bildlaufposition wiederherstellen, wenn Sie zu einer bestimmten Seite zurückkehren, und vieles mehr.

Normalerweise zeigen wir dem Benutzer eine Lademeldung oder einen Spinner, während wir Daten vom Server abrufen. Und mit SWR können Sie es verbessern, indem Sie dem Benutzer die zwischengespeicherten oder veralteten Daten anzeigen, während Sie neue Daten von der API abrufen. Und sobald dieser Vorgang abgeschlossen ist, werden die Daten erneut validiert, um die neue Version anzuzeigen. Und Sie müssen nichts tun, SWR speichert die Daten beim ersten Abrufen und ruft sie automatisch ab, wenn eine neue Anfrage gestellt wird.

Bisher haben wir bereits gesehen, warum die Verwendung von SWR gegenüber Axios oder Fetch besser ist, abhängig davon, was Sie bauen möchten. Aber für viele Fälle empfehle ich die Verwendung von SWR, da es großartige Funktionen bietet, die über das einfache Abrufen und Zurückgeben von Daten hinausgehen.

Trotzdem können wir jetzt mit dem Erstellen unserer React-App beginnen und die SWR-Bibliothek verwenden, um Remote-Daten abzurufen.

Beginnen wir also mit der Einrichtung eines neuen Projekts.

Einrichten

Wie ich bereits in der Einführung sagte, werden wir eine App erstellen, die Daten von der Pokemon-API abruft. Sie können auch eine andere API verwenden, wenn Sie möchten, ich bleibe vorerst dabei.

Und um eine neue App zu erstellen, müssen wir den folgenden Befehl auf dem Terminal ausführen:

 npx create-react-app react-swr

Als nächstes müssen wir die SWR-Bibliothek installieren, indem wir zuerst zu dem Ordner navigieren, der die React-App enthält.

 cd react-swr

Führen Sie auf dem Terminal den folgenden Befehl aus, um das SWR-Paket zu installieren.

 yarn add swr

Oder wenn Sie npm verwenden:

 npm install swr

Nachdem wir nun alles eingerichtet haben, strukturieren wir das Projekt wie folgt, um mit der Verwendung von SWR zu beginnen:

 src ├── components | └── Pokemon.js ├── App.js ├── App.test.js ├── index.js ├── serviceWorker.js ├── setupTests.js ├── package.json ├── README.md ├── yarn-error.log └── yarn.lock

Wie Sie sehen können, ist die Ordnerstruktur einfach. Das einzige, was zu bemerken ist, ist der components , der die Datei Pokemon.js enthält. Es wird später als Präsentationskomponente verwendet, um ein einzelnes Pokémon zu zeigen, sobald wir Daten von der API erhalten.

Toll! Damit können wir nun mit dem Abrufen von Daten aus der API mit useSWR .

Abrufen von Remote-Daten

Das SWR-Paket hat einige praktische Funktionen, wie wir oben gesehen haben. Es gibt jedoch zwei Möglichkeiten, diese Bibliothek zu konfigurieren: entweder lokal oder global.

Ein lokales Setup bedeutet, dass wir jedes Mal, wenn wir eine neue Datei erstellen, SWR erneut einrichten müssen, um Remote-Daten abrufen zu können. Und ein globales Setup ermöglicht es uns, einen Teil unserer Konfiguration in verschiedenen Dateien wiederzuverwenden, da eine fetcher einmal deklariert und überall verwendet werden kann.

Und keine Sorge, wir werden beides in diesem Artikel sehen, aber jetzt machen wir uns die Hände schmutzig und fügen der App.js -Datei etwas sinnvollen Code hinzu.

Anzeigen der Daten

 import React from 'react' import useSWR from 'swr' import { Pokemon } from './components/Pokemon' const url = 'https://pokeapi.co/api/v2/pokemon' const fetcher = (...args) => fetch(...args).then((res) => res.json()) function App() { const { data: result, error } = useSWR(url, fetcher) if (error) return <h1>Something went wrong!</h1> if (!result) return <h1>Loading...</h1> return ( <main className='App'> <h1>Pokedex</h1> <div> {result.results.map((pokemon) => ( <Pokemon key={pokemon.name} pokemon={pokemon} /> ))} </div> </main> ) } export default App

Wie Sie sehen, importieren wir useSWR aus der SWR-Bibliothek. Dies deklariert die URL der API, von der Sie Daten abrufen möchten, und eine Funktion zum Abrufen dieser Daten.

Der fetcher wird hier verwendet, um die Daten in JSON umzuwandeln. Es erhält die abgerufenen Daten als Argument und gibt etwas zurück.

Beachten Sie, dass ich hier den Rest-Operator ( (...args) ) verwende, da ich mir über den Typ und die Länge der als Parameter empfangenen Daten nicht sicher bin. Daher kopiere ich alles, bevor ich es erneut als Argument an den fetch übergebe von useSWR bereitgestellte Methode, die die Daten in JSON umwandelt und zurückgibt.

Allerdings können nun der fetcher und die url der API als Parameter an den useSWR Hook übergeben werden. Damit kann es nun die Anfrage stellen und gibt zwei Zustände zurück: die abgerufenen Daten und einen Fehlerzustand. Und data: result ist dasselbe wie data.result , wir verwenden die Objektdestrukturierung, um result aus data zu ziehen.

Mit den zurückgegebenen Werten können wir nun überprüfen, ob die Daten erfolgreich abgerufen wurden, und sie dann durchlaufen. Verwenden Sie für jeden Benutzer die Pokemon-Komponente, um sie anzuzeigen.

Jetzt haben wir die Daten und geben sie an die Pokemon-Komponente weiter. Es ist an der Zeit, Pokemon.js zu aktualisieren, um die Daten empfangen und anzeigen zu können.

Erstellen der Pokemon-Komponente

 import React from 'react' import useSWR from 'swr' const fetcher = (...args) => fetch(...args).then((res) => res.json()) export const Pokemon = ({ pokemon }) => { const { name } = pokemon const url = 'https://pokeapi.co/api/v2/pokemon/' + name const { data, error } = useSWR(url, fetcher) if (error) return <h1>Something went wrong!</h1> if (!data) return <h1>Loading...</h1> return ( <div className='Card'> <span className='Card--id'>#{data.id}</span> <img className='Card--image' src={data.sprites.front_default} alt={name} /> <h1 className='Card--name'>{name}</h1> <span className='Card--details'> {data.types.map((poke) => poke.type.name).join(', ')} </span> </div> ) }

Hier haben wir eine Komponente, die einzelne Pokemon-Daten von der API empfängt und anzeigt. Die empfangenen Daten enthalten jedoch nicht alle erforderlichen Felder, daher müssen wir eine weitere Anfrage an die API stellen, um das vollständige Pokemon-Objekt zu erhalten.

Und wie Sie sehen können, verwenden wir denselben Prozess, um die Daten abzurufen, auch wenn wir dieses Mal den Namen des Pokémon an die URL anhängen.

Übrigens, falls Sie mit Destrukturierung nicht vertraut sind, ist ({ pokemon }) dasselbe wie das Empfangen von Props und der Zugriff auf das Pokemon-Objekt mit props.pokemon . Es ist nur eine Abkürzung, um Werte aus Objekten oder Arrays herauszuziehen.

Wenn Sie damit zum Stammordner des Projekts navigieren und auf dem Terminal den folgenden Befehl ausführen:

 yarn start

Oder wenn Sie npm verwenden:

 npm start

Sie sollten sehen, dass die Daten erfolgreich von der Pokemon-API abgerufen und wie erwartet angezeigt werden.

Toll! Wir sind jetzt in der Lage, entfernte Daten mit SWR abzurufen. Dieses Setup ist jedoch lokal und kann etwas überflüssig sein, da Sie bereits sehen können, dass App.js und Pokemon.js dieselbe Abruffunktion verwenden, um dasselbe zu tun.

Aber zum Glück enthält das Paket einen praktischen Anbieter namens SWRConfig , der bei der globalen Konfiguration von SWR hilft. Es ist eine Wrapper-Komponente, die es untergeordneten Komponenten ermöglicht, die globale Konfiguration und damit die Abruffunktion zu verwenden.

Um SWR global einzurichten, müssen wir die Datei index.js aktualisieren, da dort die App-Komponente mit React DOM gerendert wird. Wenn Sie möchten, können Sie SWRConfig direkt in der App.js -Datei verwenden.

SWR global konfigurieren

 import React from 'react' import ReactDOM from 'react-dom' import { SWRConfig } from 'swr' import App from './App' import './index.css' const fetcher = (...args) => fetch(...args).then((res) => res.json()) ReactDOM.render( <React.StrictMode> <SWRConfig value={{ fetcher }}> <App /> </SWRConfig> </React.StrictMode>, document.getElementById('root') )

Wie Sie sehen können, beginnen wir mit dem Import von SWRConfig , einem Anbieter, der die höhere Komponente oder nur einen Teil Ihrer React-App umschließen muss, der SWR-Funktionen verwenden muss. Es nimmt als Requisiten einen Wert, der ein Objekt von config erwartet. Sie können mehr als eine Eigenschaft an das Konfigurationsobjekt übergeben, hier brauche ich nur die Funktion zum Abrufen von Daten.

Anstatt die fetcher in jeder Datei zu deklarieren, erstellen wir sie jetzt hier und übergeben sie als Wert an SWRConfig . Damit können wir jetzt Daten auf jeder Ebene in unserer App abrufen, ohne eine weitere Funktion zu erstellen und somit Redundanzen zu vermeiden.

Abgesehen davon ist fetcher gleich fetcher: fetcher , es ist nur syntaktischer Zucker, der von ES6 vorgeschlagen wird. Mit dieser Änderung müssen wir jetzt unsere Komponenten aktualisieren, um die globale Konfiguration zu verwenden.

Verwenden der globalen SWR-Konfiguration

 import React from 'react' import useSWR from 'swr' import { Pokemon } from './components/Pokemon' const url = 'https://pokeapi.co/api/v2/pokemon' function App() { const { data: result, error } = useSWR(url) if (error) return <h1>Something went wrong!</h1> if (!result) return <h1>Loading...</h1> return ( <main className='App'> <h1>Pokedex</h1> <div> {result.results.map((pokemon) => ( <Pokemon key={pokemon.name} pokemon={pokemon} /> ))} </div> </main> ) } export default App

Jetzt müssen wir nur noch die url an useSWR , anstatt die url und die fetcher zu übergeben. Lassen Sie uns auch die Pokemon-Komponente ein wenig optimieren.

 import React from 'react' import useSWR from 'swr' export const Pokemon = ({ pokemon }) => { const { name } = pokemon const url = 'https://pokeapi.co/api/v2/pokemon/' + name const { data, error } = useSWR(url) if (error) return <h1>Something went wrong!</h1> if (!data) return <h1>Loading...</h1> return ( <div className='Card'> <span className='Card--id'>#{data.id}</span> <img className='Card--image' src={data.sprites.front_default} alt={name} /> <h1 className='Card--name'>{name}</h1> <span className='Card--details'> {data.types.map((poke) => poke.type.name).join(', ')} </span> </div> ) }

Sie können bereits sehen, dass wir keine Abruffunktion mehr haben, dank der globalen Konfiguration, die die Funktion unter der Haube an useSWR .

Jetzt können Sie die globale Abruffunktion überall in Ihrer App verwenden. Das einzige, was der useSWR Hook benötigt, um entfernte Daten abzurufen, ist die URL.

Wir können das Setup jedoch noch weiter verbessern, indem wir einen benutzerdefinierten Hook erstellen, um zu vermeiden, dass die URL immer wieder neu angegeben wird, und stattdessen einfach den Pfad als Parameter übergeben.

Erweiterte Einrichtung durch Erstellen eines benutzerdefinierten Hooks

Dazu müssen Sie im Stammverzeichnis des Projekts eine neue Datei mit dem Namen useRequest.js (Sie können sie beliebig benennen) und diesen Codeblock unten hinzufügen.

 import useSwr from 'swr' const baseUrl = 'https://pokeapi.co/api/v2' export const useRequest = (path, name) => { if (!path) { throw new Error('Path is required') } const url = name ? baseUrl + path + '/' + name : baseUrl + path const { data, error } = useSwr(url) return { data, error } }

Hier haben wir eine Funktion, die einen Pfad und optional einen Namen empfängt und an die Basis-URL anhängt, um die vollständige URL zu erstellen. Als nächstes prüft es, ob ein Namensparameter empfangen wird oder nicht, und behandelt es entsprechend.

Dann wird diese URL als Parameter an den useSWR Hook übergeben, um die entfernten Daten abrufen und zurückgeben zu können. Und wenn kein Pfad übergeben wird, wird ein Fehler ausgegeben.

Toll! Wir müssen jetzt die Komponenten ein wenig anpassen, um unseren benutzerdefinierten Hook zu verwenden.

 import React from 'react' import { useRequest } from './useRequest' import './styles.css' import { Pokemon } from './components/Pokemon' function App() { const { data: result, error } = useRequest('/pokemon') if (error) return <h1>Something went wrong!</h1> if (!result) return <h1>Loading...</h1> return ( <main className='App'> <h1>Pokedex</h1> <div> {result.results.map((pokemon) => ( <Pokemon key={pokemon.name} pokemon={pokemon} /> ))} </div> </main> ) } export default App

Anstatt den SWR-Hook zu verwenden, verwenden wir jetzt den darauf aufgebauten benutzerdefinierten Hook und übergeben dann wie erwartet den Pfad als Argument. Damit funktioniert alles wie zuvor, aber mit einer viel saubereren und flexibleren Konfiguration.

Lassen Sie uns auch die Pokemon-Komponente aktualisieren.

 import React from 'react' import { useRequest } from '../useRequest' export const Pokemon = ({ pokemon }) => { const { name } = pokemon const { data, error } = useRequest('/pokemon', name) if (error) return <h1>Something went wrong!</h1> if (!data) return <h1>Loading...</h1> return ( <div className='Card'> <span className='Card--id'>#{data.id}</span> <img className='Card--image' src={data.sprites.front_default} alt={name} /> <h1 className='Card--name'>{name}</h1> <span className='Card--details'> {data.types.map((poke) => poke.type.name).join(', ')} </span> </div> ) }

Sie können bereits sehen, wie unser kundenspezifischer Haken die Dinge einfacher und flexibler macht. Hier müssen wir nur zusätzlich den Namen des zu holenden Pokémon an useRequest und es erledigt alles für uns.

Ich hoffe, Sie genießen diese coole Bibliothek. Wir haben jedoch noch Dinge zu entdecken, da SWR so viele Funktionen bietet, und eine davon ist useSWRPages , ein Haken zum einfachen Paginieren von Daten. Lassen Sie uns also diesen Hook im Projekt verwenden.

Paginieren Sie unsere Daten mit useSWRPages

Mit SWR können wir Daten einfach paginieren und nur einen Teil davon anfordern und bei Bedarf Daten erneut abrufen, um sie für die nächste Seite anzuzeigen.

Lassen Sie uns nun eine neue Datei im Stammverzeichnis des Projekts usePagination.js und sie als benutzerdefinierten Hook für die Paginierung verwenden.

 import React from 'react' import useSWR, { useSWRPages } from 'swr' import { Pokemon } from './components/Pokemon' export const usePagination = (path) => { const { pages, isLoadingMore, loadMore, isReachingEnd } = useSWRPages( 'pokemon-page', ({ offset, withSWR }) => { const url = offset || `https://pokeapi.co/api/v2${path}` const { data: result, error } = withSWR(useSWR(url)) if (error) return <h1>Something went wrong!</h1> if (!result) return <h1>Loading...</h1> return result.results.map((pokemon) => ( <Pokemon key={pokemon.name} pokemon={pokemon} /> )) }, (SWR) => SWR.data.next, [] ) return { pages, isLoadingMore, loadMore, isReachingEnd } }

Wie Sie sehen können, beginnen wir hier mit dem Import von useSWRPages , dem Helfer, der das einfache Paginieren von Daten ermöglicht. Es erhält 4 Argumente: den Schlüssel der Anforderungs pokemon-page , der auch zum Caching verwendet wird, eine Funktion zum Abrufen der Daten, die eine Komponente zurückgibt, wenn die Daten erfolgreich abgerufen wurden, und eine weitere Funktion, die das SWR -Objekt nimmt und Daten von der anfordert nächste Seite und eine Reihe von Abhängigkeiten.

Und sobald die Daten abgerufen wurden, gibt die Funktion useSWRPages mehrere Werte zurück, aber hier brauchen wir 4 davon: die pages , die die mit den Daten zurückgegebene Komponente sind, die Funktion isLoadingMore , die prüft, ob die Daten derzeit abgerufen werden, die Funktion loadMore , die beim Abrufen hilft mehr Daten und die Methode isReachingEnd , die feststellt, ob noch Daten abzurufen sind oder nicht.

Jetzt haben wir den benutzerdefinierten Hook, der die erforderlichen Werte zum Paginieren von Daten zurückgibt. Wir können jetzt zur App.js -Datei wechseln und sie ein wenig optimieren.

 import React from 'react' import { usePagination } from './usePagination' import './styles.css' export default function App() { const { pages, isLoadingMore, loadMore, isReachingEnd } = usePagination( '/pokemon' ) return ( <main className='App'> <h1>Pokedex</h1> <div>{pages}</div> <button onClick={loadMore} disabled={isLoadingMore || isReachingEnd} > Load more... </button> </main> ) }

Nachdem der usePagination Hook importiert wurde, können wir nun den Pfad als Parameter übergeben und die zurückgegebenen Werte zurückerhalten. Und da pages eine Komponente sind, müssen wir die Daten nicht durchlaufen oder ähnliches.

Als nächstes verwenden wir die Funktion loadMore auf der Schaltfläche, um weitere Daten abzurufen und sie zu deaktivieren, wenn der Abrufvorgang nicht abgeschlossen ist oder keine Daten abzurufen sind.

Toll! Mit dieser Änderung können wir jetzt das Stammverzeichnis des Projekts durchsuchen und den Server mit diesem Befehl starten, um eine Vorschau unserer App anzuzeigen.

 yarn start

Oder wenn Sie npm verwenden:

 npm start

Sie sollten sehen, dass die Daten erfolgreich abgerufen wurden und wenn Sie auf die Schaltfläche klicken, werden neue Daten vom SWR abgerufen.

Bisher haben wir die SWR-Bibliothek in der Praxis gesehen, und ich hoffe, Sie finden darin einen Mehrwert. Trotzdem hat es einige Features zu bieten. Lassen Sie uns im nächsten Abschnitt auf diese Funktionen eingehen.

Weitere Funktionen von SWR

Die SWR-Bibliothek hat eine Reihe praktischer Dinge, die die Art und Weise, wie wir React-Apps erstellen, vereinfachen.

Fokus Revalidierung

Es ist eine Funktion, die es ermöglicht, die Daten zu aktualisieren oder erneut zu validieren, wenn Sie eine Seite neu fokussieren oder zwischen Registerkarten wechseln. Und standardmäßig ist diese Funktionalität aktiviert, aber Sie können sie trotzdem deaktivieren, wenn sie Ihren Anforderungen nicht entspricht. Dies kann insbesondere dann nützlich sein, wenn Sie Daten mit hochgradig häufigen Aktualisierungen haben.

Im Intervall neu abrufen

Die SWR-Bibliothek ermöglicht das erneute Abrufen von Daten nach einer bestimmten Zeit. Dies kann praktisch sein, wenn sich Ihre Daten schnell ändern oder Sie eine neue Anfrage stellen müssen, um neue Informationen aus Ihrer Datenbank zu erhalten.

Lokale Mutation

Mit SWR können Sie einen temporären lokalen Status festlegen, der automatisch aktualisiert wird, wenn neue Daten abgerufen werden (Revalidierung). Diese Funktion kommt besonders ins Spiel, wenn Sie sich mit einem Offline-First-Ansatz befassen, sie hilft, Daten einfach zu aktualisieren.

Wiederherstellung der Bildlaufposition

Diese Funktion ist sehr praktisch, besonders wenn es um den Umgang mit riesigen Listen geht. Es ermöglicht Ihnen, die Bildlaufposition wiederherzustellen, nachdem Sie zur Seite zurückgekehrt sind. Und in jedem Fall erhöht es die Usability Ihrer App.

Abhängiges Holen

Mit SWR können Sie Daten abrufen, die von anderen Daten abhängen. Das bedeutet, dass es Daten A abrufen kann, und sobald diese Operation abgeschlossen ist, verwendet es sie, um Daten B abzurufen, während Wasserfälle vermieden werden. Und diese Funktion hilft, wenn Sie relationale Daten haben.

SWR trägt jedoch dazu bei, die Benutzererfahrung in jeder Hinsicht zu verbessern. Es hat mehr Funktionen als das, und in vielen Fällen ist es besser, es über die Fetch-API oder die Axios-Bibliothek zu verwenden.

Fazit

In diesem Artikel haben wir gesehen, warum SWR eine großartige Bibliothek ist. Es ermöglicht das Abrufen von Daten aus der Ferne mit React Hooks und hilft, einige erweiterte Funktionen sofort zu vereinfachen, wie z. SWR ist auch Backend-agnostisch, was bedeutet, dass es Daten von jeder Art von APIs oder Datenbanken abrufen kann. SWR verbessert definitiv die Benutzererfahrung Ihrer React-Apps, es hat eine glänzende Zukunft und Sie sollten es im Auge behalten oder besser in Ihrer nächsten React-App verwenden.

Hier können Sie sich das fertige Projekt live ansehen.

Danke fürs Lesen!

Nächste Schritte

Sie können fortfahren, die folgenden Links zu überprüfen, die Ihnen ein besseres Verständnis vermitteln, das über den Rahmen dieses Tutorials hinausgeht.

• SWR
• SWR-Dokumentation

Weiterführende Literatur zu SmashingMag:

• Stylingkomponenten in Reaktion
• Bessere Reduzierer mit Immer
• Komponenten höherer Ordnung in Reaktion
• Aufbau wiederverwendbarer Reaktionskomponenten mit Rückenwind