Écrivez un crochet personnalisé pour suivre la taille de la fenêtre et mettre à jour un composant lorsqu'il change.

Écrivez un crochet personnalisé pour suivre la taille de la fenêtre et mettre à jour un composant lorsqu'il change.

Pour créer un crochet personnalisé qui suit la taille de la fenêtre et met à jour un composant lors de sa modification, nous utiliserons les crochets useState et useEffect les crochets dans React. Voici une approche étape par étape pour mettre en œuvre ce crochet:

 <code class="javascript">import { useState, useEffect } from 'react'; function useWindowSize() { // Initialize state with undefined width/height so server-side render works const [windowSize, setWindowSize] = useState({ width: undefined, height: undefined, }); useEffect(() => { // Handler to call on window resize function handleResize() { // Set window width/height to state setWindowSize({ width: window.innerWidth, height: window.innerHeight, }); } // Add event listener window.addEventListener("resize", handleResize); // Call handler right away so state gets updated with initial window size handleResize(); // Remove event listener on cleanup return () => window.removeEventListener("resize", handleResize); }, []); // Empty array ensures that effect is only run on mount return windowSize; } export default useWindowSize;</code>

Ce crochet personnalisé, useWindowSize , utilise le crochet useState pour gérer l'état de la taille de la fenêtre et le crochet useEffect pour configurer et nettoyer l'écouteur de l'événement pour l'événement de redimensionnement de la fenêtre. Le crochet renvoie la taille de la fenêtre actuelle, qui peut être utilisée dans n'importe quel composant qui importe et utilise ce crochet.

Comment puis-je implémenter un crochet personnalisé pour surveiller les changements de taille des fenêtres en temps réel?

Pour implémenter un crochet personnalisé pour surveiller les changements de taille des fenêtres en temps réel, suivez ces étapes:

1. Importez les crochets nécessaires : commencez par importer useState et useEffect à partir de React, car ceux-ci sont essentiels pour gérer les effets de l'état et des effets secondaires.
2. Initialiser l'état : utilisez useState pour initialiser l'état avec width et height définies sur undefined . Cela permet au crochet de fonctionner correctement pendant le rendu côté serveur où window pourrait ne pas être disponible.
3. Créez un gestionnaire de redimensionnement : définissez un handleResize de fonctions qui met à jour l'état avec la window.innerWidth actuelle.innerwidth et window.innerHeight .
4. Configurer l'écouteur d'événements : à l'intérieur useEffect , ajoutez un écouteur d'événements à l'objet window pour l'événement resize . Cet auditeur appellera handleResize chaque fois que la fenêtre est redimensionnée.
5. Appel initial : handleResize d'appel immédiatement dans useEffect pour définir la taille initiale de la fenêtre.
6. Nettoyage : renvoyez une fonction de nettoyage de useEffect qui supprime l'écouteur d'événements lorsque le composant démoule ou que l'effet se termine à nouveau.
7. État de retour : Enfin, retournez l'état windowSize à partir du crochet afin qu'il puisse être utilisé dans les composants.

Cette approche garantit que le crochet met à jour la taille de la fenêtre en temps réel et nettoie les ressources de manière appropriée.

Quelles sont les meilleures pratiques pour utiliser un crochet personnalisé pour mettre à jour efficacement les composants en fonction de la taille de la fenêtre?

Lorsque vous utilisez un crochet personnalisé pour mettre à jour les composants en fonction de la taille de la fenêtre, considérez les meilleures pratiques suivantes:

1. Optimiser les performances : utilisez useMemo ou useCallback pour mémoriser des calculs ou des fonctions de rappel coûteuses qui dépendent de la taille de la fenêtre. Cela empêche les redesseurs inutiles.
2. Déboucher les événements de redimension : pour éviter des mises à jour excessives pendant la redimensionnement rapide, envisagez de déboucher le gestionnaire d'événements de redimensionnement. Des bibliothèques comme lodash.debounce peuvent être utiles à cet effet.
3. Rendu conditionnel : utilisez la taille de la fenêtre pour rendre conditionnellement différentes mises en page ou composants. Cela peut améliorer l'expérience utilisateur en adaptant l'interface utilisateur à différentes tailles d'écran.
4. Compatibilité du rendu côté serveur : assurez-vous que votre crochet fonctionne avec le rendu côté serveur en initialisant l'état avec des valeurs undefined et en vérifiant l'existence de window avant d'y accéder.
5. Nettoyage : Nettoyez toujours les écouteurs d'événements dans la fonction useEffect de nettoyage pour éviter les fuites de mémoire.
6. Réutilisabilité : concevez votre crochet pour être réutilisable sur différents composants et projets. Gardez-le concentré sur une seule responsabilité (dans ce cas, le suivi de la taille de la fenêtre).
7. Tests : Écrivez des tests pour votre crochet personnalisé pour vous assurer qu'il se comporte correctement dans diverses conditions, y compris différentes tailles de fenêtre et lors des événements du cycle de vie des composants.

Pouvez-vous fournir un exemple de la façon d'intégrer un crochet de suivi de la taille des fenêtres dans un composant React existant?

Voici un exemple de la façon d'intégrer le crochet useWindowSize dans un composant REACT existant:

 <code class="jsx">import React from 'react'; import useWindowSize from './useWindowSize'; // Assuming the hook is in a separate file function MyComponent() { const { width, height } = useWindowSize(); return ( <div> <h1 id="Current-Window-Size">Current Window Size</h1> <p>Width: {width}px</p> <p>Height: {height}px</p> {width > 768 ? ( <p>This is a wide screen layout</p> ) : ( <p>This is a narrow screen layout</p> )} </div> ); } export default MyComponent;</code>

Dans cet exemple, MyComponent utilise le crochet useWindowSize pour obtenir les dimensions de la fenêtre actuelles. Il affiche ensuite ces dimensions et les utilise pour rendre conditionnellement le contenu différent en fonction de la largeur de la fenêtre. Cela montre comment le crochet peut être facilement intégré dans un composant pour mettre à jour dynamiquement l'interface utilisateur en fonction de la taille de la fenêtre.

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!