Tutorial Reactjs : Penatalan tanpa had dengan Pemerhati Persimpangan.

Apakah tatal tak terhingga dan memerlukannya?

Menatal ialah tindakan pengguna mengalihkan sebahagian kandungan pada halaman web secara mendatar atau menegak (dalam kebanyakan kes).

Suka seperti yang anda akan lakukan semasa membaca artikel ini.

Oleh Infinite ini bermakna anda mempunyai kandungan baharu dimuatkan secara automatik semasa anda menatal ke bawah halaman web.

Baiklah, tetapi mengapa sesiapa perlu melaksanakannya?

Kebolehtemuan

Mari bayangkan ia adalah jualan Jumaat hitam di kedai e-dagang kegemaran anda.

Anda menjumpai beberapa produk pada halaman teroka tetapi semasa anda menatal ke bahagian bawah halaman web dan bukannya lebih banyak produk, anda menemui butang yang membawa anda ke senarai produk seterusnya.

Anda akan dapat melihat produk baharu (tetapi hanya sekiranya anda melihat butang tindakan itu).

Tatal Infinite hanya membantu pengguna mencari lebih banyak kandungan yang mungkin mereka terlepas jika sebaliknya.

Perlaksanaan

Untuk melaksanakan penatalan tak terhingga , kami perlu sentiasa menyemak sama ada pengguna telah sampai ke bahagian bawah halaman atau bekas.

Tetapi untuk mengesan kedudukan tatal adalah sangat mahal dan nilai kedudukannya tidak boleh dipercayai kerana penyemak imbas dan peranti yang berbeza.

Jadi satu cara ialah menonton kandungan terakhir (elemen) halaman dan titik persilangannya dengan port pandangan atau bekas.

Bagaimanakah kita mencari titik persilangan ?

Pemerhati Persimpangan

Ia adalah API Web yang membolehkan untuk memerhati elemen di penghujung kandungan atau senarai.

Apabila elemen ("sentinel") ini kelihatan (bersilang dengan port pandangan , ia mencetuskan fungsi panggil balik.

Melalui fungsi ini kami boleh mengambil lebih banyak data dan memuatkannya dalam halaman web.

Keseluruhan pemerhatian ini berlaku Secara Asynchronous , yang meminimumkan kesan pada urutan utama.

Untuk melaksanakan Intersection Observer dalam Reactjs, kami akan mengambil contoh suapan Sosial , di mana kami akan melakukan penatalan tanpa had pada penyenaraian siaran.

Lihat komponen ini dan anda boleh mengikuti pecahan setiap bit dan kepingan betul-betul di bawah ini.

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

interface IIntersectionObserverProps {}

const allItems = [
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
];

const IntersectionObserverImplement: React.FunctionComponent<
  IIntersectionObserverProps
> = (props) => {
  const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // Initialize as an empty array
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [listItems, setListItems] = useState(allItems);

  useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe the last card only
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

  return (
    <div className="container" ref={containerRef}>
      {listItems.map((eachItem, index) => (
        <div
          className="card"
          ref={(el) => (cardRefs.current[index] = el)} // Assign refs correctly
          key={index}
        >
          <h5>Post {index}</h5>
          <img width={"200"} height={"150"} src={eachItem} />
        </div>
      ))}
    </div>
  );
};

export default IntersectionObserverImplement;

Matlamatnya adalah untuk mengesan apabila siaran terakhir dalam senarai suapan (dipanggil sentinel) bersilang dengan port pandangan. Sebaik sahaja ini berlaku, lebih banyak siaran dimuatkan dan dipaparkan.

a. Memulakan Negeri dan Ruj

const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // For storing references to each card
const containerRef = useRef<HTMLDivElement | null>(null); // Reference to the scrollable container
const [listItems, setListItems] = useState(allItems); // State to hold the list of items

cardRefs Tatasusunan untuk menjejaki elemen DOM yang mewakili kad dalam senarai.

containerRef Merujuk kepada bekas boleh tatal.

listItems Memegang tatasusunan item yang boleh dilihat pada masa ini pada halaman.

b. Memberi Senarai dan Menetapkan Ruj

return (
  <div className="container" ref={containerRef}>
    {listItems.map((eachItem, index) => (
      <div
        className="card"
        ref={(el) => (cardRefs.current[index] = el)} // Assign a ref to each card
        key={index}
      >
        <h5>Post {index}</h5>
        <img width={"200"} height={"150"} src={eachItem} />
      </div>
    ))}
  </div>
);

containerRef Menandai bekas tempat penatalan akan berlaku.

cardRefs Memberi rujukan kepada setiap kad dalam senarai. Ini memastikan kita boleh memberitahu pemerhati elemen yang hendak dipantau (cth., kad terakhir).

Peta atas item senarai untuk memaparkan setiap item dalam senarai.
Setiap div digayakan sebagai kad dan mempunyai kunci unik untuk React.

c. Memerhatikan catatan terakhir (item).

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

interface IIntersectionObserverProps {}

const allItems = [
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
];

const IntersectionObserverImplement: React.FunctionComponent<
  IIntersectionObserverProps
> = (props) => {
  const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // Initialize as an empty array
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [listItems, setListItems] = useState(allItems);

  useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe the last card only
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

  return (
    <div className="container" ref={containerRef}>
      {listItems.map((eachItem, index) => (
        <div
          className="card"
          ref={(el) => (cardRefs.current[index] = el)} // Assign refs correctly
          key={index}
        >
          <h5>Post {index}</h5>
          <img width={"200"} height={"150"} src={eachItem} />
        </div>
      ))}
    </div>
  );
};

export default IntersectionObserverImplement;

objek pilihan

const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // For storing references to each card
const containerRef = useRef<HTMLDivElement | null>(null); // Reference to the scrollable container
const [listItems, setListItems] = useState(allItems); // State to hold the list of items

root Ini menentukan bekas menatal.

containerRef.current merujuk kepada div yang membalut semua kad.
Jika akar adalah nol, ia memerhati port pandangan secara lalai.

rootMargin: Mentakrifkan margin tambahan di sekeliling akar.

"0px" bermaksud tiada ruang tambahan. Anda boleh menggunakan nilai seperti "100px" untuk mencetuskan pemerhati lebih awal (mis., apabila elemen hampir muncul).

ambang: Menentukan berapa banyak elemen sasaran mesti kelihatan untuk dicetuskan oleh pemerhati.

0.5 bermakna panggilan balik akan dicetuskan apabila 50% daripada kad terakhir kelihatan.

Mencipta Pemerhati

return (
  <div className="container" ref={containerRef}>
    {listItems.map((eachItem, index) => (
      <div
        className="card"
        ref={(el) => (cardRefs.current[index] = el)} // Assign a ref to each card
        key={index}
      >
        <h5>Post {index}</h5>
        <img width={"200"} height={"150"} src={eachItem} />
      </div>
    ))}
  </div>
);

IntersectionObserver Menerima fungsi panggil balik dan objek pilihan yang ditakrifkan sebelum ini.

Panggil balik berjalan apabila elemen yang diperhatikan memenuhi syarat yang dinyatakan dalam pilihan.

Parameter entri ialah tatasusunan elemen yang diperhatikan. Setiap entri mengandungi maklumat tentang sama ada elemen itu bersilang (kelihatan).

Jika entry.isIntersecting adalah benar, ini bermakna kad terakhir kini kelihatan:

1. Tambah item baharu pada senarai menggunakan setListItems.
2. Nyahperhatikan elemen semasa (entry.target) untuk mengelakkan pencetus berlebihan.

Memerhati Kad Terakhir

 useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe each card
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

cardRefs.current: Menjejaki rujukan kepada semua kad.

listItems.length - 1: Mengenal pasti item terakhir dalam senarai.

Jika lastCard wujud, mula memerhatikannya menggunakan observer.observe(lastCard).

Pemerhati akan memantau kad ini dan mencetuskan panggilan balik apabila ia kelihatan.

Membersihkan

const options = {
  root: containerRef.current, // Observe within the container
  rootMargin: "0px",         // No margin around the root container
  threshold: 0.5,           // Trigger when 50% of the element is visible
};

observer.disconnect() mengalih keluar semua pemerhati yang dibuat oleh useEffect ini.

Ini memastikan bahawa apabila komponen menyahlekap atau memaparkan semula, pemerhati lama dibersihkan.

Apakah yang Berlaku pada Setiap Peringkat?

1. Tatal Pengguna

Semasa pengguna menatal , kad terakhir muncul dalam paparan

2. Pencetus Pemerhati Persimpangan

Apabila 50% daripada kad terakhir kelihatan, panggilan balik pemerhati
berlari.

3. Tambah Item

Panggil balik menambah item baharu pada senarai (setListItems).

4. Ulang

Pemerhati memutuskan sambungan dari kad terakhir yang lama dan melekat pada
kad terakhir yang baharu.

Jadi ini adalah cara kita boleh melaksanakan tatal tak terhingga menggunakan Pemerhati Persimpangan.

Semoga ini bermanfaat :)

Terima kasih.

Atas ialah kandungan terperinci Tutorial Reactjs : Penatalan tanpa had dengan Pemerhati Persimpangan.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!