Contrôlez le chargement différé, le défilement infini et les animations dans React —

Dans cet article, nous explorerons trois cas d’utilisation pour travailler avec React Intersection Observer : le chargement paresseux, le défilement infini et les déclencheurs d’animation/transition.

Le Réagir à l’observateur d’intersection aide à surveiller les modifications dans la fenêtre d’affichage d’un élément au sein de votre application. L’Intersection Observer détecte lorsqu’un élément spécifique en croise un autre. Cela fonctionne en définissant la fonction de rappel pour qu’elle s’exécute chaque fois que l’élément cible interagit avec la fenêtre.

Il fournit une solution élégante pour gérer la visibilité des éléments et vous aider à créer des applications dynamiques.

Cas d’utilisation 1 : chargement différé pour des performances améliorées

Le chargement paresseux est une technique permettant de différer le rendu des composants moins critiques (données, code, images, vidéos), principalement dans les cas où tout charger dès le début est préjudiciable aux performances et entraîne une baisse des éléments essentiels du Web. Il peut considérablement améliorer les temps de chargement des pages, en particulier pour les sites Web riches en contenu.

En termes simples, le chargement différé retarde le chargement des ressources jusqu’à ce qu’elles deviennent visibles dans la fenêtre. Les images situées sous la ligne de flottaison ou masquées dans le contenu défilant ne seront pas téléchargées immédiatement, évitant ainsi une consommation inutile de ressources et des retards de chargement des pages.

Vous pouvez charger paresseux sans utiliser Intersection Observer, mais l’événement onScroll traditionnel du <img> L’élément ne fournit pas de contrôle granulaire sur le comportement de chargement. Mais l’Intersection Observer vous permet d’observer un élément DOM et de déclencher des actions en fonction de son intersection avec la fenêtre.

Avantages du chargement paresseux avec React Intersection Observer

• Chargement de page plus rapide. En différant le chargement des images, les temps de chargement initiaux des pages s’améliorent, ce qui entraîne un meilleur engagement des utilisateurs et réduit le temps de chargement initial des pages.
• Éléments essentiels du Web améliorés. Des métriques telles que la plus grande peinture de contenu (LCP) bénéficient d’un chargement différé, améliorant ainsi les scores SEO et Google Lighthouse de votre application.
• Utilisation réduite des données. Les utilisateurs disposant de connexions plus lentes ou de forfaits de données limités bénéficient d’une utilisation réduite des données à mesure que les images se chargent à la demande.
• Défilement plus fluide. Le défilement semble plus réactif, car les images lourdes ne sont pas téléchargées à l’avance, ce qui évite les sauts de page saccadés.
• Expérience utilisateur améliorée. Les utilisateurs voient le contenu qui les intéresse plus rapidement, ce qui permet une meilleure expérience globale.

Comment implémenter le chargement différé avec React Intersection Observer

Pour commencer notre codage, nous devons d’abord configurer React Intersection Observer dans notre application React. Vous pouvez installer la dépendance en utilisant ce qui suit :

npm install react-intersection-observer

Importez les composants et hooks nécessaires :

import React from "react";
import { useInView } from "react-intersection-observer";

const LazyImage = ({ src, alt, className }) => {
  const [ref, inView] = useInView({
    triggerOnce: true, 
  });

  return (
    <img
      ref={ref}
      src={inView ? src : ""}
      alt={alt}
      className={`lazy-image ${className || ""}`}
    />
  );
};

export default LazyImage;

Intégration du chargement différé dans vos composants

Supposons que vous ayez une liste d’images que vous souhaitez charger paresseusement. Maintenant, utilisons le LazyImage composant de notre application :

import React from "react";
import LazyImage from "./LazyImage";

const ImageList = () => {
  const images = [
    { id: 1, src: "image1.jpg", alt: "Description 1" },
    { id: 2, src: "image2.jpg", alt: "Description 2" },
    { id: 3, src: "image3.jpg", alt: "Description 3" },
    { id: 4, src: "image4.png", alt: "Description 4" },
    { id: 5, src: "image5.png", alt: "Description 5" },
    { id: 6, src: "image6.png", alt: "Description 6" },
    { id: 7, src: "image7.png", alt: "Description 7" },
    { id: 8, src: "image8.png", alt: "Description 8" },
    { id: 9, src: "image9.png", alt: "Description 9" },
  ];

  return (
    <div>
      {images.map((image) => (
        <LazyImage
          key={image.id}
          src={image.src}
          alt={image.alt}
          className="lazy-image"
        />
      ))}
    </div>
  );
};

export default ImageList;

Le LazyImage Le composant utilise le useInView crochet pour déterminer si un élément est dans la fenêtre, en utilisant le triggerOnce option pour un seul déclencheur. Il définit dynamiquement le src attribut d’un <img> balise basée sur la visibilité de l’élément. Le ImageList les composants sont mappés sur une liste d’images, ce qui rend un LazyImage pour chacun.

Ce qui suit CodeSandbox chargé paresseux contient le code de travail complet.

La mise en œuvre du chargement paresseux pour les composants avec React Intersection Observer est un moyen simple d’améliorer les performances de vos applications React. Différer le chargement des ressources jusqu’à ce qu’elles soient nécessaires offre une expérience utilisateur plus rapide et plus efficace. Pensez à ajouter un chargement différé dans vos projets, surtout s’ils impliquent un contenu important.

Le défilement infini est une technique qui améliore l’expérience utilisateur en chargeant du contenu supplémentaire lorsque l’utilisateur atteint le bas d’une page.

Au lieu d’obliger les utilisateurs à naviguer à travers des liens de pagination traditionnels, le défilement infini offre un flux de contenu transparent et continu.

En chargeant dynamiquement le contenu lorsque l’utilisateur atteint le bas de la page, les sites Web maintiennent l’engagement des utilisateurs et évitent les transitions de page perturbatrices.

Avantages du défilement infini avec React Intersection Observer

• Expérience utilisateur améliorée. Les utilisateurs peuvent faire défiler le contenu de manière transparente et sans interruption, offrant ainsi une expérience plus attrayante.
• Utilisation efficace des ressources. Les ressources ne sont chargées qu’en cas de besoin, ce qui réduit la récupération et le rendu inutiles des données.
• Navigation simplifiée. Supprime le besoin de liens de pagination traditionnels, simplifiant ainsi l’expérience de navigation des utilisateurs.
• Performance améliorée. Une observation fine évite les calculs inutiles et le chargement de contenu.
• Visibilité accrue. Des mesures telles que Time to Interactive bénéficient, améliorant les scores SEO et Google Lighthouse.

Comment implémenter le défilement infini avec React Intersection Observer

Comme d’habitude, ajoutez le React Intersection Observer à votre application React :

npm install react-intersection-observer

Importez les composants et hooks nécessaires :

import React from "react";
import { useInView } from "react-intersection-observer";

const InfiniteScroll = ({ loadMore }) => {
  const [ref, inView] = useInView({
    triggerOnce: true,
  });

  React.useEffect(() => {
    if (inView) {
      loadMore();
    }
  }, [inView, loadMore]);

  return <div ref={ref} style={{ height: "10px" }} />;
};

export default InfiniteScroll;

Utilisez le InfiniteScroll composant pour implémenter le défilement infini :

import React, { useState } from "react";
import InfiniteScroll from "./InfiniteScroll";

const initialItems = [
  { id: 1, content: "Item 1" },
  { id: 2, content: "Item 2" },
  { id: 3, content: "Item 3" },
];

const fetchMoreData = (page) => {
  
  return Array.from({ length: 5 }, (_, index) => ({
    id: initialItems.length + index + 1,
    content: `Item ${initialItems.length + index + 1}`,
  }));
};

const InfiniteScrollList = () => {
  const [items, setItems] = useState(initialItems);
  const [page, setPage] = useState(1);

  const loadMore = () => {
    
    const newData = fetchMoreData(page + 1);
    setItems([...items, ...newData]);
    setPage(page + 1);
  };

  return (
    <div>
      {items.map((item) => (
        <div key={item.id} className="list-item">
          {}
          {item.content}
        </div>
      ))}
      <InfiniteScroll loadMore={loadMore} />
    </div>
  );
};

export default InfiniteScrollList;

Le InfiniteScroll Le composant utilise le useInView crochet pour détecter sa visibilité, en invoquant le loadMore fonction pour charger du contenu supplémentaire. Le loadMore La fonction récupère ensuite des données supplémentaires, en les ajoutant à la liste existante. Le InfiniteScrollList Le composant offre une expérience de défilement continu, affichant la liste des éléments avec un chargement dynamique déclenché par le InfiniteScroll composant.

Ce Code de défilement infiniSandbox contient le code de travail complet.

Exploiter la puissance d’Intersection Observer vous permet de créer une expérience de défilement infinie efficace et engageante. Cette technique améliore les performances, la satisfaction des utilisateurs et l’attrait général de votre site Web. N’oubliez pas que l’optimisation de votre parcours de défilement permet de garder les utilisateurs accrochés à votre application.

Cas d’utilisation 3 : Déclencheurs d’animation et de transition avec Intersection Observer

Les animations et les transitions donnent vie à une page Web, la rendant plus attrayante pour les utilisateurs. Cependant, déclencher ces effets au bon moment peut s’avérer difficile. L’Intersection Observer offre une solution en vous permettant de définir quand un élément est visible, fournissant ainsi un excellent mécanisme pour déclencher des animations et des transitions.

Il est révolu le temps des animations déclenchées au chargement de la page ou à des positions de défilement fixes. L’Intersection Observer ouvre un nouveau niveau de dynamisme.

Avantages des animations et des transitions avec Intersection Observer

• Amélioration des performances. Les animations ne se déclenchent qu’en cas de besoin ou lorsqu’elles sont visibles, économisant ainsi des ressources et évitant des calculs inutiles.
• Une narration améliorée. Le contenu prend vie à mesure que les éléments s’animent au moment crucial, attirant l’attention de l’utilisateur et mettant l’accent sur les points clés.
• Interactions réactives. Différentes animations basées sur la profondeur de défilement permettent une narration en couches et des expériences personnalisées.
• Défilement fluide. Les transitions entre les états se produisent de manière transparente, améliorant l’engagement des utilisateurs et évitant les interruptions discordantes.
• Chronométrage précis. Les déclencheurs d’animation et de transition sont basés sur la visibilité de l’élément, garantissant un timing et une synchronisation précis avec les interactions de l’utilisateur.
• Engagement amélioré des utilisateurs. La création de composants visuellement attrayants et interactifs augmente l’engagement des utilisateurs et offre une expérience utilisateur plus dynamique.

Comment implémenter des animations et des transitions avec React Intersection Observer

Encore une fois, installez la dépendance React Intersection Observer :

npm install react-intersection-observer

Créez le composant réutilisable pour gérer les événements d’intersection :

import React, { useEffect } from "react";

const IntersectionAnimationTrigger = ({ children, onInView }) => {
  const handleIntersection = (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        onInView();
      }
    });
  };

  useEffect(() => {
    const observer = new IntersectionObserver(handleIntersection, {
      threshold: 0.5,
    });

    
    observer.observe(document.getElementById("animated-element"));

    
    return () => {
      observer.disconnect();
    };
  }, [onInView]);

  return <div id="animated-element">{children}</div>;
};

export default IntersectionAnimationTrigger;

Utilisez le IntersectionAnimationTrigger composant à animer lorsque l’élément apparaît :

import React, { useState } from "react";
import IntersectionAnimationTrigger from "./IntersectionAnimationTrigger";

const AnimatedElement = () => {
  const [animated, setAnimated] = useState(false);

  const handleInView = () => {
    setAnimated(true);
  };

  return (
    <IntersectionAnimationTrigger onInView={handleInView}>
      <div className={`animated-element ${animated ? "animate" : ""}`}>
        {}
        This element will animate as it comes into view.
      </div>
    </IntersectionAnimationTrigger>
  );
};

export default AnimatedElement;

Ajoutez du CSS pour rendre l’animation visuellement attrayante :

.animated-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.animated-element.animate {
  opacity: 1;
  transform: translateY(0);
  width: 15rem;
  height: 5rem;
  margin: 0 auto;
  color: blue;
}

Le IntersectionAnimationTrigger Le composant utilise le useInView hook pour suivre la visibilité des éléments, en exécutant le onInView rappel lorsqu’il entre dans la vue. Au sein du AnimatedElement composant, le animated L’état bascule pour lancer l’animation lorsque l’élément devient visible.

Ce Animations et transitions Codesandbox contient le code de travail complet.

Quel que soit le but de l’application, tirer parti des événements d’intersection améliore l’attrait visuel de votre projet. Expérimentez avec différentes animations et transitions pour trouver l’équilibre parfait pour votre cas d’utilisation personnel.

Résumé

React Intersection Observer simplifie le processus de chargement paresseux, de défilement infini et de déclenchement d’animation en fournissant des hooks et des composants spécifiques à React, ce qui vous permet d’incorporer plus facilement des fonctionnalités liées aux intersections dans vos applications React. Il élimine certaines complexités et offre une syntaxe plus déclarative qui s’aligne sur la nature basée sur les composants de React.

Si vous avez apprécié cet article React, consultez ces autres excellentes ressources de SitePoint :

Autres références