Valdykite „Lazy Load“, „Infinite Scroll“ ir „React“ animacijas – „SitePoint“.

Šiame straipsnyje išnagrinėsime tris darbo su „React Intersection Observer“ naudojimo atvejus: tingus įkėlimas, begalinis slinkimas ir animacijos / perėjimo aktyvikliai.

The Reaguokite sankryžų stebėtoją padeda stebėti programos elemento peržiūros srities pokyčius. Sankryžos stebėtojas nustato, kada konkretus elementas susikerta su kitu. Tai veikia nustatant atgalinio skambučio funkciją, kad ji būtų vykdoma, kai tikslinis elementas sąveikauja su peržiūros sritis.

Tai elegantiškas sprendimas elementų matomumui valdyti ir padėti kurti dinamines programas.

1 naudojimo atvejis: tingus įkėlimas, siekiant pagerinti našumą

Atitinkamas įkėlimas yra būdas atidėti mažiau svarbių komponentų (duomenų, kodo, vaizdų, vaizdo įrašų) pateikimą, dažniausiai tais atvejais, kai visko įkėlimas nuo pat pradžių kenkia našumui ir sumažina pagrindinius žiniatinklio poreikius. Tai gali žymiai pagerinti puslapio įkėlimo laiką, ypač daug turinio turinčiose svetainėse.

Paprasčiau tariant, tingus įkėlimas atitolina išteklių įkėlimą, kol jie tampa matomi peržiūros srityje. Vaizdai po matoma riba arba paslėpti slenkamajame turinyje neatsisiunčiami iš karto, todėl bus išvengta nereikalingo išteklių naudojimo ir puslapio įkėlimo vėlavimo.

Galite tingiai įkelti nenaudodami sankryžos stebėjimo priemonės, bet tradicinio onScroll įvykio <img> elementas nesuteikia detalios įkėlimo elgsenos kontrolės. Tačiau sankryžos stebėjimo priemonė leidžia stebėti DOM elementą ir suaktyvinti veiksmus pagal jo susikirtimą su peržiūros zona.

Tingaus krovimo su „React Intersection Observer“ pranašumai

• Greitesnis puslapio įkėlimas. Atidėjus vaizdo įkėlimą, pagerėja pradinis puslapio įkėlimo laikas, todėl naudotojai geriau įsitraukia ir sutrumpėja pradinis puslapio įkėlimo laikas.
• Patobulinti pagrindiniai žiniatinklio poreikiai. Metrika, pvz., Didžiausias turinio dažymas (LCP), naudingas dėl tingaus įkėlimo, todėl jūsų programos PVO ir „Google Lighthouse“ rezultatai yra geresni.
• Sumažintas duomenų naudojimas. Naudotojams, turintiems lėtesnį ryšį arba ribotus duomenų planus, sunaudojama mažiau duomenų, nes vaizdai įkeliami pagal poreikį.
• Sklandesnis slinkimas. Slenkant jautriau, nes sunkūs vaizdai neatsisiunčiami iš anksto, todėl išvengiama baisių puslapių peršokimų.
• Patobulinta vartotojo patirtis. Vartotojai greičiau pamato juos dominantį turinį, todėl bendra patirtis yra geresnė.

Kaip įgyvendinti tingų krovimą naudojant „React Intersection Observer“.

Norėdami pradėti koduoti, pirmiausia turime nustatyti „React Intersection Observer“ savo programoje „React“. Priklausomybę galite įdiegti naudodami šiuos veiksmus:

npm install react-intersection-observer

Importuokite reikiamus komponentus ir kabliukus:

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;

Tingaus įkėlimo integravimas į savo komponentus

Tarkime, kad turite vaizdų, kuriuos norite tingiai įkelti, sąrašą. Dabar naudokime LazyImage komponentas mūsų programoje:

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;

The LazyImage komponentas naudoja useInView kabliukas, kad nustatytumėte, ar elementas yra peržiūros srityje, naudojant triggerOnce vieno paleidimo parinktis. Jis dinamiškai nustato src an atributas <img> žyma pagal elemento matomumą. The ImageList komponentų žemėlapiai per vaizdų sąrašą, atvaizduojant a LazyImage už kiekvieną.

Sekantis tingiai įkeltas CodeSandbox yra visas darbo kodas.

Atitinkamas komponentų įkėlimas naudojant „React Intersection Observer“ yra paprastas būdas padidinti „React“ programų našumą. Atidėjus išteklių įkėlimą, kol prireiks, vartotojo patirtis bus greitesnė ir efektyvesnė. Apsvarstykite galimybę į savo projektus įtraukti tingų įkėlimą, ypač jei juose yra daug turinio.

Begalinis slinkimas yra technika, kuri pagerina vartotojo patirtį įkeliant papildomo turinio, kai vartotojas pasiekia puslapio apačią.

Vietoj to, kad naudotojai naršytų per tradicines puslapių numeravimo nuorodas, begalinis slinkimas užtikrina sklandų ir nenutrūkstamą turinio srautą.

Dinamiškai įkeldamos turinį, kai vartotojas pasiekia puslapio apačią, svetainės išlaiko naudotojų susidomėjimą ir išvengia trikdančių puslapio perėjimų.

Begalinio slinkimo su React Intersection Observer pranašumai

• Patobulinta vartotojo patirtis. Vartotojai gali sklandžiai, be pertrūkių slinkti per turinį, kad būtų patrauklesnė patirtis.
• Efektyvus išteklių naudojimas. Ištekliai įkeliami tik tada, kai reikia, todėl sumažėja nereikalingų duomenų gavimas ir pateikimas.
• Supaprastinta navigacija. Panaikina tradicinių puslapių rūšiavimo nuorodų poreikį, todėl vartotojams lengviau naršyti.
• Patobulintas našumas. Smulkus stebėjimas leidžia išvengti nereikalingų skaičiavimų ir turinio įkėlimo.
• Padidėjęs matomumas. Metrika, pvz., „Time to Interactive“ nauda, ​​padidinanti SEO ir „Google Lighthouse“ balus.

Kaip įgyvendinti begalinį slinkimą naudojant „React Intersection Observer“.

Kaip įprasta, pridėkite „React Intersection Observer“ prie savo „React“ programos:

npm install react-intersection-observer

Importuokite reikiamus komponentus ir kabliukus:

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;

Naudoti InfiniteScroll komponentas, skirtas begaliniam slinkimui įgyvendinti:

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;

The InfiniteScroll komponentas naudoja useInView kablys, kad aptiktų jo matomumą, iškviesdamas loadMore funkcija įkelti papildomą turinį. The loadMore tada funkcija gauna papildomų duomenų, pridėdama juos prie esamo sąrašo. The InfiniteScrollList komponentas suteikia nuolatinio slinkimo patirtį, rodydamas elementų sąrašą su dinaminiu įkėlimu, kurį suaktyvina InfiniteScroll komponentas.

Tai Infinite Scroll CodeSandbox yra visas darbo kodas.

Išnaudodami sankryžos stebėtojo galią, galėsite efektyviai ir patraukliai slinkti be galo. Ši technika padidina našumą, vartotojų pasitenkinimą ir bendrą jūsų svetainės patrauklumą. Nepamirškite, kad optimizuodami slinkimo kelią naudotojai bus įsitraukę į jūsų programą.

Naudokite 3 atvejį: animacijos ir perėjimo aktyvikliai su sankryžos stebėtoju

Animacijos ir perėjimai suteikia tinklalapiui gyvybės, todėl naudotojai tampa patrauklesni. Tačiau suaktyvinti šiuos efektus tinkamu momentu gali būti sudėtinga. „Intersection Observer“ siūlo sprendimą, leidžiantį nustatyti, kada elementas yra matomas, ir yra puikus mechanizmas animacijai ir perėjimams suaktyvinti.

Praėjo tie laikai, kai animacija buvo suaktyvinta įkeliant puslapį arba fiksuotose slinkties vietose. Intersection Observer atrakina naują dinamiškumo lygį.

Animacijos ir perėjimų su sankryžos stebėtoju privalumai

• Našumo padidėjimas. Animacijos suaktyvinamos tik tada, kai reikia arba matomos, taupant išteklius ir neleidžiant atlikti nereikalingų skaičiavimų.
• Patobulintas pasakojimas. Turinys atgyja, kai elementai atgyja lemiamu momentu, atkreipdami vartotojų dėmesį ir pabrėždami pagrindinius dalykus.
• Atsakingos sąveikos. Skirtingos animacijos, pagrįstos slinkties gyliu, leidžia sluoksniais pasakoti istorijas ir suasmeninti.
• Sklandus slinkimas. Perėjimai tarp būsenų vyksta sklandžiai, padidindami naudotojų įsitraukimą ir užkertant kelią trikdžiams.
• Tikslus laikas. Animacijos ir perėjimo aktyvikliai yra pagrįsti elemento matomumu, užtikrinant tikslų laiką ir sinchronizavimą su vartotojo sąveika.
• Padidintas vartotojų įtraukimas. Vizualiai patrauklių ir interaktyvių komponentų kūrimas padidina vartotojų įsitraukimą ir suteikia dinamiškesnę patirtį.

Kaip įdiegti animacijas ir perėjimus naudojant „React Intersection Observer“.

Dar kartą įdiekite „React Intersection Observer“ priklausomybę:

npm install react-intersection-observer

Sukurkite daugkartinį komponentą sankryžų įvykiams tvarkyti:

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;

Naudoti IntersectionAnimationTrigger komponentas, skirtas animuoti, kai elementas pasirodo:

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;

Pridėkite šiek tiek CSS, kad animacija būtų vizualiai patraukli:

.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;
}

The IntersectionAnimationTrigger komponentas naudoja useInView kabliukas elemento matomumui stebėti, vykdant onInView perskambinti, kai jis patenka į rodinį. Viduje AnimatedElement komponentas, animated būsena perjungia, kad būtų pradėta animacija, kai elementas tampa matomas.

Tai Animacijos ir perėjimų kodai ir dėžė yra visas darbo kodas.

Bet kokiais tikslais sankryžos įvykių panaudojimas padidina jūsų projekto vizualinį patrauklumą. Eksperimentuokite su įvairiomis animacijomis ir perėjimais, kad rastumėte tobulą balansą asmeniniam naudojimui.

Santrauka

„React Intersection Observer“ supaprastina tingaus įkėlimo, begalinio slinkimo ir animacijos suaktyvinimo procesą, pateikdama „React“ konkrečius kabliukus ir komponentus, todėl lengviau įtraukti su sankryžomis susijusias funkcijas į „React“ programas. Tai abstrahuoja kai kuriuos sudėtingumus ir siūlo deklaratyvesnę sintaksę, suderinamą su komponentais pagrįstu „React“ pobūdžiu.

Jei jums patiko šis „React“ straipsnis, peržiūrėkite kitus puikius „SitePoint“ išteklius:

Tolesnės nuorodos