0
votes

Modification du texte d'un composant collant dans React

J'ai un texte collant sur le côté gauche de l'écran.Je veux changer le texte dès que l'utilisateur fait défiler jusqu'à une certaine section.Comme lors du chargement initial, je veux afficher la maison, et après que l'utilisateur fasse défiler jusqu'à la section à propos le texte devient environ. Jusqu'à présent, j'ai utilisé l'état et le défilement de la fenêtre.Mais en utilisant cela, les performances de mon site sont dégradées. Je sais que je n'utilise pas le hook d'effet efficacement.

import React, { useState, useEffect } from "react";

import DrawerToggleButton from "../SideDrawer/DrawerToggleButton";
import "./Tracer.css";

const Tracer = props => {
  const [scroll, setScroll] = useState(0);
  const [offsetValue, setOffsetValue] = useState(0);
  const [currentText, setCurrentText] = useState("Home");

  useEffect(() => {
    document.addEventListener("scroll", () => {
     setOffsetValue(window.pageYOffset);
}
    });
  });
  const text =
    offsetValue > 285 ? "About" : offsetValue > 627 ? "Skills" : "Home";
  console.log("scorllOffser", offsetValue);
  return (
    <div>
      <header className={"toolbar2"}>
        <nav className="toolbar__navigation2">
          <div className="toolbar__logo2">
            <h1>{currentText}</h1>
          </div>
          <div className="spacer" />
        </nav>
      </header>
      {props.children}
    </div>
  );
};

export default Tracer;

J'ai essayé différentes variantes, et j'ai même obtenu le résultat, mais les performances sont le problème.

javascript reactjs

0 commentaires

4 Réponses :

0
votes

Vous devez nettoyer l'auditeur d'événement dans votre effet et ajouter une matrice de dépendance sur l'effet.

Bien que les événements de défilement soient célèbres pour avoir une tonne d'événements, alors je suggérerais de débattre / manifester l'auditeur comme bien. J'utilise habituellement Lodash's Déboquez pour cela. P>

import React, { useState, useEffect } from 'react';

import DrawerToggleButton from '../SideDrawer/DrawerToggleButton';
import './Tracer.css';

const Tracer = (props) => {
  const [scroll, setScroll] = useState(0);
  const [offsetValue, setOffsetValue] = useState(0);
  const [currentText, setCurrentText] = useState('Home');

  useEffect(() => {
    const listener = () => {
      setOffsetValue(window.pageYOffset);
    };
    document.addEventListener('scroll', listener);
    return () => {
      document.removeEventListener('scroll', listener);
    };
  }, []);
  const text = offsetValue > 285 ? 'About' : offsetValue > 627 ? 'Skills' : 'Home';
  console.log('scorllOffser', offsetValue);
  return (
    <div>
      <header className={'toolbar2'}>
        <nav className="toolbar__navigation2">
          <div className="toolbar__logo2">
            <h1>{currentText}</h1>
          </div>
          <div className="spacer" />
        </nav>
      </header>
      {props.children}
    </div>
  );
};

export default Tracer;

2 commentaires

Merci beaucoup.Je suis NEWBIE.JUST Vous avez une question si nous utilisons cet USEEffect en tant que composantDidMount, qui fonctionne essentiellement une fois lorsque le composant est monté. Montez l'événement que l'événement est appelé à nouveau et encore?

useEffect et tout autre hook avec un tableau de dépendances est déclenché chaque fois qu'une valeur du tableau de dépendances change (par égalité peu profonde). Si vous avez une baie vide, elle est déclenchée uniquement lors du montage, puis nettoyée lors du démontage. Si vous n'avez pas du tout de tableau de dépendances, le hook est déclenché à la place à chaque rendu.

1
votes

Votre useEffect est appelé pour chaque mise à jour et vous appelez donc addEventListener plusieurs fois. Cela dégradera définitivement les performances de votre application. Vous ne devez appeler addEventListener qu'une seule fois et également removeEventListener avant de démonter le composant. Ajoutez ceci pour ne faire les deux qu'une seule fois:

useEffect(() => {
   // adding event listener on mount here
   return () => {
       // cleaning up the listener here
   }
}, []);

La partie importante est le [] à la fin qui ne fera le déclencheur useEffect qu'une seule fois

0 commentaires

0
votes

L'utilisation d'UseEffect nécessite un tableau ou un objet de dépendances, sinon il fonctionnera dans une boucle infinie. Vous pouvez mettre un tableau contenant un morceau d'état pour l'exécuter sur le changement d'état.

Vous devez définir un élément d'état (je voudrais simplement faire un élément d'état contenant une chaîne avec le titre de la section actuelle) et définir cela En tant que dépendance. xxx

Vous pouvez également la définir pour exécuter sur DOM charge en plaçant une paire de supports vides dans la liste d'arguments.

0 commentaires

1
votes

Bien que toutes les réponses puissent être identiques, vous devriez accélérez ou anti-rebond votre auditeur:

import debounce from "lodash.debounce";

useEffect(() => {
  const listener = debounce(() => {
    setOffsetValue(window.pageYOffset);
  }, 1000);
  document.addEventListener("scroll", debounce(listener, 1000));
  return () => {
    document.removeEventListener("scroll", listener);
  };
}, []);

1 commentaires

Pouvez-vous modifier la réponse pour avoir l'appel anti-rebond autour de la déclaration const listener ? Sinon, l'auditeur n'aura pas raison de supprimer l'auditeur lors du nettoyage.