Convertir la logique de navigation JQuery en réaction: implémenter un menu réactif et un effet d'adsorption de défilement

Cet article fournit des conseils détaillés sur la façon de migrer la logique d'interaction traditionnelle de la barre de navigation jQuery (y compris les effets d'adsorption du menu de hamburger et de défilement) au cadre de réact. En tirant parti de USESTATE et UTILISATEUR de React, nous montrerons comment gérer efficacement les opérations d'état et de DOM des composants, réalisant ainsi les fonctions de navigation réactives et optimisées, en évitant le fonctionnement direct de DOM et en améliorant la maintenabilité du code.

Dans le développement Web moderne, la migration des bibliothèques JavaScript impératives telles que JQuery aux cadres déclaratifs tels que React est une exigence commune. Cela améliore non seulement les performances et la maintenabilité de l'application, mais aussi de mieux s'adapte au paradigme du développement composentisé. Ce didacticiel prendra une fonction de barre de navigation commune comme un exemple pour expliquer en détail comment convertir la logique de code dans jQuery pour gérer la commutation du menu Hamburger et le défilement des effets d'adsorption en implémentation des composants React.

1. React Implémentation de la commutation du menu Hamburger

Le code jQuery d'origine écoute l'événement de clic de .navtrigger, puis utilise toggleclass pour changer les noms de classe de .navTrigger et #MainListDiv pour atteindre le but d'afficher / masquer les menus et de modifier les styles d'icônes. Dans React, nous devons réaliser cet effet en gérant l'état interne de la composante.

1. JQUERY ORIGINAL LOGIC Review

 $ ('. NavTrigger'). Cliquez sur (fonction () {
    $ (this) .toggleclass ('active');
    $ ("# mainlistDiv"). toggleClass ("show_list");
    $ ("# mainlistDiv"). fadein (); // Le fadein ici est généralement mis en œuvre via CSS Animation});

2. Implémentation de la gestion de l'État React

Dans React, nous utilisons le crochet UseState pour déclarer une variable d'état qui contrôle l'état ON / OFF du menu. Lorsque l'utilisateur clique sur l'icône du menu Hamburger, nous mettons à jour cette variable d'état et ajoutons dynamiquement ou supprimons la classe CSS en fonction de la valeur de la variable d'état.

 Importer React, {UseState} de 'react';
import './navbar.css'; // Assurez-vous que votre fichier CSS est importé const Navbar = () => {
  // Définissez une variable d'état pour contrôler si le menu est élargi const [isMenuopen, setiseMmenuopen] = USESTATE (false);

  // Définissez la fonction de gestion des événements de clic const togglemenu = () => {
    SETISMENUOPEN (! ISMENUOPEN); // bascule l'état élargi du menu};

  Retour (
    <div classname="header">
      <nav classname="nav"> {/ * La classe Affix sera traitée dans la section suivante * /}
        <div classname="conteneur">
          <div classname="logo">
            <a href="#"> Votre logo </a>
          </div>
          {/ * Ajouter dynamiquement la classe 'show_list' * /} selon le statut d'Ismenuopen
          <div id="mainlistDiv" classname="{`main_list">
            <ul classname="NavLinks">
              <li> <a href="#"> À propos de </a> </li>
              <li> <a href="#"> Portfolio </a> </li>
              <li> <a href="#"> Services </a> </li>
              <li> <a href="#"> Contact </a> </li>
            </ul>
          </div>
          {/ * Ajouter dynamiquement la classe «active» * /} selon le statut d'Isménuopen
          <span classname="{`navatrigger" onclick="{toggleMenu}">
            <i> </i>
            <i> </i>
            <i> </i>
          </span>
        </div>
       nav>
    </nav>
</div>
  ));
};

Exporter par défaut Navbar;

Points clés:

• USESTATE (FALSE) : Initialise l'état IsménuOpen à FAUX, ce qui signifie que le menu est fermé par défaut.
• Fonction ToggleMenu : Chaque fois que vous cliquez sur NavTrigger, il inversera l'état d'Isménuopen.
• Nom de la classe conditionnelle : Dans JSX, nous utilisons des chaînes de modèle et des opérateurs ternaires pour ajouter ou supprimer dynamiquement les classes CSS pour les éléments en fonction de l'état d'Ismenuopen. Par exemple, className = {NavTrigger $ {IsMenuopen? "Active": ""}} ajoutera une classe active lorsque IsMenuopen est vrai.
• Effet Fadein : Fadein () de JQuery est généralement réalisé en changeant les propriétés d'opacité et de transition de CSS combinées avec des propriétés d'affichage ou de visibilité. Lorsque la classe Show_List est ajoutée, le CSS doit définir l'animation de transition correspondante.

2. Gérer les événements de défilement: réaliser l'effet d'adsorption de la barre de navigation

JQuery juge la position de défilement en écoutant l'événement de défilement de la fenêtre et ajoute ou supprime la classe APPIX selon les conditions. Dans React, nous utilisons un crochet UtiliseEffect pour faire face à de tels effets secondaires, comme l'ajout et la suppression des auditeurs d'événements.

1. JQUERY ORIGINAL LOGIC Review

 $ (fenêtre) .scroll (function () {
    if ($ (document) .scrolltop ()> 50) {
        $ ('. nav'). addClass ('affix');
    } autre {
        $ ('. Nav'). RemoveClass ('affix');
    }
});

2. Implémentation de réaction à usage

Afin d'ajouter un écouteur d'événements de défilement lorsque le composant est monté et le retirer lorsque le composant est désinstallé, nous devons utiliser le crochet USEEFECT.

 Importer React, {UseState, useEffecte} depuis 'react';
import './navbar.css';

const navbar = () => {
  const [ismenuopen, setimismenuopen] = useState (false);
  // Définissez une variable d'état pour contrôler si la barre de navigation est adsorbée const [isAffixed, setisAffixed] = USESTate (false);

  const togglemenu = () => {
    SETISMENUOPEN (! ISMENUOPEN);
  };

  // Utiliser useEFFECT pour gérer l'écouteur des événements de défilement Utiliser Effecte () => {
    const handlescroll = () => {
      // déterminer si la position de défilement dépasse 50px
      if (window.scrolly> 50) {
        setIsAffixed (true); // défini sur l'état d'adsorption} else {
        setIsAffixed (false); // supprimer l'état d'adsorption}
    };

    // Ajouter un écouteur d'événements Scroll lorsque le composant est monté Window.AdDeventListener ('Scroll', handlescroll);

    // renvoie une fonction de nettoyage pour supprimer l'écouteur d'événements lorsque le déchargement des composants return () => {
      Window.RemoveEventListener («Scroll», handlescroll);
    };
  }, []); // Les tableaux vides sont utilisés comme dépendances, indiquant que le retour n'est exécuté que lorsque les montures de composants et la désinstallation (
    <div classname="header">
      {/ * Ajouter dynamiquement la classe 'affix' * /} selon le statut ISAffixed
      <nav classname="{`nav">
        <div classname="conteneur">
          <div classname="logo">
            <a href="#"> Votre logo </a>
          </div>
          <div id="mainlistDiv" classname="{`main_list">
            <ul classname="NavLinks">
              <li> <a href="#"> À propos de </a> </li>
              <li> <a href="#"> Portfolio </a> </li>
              <li> <a href="#"> Services </a> </li>
              <li> <a href="#"> Contact </a> </li>
            </ul>
          </div>
          <span classname="{`navatrigger" onclick="{toggleMenu}">
            <i> </i>
            <i> </i>
            <i> </i>
          </span>
        </div>
       nav>
    </nav>
</div>
  ));
};

Exporter par défaut Navbar;

Points clés:

• Utilisation d'effet : utilisé pour gérer les effets secondaires des composants. Ici, l'effet secondaire est d'ajouter et de supprimer les écouteurs mondiaux d'événements de défilement.
• Array de dépendance [] : Lorsque le deuxième paramètre d'utilisation Effet est un tableau vide, la fonction de rappel dans UseEffecte ne sera exécutée qu'une fois que lorsque le composant sera monté et la fonction de nettoyage qu'il renvoie sera exécutée une fois que lorsque le composant sera déchargé. Cela garantit que les auditeurs d'événements sont correctement ajoutés et supprimés, en évitant les fuites de mémoire.
• Window.Scrolly : Utilisé pour obtenir la position de défilement vertical de la page actuelle. Document.DocumentElement.ScrollTop peut également atteindre le même objectif, en fonction de la compatibilité du navigateur, mais Window.Scrolly est plus moderne.
• ISAffixed Status : Contrôle si l'élément NAV a une classe APPIX.

3. Précautions et optimisation des performances

1. CSS est le noyau : React n'est responsable que de l'ajout / supprimer dynamiquement les noms de classe CSS. Tous les effets visuels (tels que la transformation en forme de X de l'icône du menu Hamburger, l'animation d'extension du menu, les modifications de couleur d'arrière-plan de la barre de navigation, etc.) doivent être définies dans le fichier CSS. Assurez-vous que votre fichier CSS est cohérent avec les styles de Codepen et gère correctement les styles de noms de classe tels que Active, Show_list et Affix.

2. Évitez les opérations DOM directes : bien que React fournit UseReF pour accéder directement aux éléments DOM, il est généralement recommandé de gérer l'état des composants et de laisser réagir à mettre à jour le DOM de manière déclarative. Les méthodes de ce didacticiel suivent ce principe en contrôlant le nom de classe via l'état plutôt que de manipuler directement la liste de classe.

3. Optimisation des performances des événements de défilement : les événements de défilement peuvent être déclenchés plusieurs fois dans un court laps de temps, et des mises à jour fréquentes de l'état peuvent entraîner des problèmes de performance. Pour les événements déclenchés par une fréquence élevée (comme le défilement, le redimensionnement), il est recommandé d'utiliser des techniques de limitation ou de débunchage pour limiter la fréquence d'exécution des fonctions de traitement des événements.

   • Ligneuse : exécutez la fonction uniquement dans un certain délai.
   • Debuncing : la fonction est exécutée après que l'événement cesse de déclencher pendant une période de temps.

   Voici un exemple de mise en œuvre simple que vous pouvez intégrer dans la fonction HandlesCroll:

    Importer React, {UseState, useEffecte, useref, useCallback} de 'react';
   import './navbar.css';
   
   const navbar = () => {
     const [ismenuopen, setimismenuopen] = useState (false);
     const [isAffixed, setisAffixed] = useState (false);
   
     const togglemenu = () => {
       SETISMENUOPEN (! ISMENUOPEN);
     };
   
     // Fonction de limitation constant throttle = (func, delay) => {
       Soit Inthrottle;
       return function () {
         const args = arguments;
         const Context = this;
         if (! inthrotle) ​​{
           func.Apply (contexte, args);
           inthrottle = true;
           setTimeout (() => (inthrottle = false), retard);
         }
       };
     };
   
     // Utilisez UseCallback pour éviter les poignées Croll recréant Const HandlesCroll à chaque fois qu'il rend const handlescroll = usecallback (
       Throttle (() => {
         if (window.scrolly> 50) {
           setIsAffixed (true);
         } autre {
           setIsAffixed (false);
         }
       }, 100), // exécuter au plus une fois toutes les 100 millisecondes []
     ));
   
     useEFFECT (() => {
       window.addeventListener ('Scroll', handlescroll);
       return () => {
         Window.RemoveEventListener («Scroll», handlescroll);
       };
     }, [handlescroll]); // dépend de la poignée Croll
   
     Retour (
       <div classname="header">
         <nav classname="{`nav">
           <div classname="conteneur">
             <div classname="logo">
               <a href="#"> Votre logo </a>
             </div>
             <div id="mainlistDiv" classname="{`main_list">
               <ul classname="NavLinks">
                 <li> <a href="#"> À propos de </a> </li>
                 <li> <a href="#"> Portfolio </a> </li>
                 <li> <a href="#"> Services </a> </li>
                 <li> <a href="#"> Contact </a> </li>
               </ul>
             </div>
             <span classname="{`navatrigger" onclick="{toggleMenu}">
               <i> </i>
               <i> </i>
               <i> </i>
             </span>
           </div>
          nav>
       </nav>
   </div>
     ));
   };
   
   Exporter par défaut Navbar;

   Dans le code ci-dessus, nous introduisons une fonction de papillon simple et utilisons UseCallback pour envelopper les manchettes pour nous assurer que le Croll de poignées reste référencé stable tout au long de la vie du composant, évitant ainsi la réexécution inutile de l'utilisation d'effet.

Résumer

Grâce à ce didacticiel, nous avons appris à migrer avec succès la logique d'interaction traditionnelle de la barre de navigation jQuery (y compris les effets d'adsorption du menu de hamburger et de défilement) vers le cadre React. Le noyau consiste à utiliser le crochet UseState de React pour gérer l'état des composants et à gérer les effets secondaires (tels que les auditeurs d'événements) via UseEffecte Hook, tout en suivant le paradigme de programmation déclaratif de React pour éviter de manipuler directement le DOM. Cette transformation rend non seulement le code plus lisible et maintenable, mais jette également les bases de la création d'applications de réaction à haute performance. N'oubliez pas que CSS est la clé pour atteindre ces effets visuels, et React est responsable de l'application dynamique des classes CSS correctes en fonction de l'état d'application.

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!