無限スクロールとは何ですか?またその必要性は何ですか?

スクロールは、Web ページ上のコンテンツの一部を (ほとんどの場(chǎng)合) 水平方向または垂直方向に移動(dòng)するユーザー操作です。

この記事を読んでいるときと同じように。

Infinite とは、Web ページを下にスクロールすると、新しいコンテンツが自動(dòng)的に読み込まれることを意味します。

まあまあですが、なぜ誰(shuí)かがそれを?qū)g裝する必要があるのでしょうか?

発見可能性

お?dú)荬巳毪辘?e コマース ストアでのブラック フライデー セールを想像してみましょう。

検索ページでいくつかの製品が見つかりましたが、他の製品ではなくウェブページの一番下までスクロールすると、次の製品リストに移動(dòng)するボタンが見つかりました。

新製品を確認(rèn)できるようになります (ただし、アクション ボタンに気づいた場(chǎng)合のみ)。

無限スクロール は、ユーザーが他の方法では見逃していた可能性のあるコンテンツをさらに見つけるのに役立ちます。

実裝

無限スクロールを?qū)g裝するには、ユーザーがページまたはコンテナの下部に到達(dá)したかどうかをチェックし続ける必要があります。

しかし、スクロールの位置を検出するのは非常にコストがかかり、ブラウザやデバイスが異なるためその位置の値は信頼できません。

その 1 つの方法は、ページの最後のコンテンツ (要素) とビューポートまたはコンテナとの交差點(diǎn)を監(jiān)視することです。

交點(diǎn)はどのように見つけますか?

交差點(diǎn)監(jiān)視員

これは、コンテンツまたはリストの末尾にある要素を観察できるようにする Web API です。

この 要素 (「センチネル」) が表示されると (ビューポートと交差し、コールバック関數(shù)がトリガーされます。

この関數(shù)を通じて、より多くのデータを取得し、Web ページに読み込むことができます。

この観察全體は非同期で行われます。これにより、メインスレッドへの影響が最小限に抑えられます。

---

Reactjs で Intersection Observer を?qū)g裝するには、投稿リストで無限スクロールを行うソーシャル フィードの例を取り上げます。

このコンポーネントを見てください。このコンポーネントのすぐ下にある各部分の內(nèi)訳をたどることができます。

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;

目標(biāo)は、フィード リストの最後の投稿 (センチネルと呼ばれます) がビューポートと交差するタイミングを検出することです。これが発生すると、さらに投稿が読み込まれて表示されます。

---

ａ．狀態(tài)と參照の初期化

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 リスト內(nèi)のカードを表す DOM 要素を追跡する配列。

containerRef スクロール可能なコンテナを參照します。

listItems ページ上に現(xiàn)在表示されている項(xiàng)目の配列を保持します。

b.リストのレンダリングと參照の割り當(dāng)て

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 スクロールが行われるコンテナをマークします。

cardRefs リスト內(nèi)の各カードに參照を割り當(dāng)てます。これにより、どの要素 (最後のカードなど) を監(jiān)視するかをオブザーバーに確実に伝えることができます。

listItems をマップして、リスト內(nèi)の各項(xiàng)目をレンダリングします。
各 div はカードとしてスタイル設(shè)定され、React 用の一意のキーを持ちます。

c.最後の投稿（アイテム）を観察します。

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;

オプション オブジェクト

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 スクロールコンテナを指定します。

containerRef.current は、すべてのカードをラップする div を參照します。
root が null の場(chǎng)合、デフォルトでビューポートを監(jiān)視します。

rootMargin: ルートの周囲の余分なマージンを定義します。

「0px」は余分なスペースがないことを意味します。 「100px」のような値を使用すると、オブザーバーをより早くトリガーすることができます (要素が表示されそうになったときなど)。

しきい値: オブザーバーがトリガーするために、ターゲット要素がどの程度表示される必要があるかを決定します。

0.5 は、最後のカードの 50% が表示されたときにコールバックがトリガーされることを意味します。

オブザーバーの作成

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 コールバック関數(shù)と前に定義したオプション オブジェクトを受け入れます。

コールバックは、監(jiān)視された要素がオプションで指定された條件を満たすたびに実行されます。

entrys パラメータは、観測(cè)された要素の配列です。各エントリには、要素が交差している (表示されている) かどうかに関する情報(bào)が含まれています。

entry.isIntersecting が true の場(chǎng)合、最後のカードが表示されていることを意味します。

1. setListItems を使用してリストに新しい項(xiàng)目を追加します。
2. 冗長(zhǎng)なトリガーを防ぐために、現(xiàn)在の要素 (entry.target) を監(jiān)視しません。

最後のカードを観察する

 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: すべてのカードへの參照を追跡します。

listItems.length - 1: リスト內(nèi)の最後の項(xiàng)目を識(shí)別します。

lastCard が存在する場(chǎng)合は、observer.observe(lastCard) を使用して監(jiān)視を開始します。

オブザーバーはこのカードを監(jiān)視し、カードが表示されるとコールバックをトリガーします。

片付け

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() は、この useEffect によって作成されたすべてのオブザーバーを削除します。

これにより、コンポーネントがアンマウントまたは再レンダリングされるときに、古いオブザーバーが確実にクリーンアップされます。

---

各段階では何??が起こりますか?

1.ユーザースクロール

ユーザーがスクロールすると、最後のカードが表示されます

2.交差點(diǎn)オブザーバーのトリガー

最後のカードの 50% が表示されると、オブザーバーのコールバック
実行します。

3.アイテムを追加

コールバックは新しい項(xiàng)目をリスト (setListItems) に追加します。

4.繰り返し

オブザーバーは古い最後のカードから切斷し、
に接続します 新しい最後のカード。

これが、Intersection Observer を使用して無限スクロールを?qū)g裝する方法です。

これがお役に立てば幸いです:)

ありがとうございます。

以上がReactjs チュートリアル : Intersection Observer を使用した無限スクロール。の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。