Comment créer vos propres hooks React : un guide étape par étape-js tutoriel-php.cn

How to Build Your Own React Hooks: A Step-by-Step Guide

Les hooks React personnalisés sont un outil essentiel qui vous permet d'ajouter des fonctionnalités spéciales et uniques à vos applications React.

Dans de nombreux cas, si vous souhaitez ajouter une certaine fonctionnalité à votre application, vous pouvez simplement installer une bibliothèque tierce conçue pour résoudre votre problème. Mais si une telle bibliothèque ou un tel hook n'existe pas, que faites-vous ?

En tant que développeur React, il est important d'apprendre le processus de création de hooks personnalisés pour résoudre des problèmes ou ajouter des fonctionnalités manquantes dans vos propres projets React.

Dans ce guide étape par étape, je vais vous montrer comment créer vos propres hooks React personnalisés en décomposant trois hooks que j'ai créés pour mes propres applications, ainsi que les problèmes pour lesquels ils ont été créés.

useCopyToClipboard Hook Sur une ancienne version de mon site Web, reedbarger.com, j'autorisais les utilisateurs à copier le code de mes articles à l'aide d'un package appelé React-copy-to-clipboard.

Un utilisateur survole simplement l'extrait, clique sur le bouton du presse-papiers et le code est ajouté au presse-papiers de son ordinateur pour lui permettre de coller et d'utiliser le code où il le souhaite.

copie-gif.gif
Cependant, au lieu d'utiliser une bibliothèque tierce, je souhaitais recréer cette fonctionnalité avec mon propre hook React personnalisé. Comme pour chaque hook de réaction personnalisé que je crée, je lui mets un dossier dédié, généralement appelé utils ou lib, spécifiquement pour les fonctions que je peux réutiliser dans mon application.

Nous mettrons ce hook dans un fichier appelé useCopyToClipboard.js et je créerai une fonction du même nom.

Il existe différentes manières de copier du texte dans le presse-papiers de l'utilisateur. Je préfère utiliser pour cela une bibliothèque, qui rend le processus plus fiable, appelée copie dans le presse-papier.

Il exporte une fonction, que nous appellerons copie.

// utils/useCopyToClipboard.js
importer React depuis "react" ;
importer une copie depuis "copier dans le presse-papiers" ;

exporter la fonction par défaut useCopyToClipboard() {}
Ensuite, nous allons créer une fonction qui sera utilisée pour copier le texte que vous souhaitez ajouter au presse-papiers de l'utilisateur. Nous appellerons cette fonction handleCopy.

Comment créer la fonction handleCopy
Au sein de la fonction, nous devons d'abord nous assurer qu'elle n'accepte que les données de type chaîne ou nombre. Nous allons configurer une instruction if-else, qui garantira que le type est soit une chaîne, soit un nombre. Sinon, nous enregistrerons une erreur dans la console indiquant à l'utilisateur que vous ne pouvez pas copier d'autres types.

importer React depuis "react" ;
importer une copie depuis "copier dans le presse-papiers" ;

exporter la fonction par défaut useCopyToClipboard() {
const [isCopied, setCopied] = React.useState(false);

fonction handleCopie(texte) {
if (typeof text === "string" || typeof text == "number") {
// copie
} autre {
// ne copie pas
console.erreur (
Impossible de copier le type de ${typeof text} dans le presse-papiers, il doit s'agir d'une chaîne ou d'un nombre.
);
}
}
}
Ensuite, nous prenons le texte et le convertissons en chaîne, que nous transmettrons ensuite à la fonction de copie. À partir de là, nous renvoyons la fonction handleCopy du hook là où nous le souhaitons dans notre application.

Généralement, la fonction handleCopy sera connectée à un clic sur un bouton.

importer React depuis "react" ;
importer une copie depuis "copier dans le presse-papiers" ;

exporter la fonction par défaut useCopyToClipboard() {
function handleCopie (texte) {
if (typeof text === "string" || typeof text == "number") {
copier(text.toString());
} autre {
console.erreur (
Impossible de copier le type de ${typeof text} dans le presse-papiers, il doit s'agir d'une chaîne ou d'un nombre.
);
}
}

poignée de retourCopie ;
}
De plus, nous voulons un état indiquant si le texte a été copié ou non. Pour créer cela, nous appellerons useState en haut de notre hook et créerons une nouvelle variable d'état isCopied, où le setter sera appelé setCopy.

Au départ, cette valeur sera fausse. Si le texte est copié avec succès, nous définirons la copie sur true. Sinon, nous le définirons sur false.

Enfin, nous retournerons isCopied à partir du hook dans un tableau avec handleCopy.

importer React depuis "react" ;
importer une copie depuis "copier dans le presse-papiers" ;

exporter la fonction par défaut useCopyToClipboard(resetInterval = null) {
const [isCopied, setCopied] = React.useState(false);

fonction handleCopie(texte) {
if (typeof text === "string" || typeof text == "number") {
copier(text.toString());
setCopié(true);
} autre {
setCopié(false);
console.erreur (
Impossible de copier le type de ${typeof text} dans le presse-papiers, il doit s'agir d'une chaîne ou d'un nombre.
);
}
}

return [isCopied, handleCopy];
}
Comment utiliser useCopyToClipboard
Nous pouvons désormais utiliser useCopyToClipboard dans n'importe quel composant que nous aimons.

Dans mon cas, je vais l'utiliser avec un composant de bouton de copie qui a reçu le code de notre extrait de code.

Pour que cela fonctionne, tout ce que nous devons faire est d'ajouter un clic sur le bouton. Et en retour d'une fonction appelée handle copy avec le code qui lui est demandé sous forme de texte. Et une fois copié, c'est vrai. Nous pouvons afficher une icône différente indiquant qu'une copie a réussi.

importer React depuis "react" ;
importer ClipboardIcon depuis "../svg/ClipboardIcon" ;
importer SuccessIcon depuis "../svg/SuccessIcon" ;
importer useCopyToClipboard depuis "../utils/useCopyToClipboard" ;

fonction CopyButton({ code }) {
const [isCopied, handleCopy] = useCopyToClipboard();

retour (
handleCopie(code)}>
{estCopié ? : }

);
}
Comment ajouter un intervalle de réinitialisation
Il y a une amélioration que nous pouvons apporter à notre code. Comme nous l'avons actuellement écrit dans notre hook, isCopied sera toujours vrai, ce qui signifie que nous verrons toujours l'icône de réussite :

succès-gif.gif
Si nous voulons réinitialiser notre état après quelques secondes, vous pouvez passer un intervalle de temps pour utiliser CopyToClipboard. Ajoutons cette fonctionnalité.

De retour dans notre hook, nous pouvons créer un paramètre appelé resetInterval, dont la valeur par défaut est null, ce qui garantira que l'état ne sera pas réinitialisé si aucun argument ne lui est passé.

Nous ajouterons ensuite useEffect pour dire que si le texte est copié et que nous avons un intervalle de réinitialisation, nous remettrons isCopied sur false après cet intervalle en utilisant un setTimeout.

De plus, nous devons effacer ce délai d'attente si notre composant pour lequel le hook est utilisé lors du démontage (ce qui signifie que notre état n'est plus là pour se mettre à jour).

importer React depuis "react" ;
importer une copie depuis "copier dans le presse-papiers" ;

exporter la fonction par défaut useCopyToClipboard(resetInterval = null) {
const [isCopied, setCopied] = React.useState(false);

React.useEffect(() => {
laisser expirer ;
if (isCopied && resetInterval) {
timeout = setTimeout(() => setCopied(false), resetInterval);
}
return () => {
clearTimeout(timeout);
};
}, [isCopied, resetInterval]);

return [isCopied, handleCopy];
}
Enfin, la dernière amélioration que nous pouvons apporter est d'envelopper handleCopy dans le hook useCallback afin de garantir qu'il ne sera pas recréé à chaque fois qu'il y aura un nouveau rendu.

Résultat final
Et avec cela, nous avons notre dernier hook qui permet de réinitialiser l’état après un intervalle de temps donné. Si nous lui en transmettons un, nous devrions voir un résultat comme celui que nous avons ci-dessous.

fonction CopyButton({ code }) {
// isCopied est réinitialisé après un délai d'attente de 3 secondes
const [isCopied, handleCopy] = useCopyToClipboard(3000);

retour (
handleCopie(code)}>
{estCopié ? : }

);
}
résultat-final.gif

utilisez le crochet PageBottom Dans les applications React, il est parfois important de savoir quand votre utilisateur a fait défiler vers le bas d'une page.

Dans les applications où vous avez un défilement infini, comme Instagram par exemple, une fois que l'utilisateur atteint le bas de la page, vous devez récupérer plus de publications.

Défilement infini dans Instagram
Voyons comment créer nous-mêmes un hook usePageBottom pour des cas d'utilisation similaires, comme la création d'un défilement infini.

Nous allons commencer par créer un fichier séparé, usePageBottom.js, dans notre dossier utils et nous ajouterons une fonction (hook) du même nom :

// utils/usePageBottom.js
importer React depuis "react" ;

exporter la fonction par défaut usePageBottom() {}

Ensuite, nous devrons calculer le moment où notre utilisateur atteint le bas de la page. Nous pouvons le déterminer avec les informations de la fenêtre. Pour y accéder, nous allons devoir nous assurer que notre composant dans lequel le hook est appelé est monté, nous utiliserons donc le hook useEffect avec un tableau de dépendances vide.

// utils/usePageBottom.js
importer React depuis "react" ;

exporter la fonction par défaut usePageBottom() {
React.useEffect(() => {}, []);
}

L'utilisateur aura fait défiler vers le bas de la page lorsque la valeur innerHeight de la fenêtre plus la valeur scrollTop du document est égale à offsetHeight. Si ces deux valeurs sont égales, le résultat sera vrai et l'utilisateur aura fait défiler la page jusqu'en bas :

// utils/usePageBottom.js
importer React depuis "react" ;

exporter la fonction par défaut usePageBottom() {
React.useEffect(() => {
window.innerHeight + document.documentElement.scrollTop ===
document.documentElement.offsetHeight;
}, []);
}

Nous stockerons le résultat de cette expression dans une variable, isBottom et nous mettrons à jour une variable d'état appelée bottom, que nous renverrons finalement depuis notre hook.

// utils/usePageBottom.js
importer React depuis "react" ;

exporter la fonction par défaut usePageBottom() {
const [bas, setBottom] = React.useState(false);

React.useEffect(() => {
const estBottom =
window.innerHeight + document.documentElement.scrollTop ===
document.documentElement.offsetHeight;
setBottom(isButton);
}, []);

retour en bas ;
}

Notre code tel quel ne fonctionnera pas. Pourquoi pas ?

Le problème réside dans le fait que nous devons calculer isBottom chaque fois que l'utilisateur fait défiler. En conséquence, nous devons écouter un événement de défilement avec window.addEventListener. Nous pouvons réévaluer cette expression en créant une fonction locale à appeler chaque fois que l'utilisateur fait défiler, appelée handleScroll.

// utils/usePageBottom.js
importer React depuis "react" ;

exporter la fonction par défaut usePageBottom() {
const [bas, setBottom] = React.useState(false);

React.useEffect(() => {
fonction handleScroll() {
const estBottom =
window.innerHeight + document.documentElement.scrollTop
=== document.documentElement.offsetHeight;
setBottom(isButton);
}
window.addEventListener("scroll", handleScroll);
}, []);

retour en bas ;
}

Enfin, puisque nous avons un écouteur d'événement qui met à jour l'état, nous devons gérer l'événement selon lequel notre utilisateur quitte la page et notre composant est supprimé. Nous devons supprimer l'écouteur d'événements de défilement que nous avons ajouté, afin de ne pas tenter de mettre à jour une variable d'état qui n'existe plus.

Nous pouvons le faire en renvoyant une fonction de useEffect avec window.removeEventListener, où nous transmettons une référence à la même fonction handleScroll. Et nous avons terminé.

// utils/usePageBottom.js
importer React depuis "react" ;

exporter la fonction par défaut usePageBottom() {
const [bas, setBottom] = React.useState(false);

retour en bas ;
}

Maintenant, nous pouvons simplement appeler ce code dans n'importe quelle fonction où nous voulons savoir si nous avons atteint le bas de la page ou non.

Dans mon site Gatsby, j'ai un en-tête et, à mesure que je diminue la taille de la page, je souhaite afficher moins de liens.

redimensionner la fenêtre pour afficher l'en-tête
Pour ce faire, nous pourrions utiliser une requête multimédia (CSS), ou nous pourrions utiliser un hook React personnalisé pour nous donner la taille actuelle de la page et masquer ou afficher les liens dans notre JSX.

Auparavant, j'utilisais un hook d'une bibliothèque appelée React-use. Au lieu d'apporter une bibliothèque tierce entière, j'ai décidé de créer mon propre crochet qui fournirait les dimensions de la fenêtre, à la fois en largeur et en hauteur. J'ai appelé ce hook useWindowSize.

Comment créer le crochet
Tout d’abord, nous allons créer un nouveau fichier .js dans notre dossier utilitaires (utils), du même nom que le hook useWindowSize. J'importerai React (pour utiliser les hooks) tout en exportant le hook personnalisé.

// utils/useWindowSize.js

importer React depuis "react" ;

exporter la fonction par défaut useWindowSize() {}

Maintenant, puisque je l'utilise dans un site Gatsby, qui est rendu par le serveur, je dois obtenir la taille de la fenêtre. Mais nous n’y aurons peut-être pas accès car nous sommes sur le serveur.

Pour vérifier et s'assurer que nous ne sommes pas sur le serveur, nous pouvons voir si le type de fenêtre n'est pas égal à la chaîne undéfini.

Auquel cas nous pouvons revenir à une largeur et une hauteur par défaut pour un navigateur, disons 1200 et 800 dans un objet :

// utils/useWindowSize.js

importer React depuis "react" ;

exporter la fonction par défaut useWindowSize() {
if (typeof window !== "indéfini") {
return { largeur : 1200, hauteur : 800 };
}
}

Comment obtenir la largeur et la hauteur de la fenêtre
Et en supposant que nous sommes sur le client et que nous pouvons obtenir la fenêtre, nous pouvons utiliser le hook useEffect pour effectuer un effet secondaire en interagissant avec la fenêtre. Nous inclurons un tableau de dépendances vide pour nous assurer que la fonction d'effet n'est appelée qu'une fois le composant (dans lequel ce hook est appelé) monté.

Pour connaître la largeur et la hauteur de la fenêtre, nous pouvons ajouter un écouteur d'événement et écouter l'événement de redimensionnement. Et chaque fois que la taille du navigateur change, nous pouvons mettre à jour un élément d'état (créé avec useState), que nous appellerons windowSize, et le paramètre pour le mettre à jour sera setWindowSize.

// utils/useWindowSize.js

importer React depuis "react" ;

exporter la fonction par défaut useWindowSize() {
if (typeof window !== "indéfini") {
return {largeur : 1200, hauteur : 800 };
}

const [windowSize, setWindowSize] = React.useState();

React.useEffect(() => {
window.addEventListener("resize", () => {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
});
}, []);
}

Lorsque la fenêtre est redimensionnée, le rappel sera appelé et l'état windowSize sera mis à jour avec les dimensions actuelles de la fenêtre. Pour obtenir cela, nous définissons la largeur sur window.innerWidth et la hauteur sur window.innerHeight.

Comment ajouter le support SSR
Cependant, le code tel que nous l’avons ici ne fonctionnera pas. En effet, une règle clé des hooks est qu’ils ne peuvent pas être appelés de manière conditionnelle. Par conséquent, nous ne pouvons pas avoir de conditionnelle au-dessus de notre hook useState ou useEffect avant qu’ils ne soient appelés.

Donc, pour résoudre ce problème, nous définirons la valeur initiale de useState de manière conditionnelle. Nous allons créer une variable appelée isSSR, qui effectuera la même vérification pour voir si la fenêtre n'est pas égale à la chaîne undefined.

Et nous utiliserons un ternaire pour définir la largeur et la hauteur en vérifiant d'abord si nous sommes sur le serveur. Si c’est le cas, nous utiliserons la valeur par défaut, et sinon, nous utiliserons window.innerWidth et window.innerHeight.

// utils/useWindowSize.js

importer React depuis "react" ;

exporter la fonction par défaut useWindowSize() {
// if (typeof window !== "undefined") {
// return { largeur : 1200, hauteur : 800 };
// }
const isSSR = typeof window !== "undefined";
const [windowSize, setWindowSize] = React.useState({
largeur : estSSR ? 1200 : window.innerWidth,
hauteur : estSSR ? 800 : window.innerHeight,
});

React.useEffect(() => {
window.addEventListener("resize", () => {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
});
}, []);
}

Ensuite, enfin, nous devons penser au moment où nos composants seront démontés. Que devons-nous faire ? Nous devons supprimer notre écouteur de redimensionnement.

Comment supprimer l'écouteur d'événement de redimensionnement
Vous pouvez le faire en renvoyant une fonction de useEffectand. Nous supprimerons l'écouteur avec window.removeEventListener.

// utils/useWindowSize.js

importer React depuis "react" ;

React.useEffect(() => {
window.addEventListener("resize", () => {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
});

return () => { window.removeEventListener("resize", () => { setWindowSize({ width: window.innerWidth, height: window.innerHeight }); }); };

Copier après la connexion

}, []);
}

Mais nous avons besoin d'une référence à la même fonction, pas à deux fonctions différentes comme nous l'avons ici. Pour ce faire, nous allons créer une fonction de rappel partagée pour les deux écouteurs appelée changeWindowSize.

Et enfin, à la fin du hook, nous renverrons notre état windowSize. Et c'est tout.

// utils/useWindowSize.js

importer React depuis "react" ;

exporter la fonction par défaut useWindowSize() {
const isSSR = typeof window !== "undefined";
const [windowSize, setWindowSize] = React.useState({
largeur : estSSR ? 1200 : window.innerWidth,
hauteur : estSSR ? 800 : window.innerHeight,
});

fonction changeWindowSize() {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
}

React.useEffect(() => {
window.addEventListener("resize", changeWindowSize);

return () => { window.removeEventListener("resize", changeWindowSize); };

Copier après la connexion

}, []);

fenêtre de retourTaille ;
}

Résultat final
Pour utiliser le hook, il suffit de l'importer là où nous en avons besoin, de l'appeler et d'utiliser la largeur partout où nous voulons masquer ou afficher certains éléments.

Dans mon cas, c'est à la barre des 500 px. Là, je souhaite masquer tous les autres liens et afficher uniquement le bouton Rejoindre maintenant, comme vous le voyez dans l'exemple ci-dessus :

//composants/StickyHeader.js

Reagieren aus „reagieren“ importieren;
importiere useWindowSize aus „../utils/useWindowSize“;

Funktion StickyHeader() {
const { width } = useWindowSize();

zurück (

{/* nur sichtbar, wenn das Fenster größer als 500 Pixel ist /}
{Breite > 500 && (
<>

Erfahrungsberichte

Preis

Frage?

)}
{/sichtbar bei jeder Fenstergröße */}

Jetzt anmelden

);
}

Dieser Hook funktioniert mit jeder vom Server gerenderten React-App, wie z. B. Gatsby und Next.js.

useDeviceDetect Hook Ich bin gerade dabei, eine neue Zielseite für einen meiner Kurse zu erstellen, und dabei ist auf Mobilgeräten ein sehr seltsamer Fehler aufgetreten. Auf Desktop-Computern sahen die Stile großartig aus.

Aber als ich auf dem Handy nachsah, war alles fehl am Platz und kaputt.

App-Fehler reagieren
Ich habe das Problem auf eine Bibliothek namens „react-device-detect“ zurückgeführt, die ich verwendet habe, um zu erkennen, ob Benutzer ein mobiles Gerät hatten oder nicht. Wenn ja, würde ich den Header entfernen.

// templates/course.js
import React von „react“;
import { isMobile } from „react-device-detect“;

Funktionskurs() {
zurück (
<>

{!isMobile && }
{/* weitere Komponenten... */}

);
}

Das Problem bestand darin, dass diese Bibliothek keine Unterstützung für serverseitiges Rendering bietet, was Gatsby standardmäßig verwendet. Deshalb musste ich meine eigene Lösung erstellen, um zu überprüfen, wann ein Benutzer ein mobiles Gerät nutzte. Und dafür habe ich beschlossen, einen benutzerdefinierten Hook mit dem Namen useDeviceDetect.

zu erstellen

Wie ich den Hook erstellt habe
Ich habe für diesen Hook eine separate Datei mit demselben Namen in meinem Utils-Ordner erstellt, useDeviceDetect.js. Da es sich bei Hooks lediglich um gemeinsam nutzbare JavaScript-Funktionen handelt, die React-Hooks nutzen, habe ich eine Funktion namens „useDeviceDetect“ erstellt und React.

importiert

// utils/useDeviceDetect.js
import React von „react“;

Standardfunktion useDeviceDetect() {}

exportieren

So erhalten Sie den Benutzeragenten von Windows
Die Art und Weise, wie wir sicherstellen können, ob wir Informationen über das Gerät des Benutzers erhalten können, erfolgt über die Eigenschaft „userAgent“ (befindet sich in der Eigenschaft „navigator“ von window).

Und da die Interaktion mit der Fenster-API als API/externe Ressource als Nebeneffekt eingestuft würde, müssen wir Zugriff auf den Benutzeragenten innerhalb des useEffect-Hooks erhalten.

// utils/useDeviceDetect.js
import React von „react“;

Standardfunktion useDeviceDetect() exportieren {
React.useEffect(() => {
console.log(Gerät des Benutzers ist: ${window.navigator.userAgent});
// kann auch als „navigator.userAgent“ geschrieben werden
}, []);
}

Sobald die Komponente gemountet ist, können wir mithilfe des Navigatortyps feststellen, ob wir uns auf dem Client oder Server befinden. Wenn wir uns auf dem Server befinden, haben wir keinen Zugriff auf das Fenster. „typeof navigator“ entspricht der Zeichenfolge „undefiniert“, da sie nicht vorhanden ist. Andernfalls können wir, wenn wir uns auf dem Client befinden, unsere User-Agent-Eigenschaft abrufen.

Wir können dies alles mit einem Ternär ausdrücken, um die UserAgent-Daten zu erhalten:

// utils/useDeviceDetect.js
import React von „react“;

Standardfunktion useDeviceDetect() exportieren {
React.useEffect(() => {
const userAgent =
Art des Navigators === "undefiniert" ? "" : navigator.userAgent;
}, []);
}

So überprüfen Sie, ob userAgent ein mobiles Gerät ist
userAgent ist ein Zeichenfolgenwert, der auf einen der folgenden Gerätenamen gesetzt wird, wenn sie ein mobiles Gerät verwenden:

Android, BlackBerry, iPhone, iPad, iPod, Opera Mini, IEMobile oder WPDesktop.

Alles, was wir tun müssen, ist, die Zeichenfolge, die wir erhalten, zu nehmen und die Methode .match() mit einem regulären Ausdruck zu verwenden, um zu sehen, ob es sich um eine dieser Zeichenfolgen handelt. Wir speichern es in einer lokalen Variablen namens mobile.

Wir speichern das Ergebnis im Zustand mit dem useState-Hook, dem wir den Anfangswert false zuweisen. Dafür erstellen wir eine entsprechende Zustandsvariable isMobile und der Setter wird setMobile.

sein

// utils/useDeviceDetect.js
import React von „react“;

Standardfunktion useDeviceDetect() exportieren {
const [isMobile, setMobile] = React.useState(false);

React.useEffect(() => {
const userAgent =
typeof window.navigator === "undefiniert" ? "" : navigator.userAgent;
const mobile = Boolean(
userAgent.match(
/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
)
);
setMobile(mobil);
}, []);
}

Sobald wir also den mobilen Wert erhalten haben, werden wir ihn in den Status setzen. Dann geben wir schließlich ein Objekt vom Hook zurück, damit wir in Zukunft weitere Werte hinzufügen können, wenn wir diesem Hook mehr Funktionalität hinzufügen möchten.

Innerhalb des Objekts fügen wir isMobile als Eigenschaft und Wert hinzu:

// utils/useDeviceDetect.js
import React von „react“;

Standardfunktion useDeviceDetect() exportieren {
const [isMobile, setMobile] = React.useState(false);

return { isMobile };
}

Endergebnis
Zurück auf der Zielseite können wir den Hook ausführen und diese Eigenschaft einfach vom destrukturierten Objekt abrufen und dort verwenden, wo wir sie benötigen.

// templates/course.js
import React von „react“;
importiere useDeviceDetect aus „../utils/useDeviceDetect“;

Funktionskurs() {
const { isMobile } = useDeviceDetect();

zurück (
<>

{!isMobile && }
{/* weitere Komponenten... */}

);
}

Fazit
Wie ich versucht habe, anhand jedes dieser Beispiele zu veranschaulichen, können benutzerdefinierte React-Hooks uns die Werkzeuge an die Hand geben, um unsere eigenen Probleme zu beheben, wenn Bibliotheken von Drittanbietern nicht ausreichen.

Ich hoffe, dass Ihnen dieser Leitfaden eine bessere Vorstellung davon gegeben hat, wann und wie Sie Ihre eigenen React-Hooks erstellen. Fühlen Sie sich frei, jeden dieser Hooks und den oben genannten Code in Ihren eigenen Projekten und als Inspiration für Ihre eigenen benutzerdefinierten React-Hooks zu verwenden.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!