React の useIntersectionObserver フックをマスターする

はじめに

この実験では、React で useIntersectionObserver フックを使用して、特定の要素の表示状態の変化を監視する方法を学びます。このフックは、要素が画面上に表示されるタイミングを追跡し、それに応じて特定のアクションをトリガーするために使用できます。この実験が終了すると、React プロジェクトでこのフックを実装して、よりインタラクティブで動的なユーザーインターフェイスを作成できるようになります。

React useIntersectionObserver フック

VM には既に index.html と script.js が用意されています。一般的には、script.js と style.css にのみコードを追加すればよいです。

特定の要素の表示状態の変化を監視するには、次の手順に従います。

useState() フックを使用して、特定の要素の交差値を格納します。
与えられた オプション と適切なコールバックを持つ IntersectionObserver を作成して、isIntersecting 状態変数を更新します。
useEffect() フックを使用して、コンポーネントのマウント時に IntersectionObserver.observe() を呼び出し、アンマウント時に IntersectionObserver.unobserve() を使用してクリーンアップします。

以下は、実装例です。

const useIntersectionObserver = (ref, options) => {
  const [isIntersecting, setIsIntersecting] = React.useState(false);

  React.useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIsIntersecting(entry.isIntersecting);
    }, options);

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      observer.unobserve(ref.current);
    };
  }, [ref, options]);

  return isIntersecting;
};

useIntersectionObserver フックを次のように使用できます。

const MyApp = () => {
  const ref = React.useRef();
  const { threshold: 0.5 });

  return (
    <div>
      <div style={{ height: "100vh" }}>Scroll down</div>
      <div style={{ height: "100vh" }} ref={ref}>
        <p>{onScreen ? "Element is on screen." : "Scroll more!"}</p>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは React useIntersectionObserver フックの実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を行って練習することができます。