React で Intersection Observer を使用する方法

今日は、React で交差点オブザーバー API を使用する方法をいくつかの例とともに検討します。

Mozilla の Web ドキュメントでは、交差点オブザーバー API について次のように説明されています。

コードは、監視する要素が別の要素 (またはビューポート) に出入りするとき、または 2 つの要素の交差値が要求された量だけ変化するときに実行されるコールバック関数を登録できます。このようにして、サイトはこの種の要素の交差を観察するためにメインスレッドで何もする必要がなくなり、ブラウザは必要に応じて交差管理を自由に最適化できるようになります。

つまり、特定の要素がビューポートに表示されるタイミングを検出できます。これは、要素が目的の交差比率を満たしている場合にのみ発生します。

ご覧のとおり、ページを下にスクロールすると交差比率が予想される制限に達するまで増加し、その時点でコールバックを実行する関数がトリガーされます。

---

最初のステップ

const observer = new IntersectionObserver(callbackFunction, options)
observer.observer(elementToObserver)

交差点オブザーバー コンストラクター オブジェクトには 2 つの引数が必要です:

1. コールバック関数
2. オプション

これで、アクションを確認する準備が整いました。しかし、まず、各オプションの意味を知る必要があります。オプション引数は、次の値を持つオブジェクトです。

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1
}

• root: ターゲットの可視性をチェックするためのビューポートとして使用される要素。ターゲットの祖先である必要があります。指定されていないかnullの場合、デフォルトはブラウザのビューポートです。
• rootMargin: この値のセットは、交差を計算する前にルート要素の境界ボックスの各辺を増減するために使用されます。オプションは CSS のマージンのオプションと似ています。
• threshold: ターゲットの可視性の何パーセントでオブザーバー コールバックを実行するかを示す単一の数値または数値の配列。範囲は 0 ～ 1.0 で、1.0 は各ピクセルがビューポートに表示されることを意味します。

---

Reactでの使用

次に、React での交差点オブザーバー API の実装を見ていきます。

const observer = new IntersectionObserver(callbackFunction, options)
observer.observer(elementToObserver)

1. 観察したい要素への参照から開始し、反応フック useRef を使用します。
2. 状態変数 isVisible を作成します。これを使用して、ボックスがビューポート内にあるたびにメッセージを表示します。
3. IntersectionObserverEntries の配列をパラメータとして受け取るコールバック関数を宣言します。この関数内で最初で唯一のエントリを取得し、それがビューポートと交差しているかどうかを確認し、ビューポートと交差している場合は、エントリの値で setIsVisible を呼び出します。 .isIntersecting (true / FALSE).
4. 画像と同じ値でオプション オブジェクトを作成します。
5. useEffect 反応フックを追加し、先ほど作成したコールバック関数とオプションを使用してオブザーバー コンストラクターを作成します。この例ではオプションですが、コンポーネントがアンマウントされたときにターゲットの監視を解除するクリーンアップ関数を返すことができます。
6. 観察したい要素に useRef 変数を設定します。

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1
}

1. この HTML にスタイルを追加してみましょう。

1. 必要なのはこれだけです。シンプルで簡単です!

これは単なる基本的な実装であり、これを行うにはいくつかの方法があることに注意してください。

---

ここで、以前と同じコードを実装しますが、すべてのロジックを useElementOnScreen という nu フックで分離します。

const containerRef = useRef(null)
const [isVisible, setIsVisible] = useState(false)

const callbackFunction = (entries) => {
  const [entry] = entries
  setIsVisible(entry.isIntersecting)
}

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1.0
}

useEffect(() => {
  const observer = new IntersectionObserver(callbackFunction, options)
  if (containerRef.current) observer.observe(containerRef.current)

  return () => {
    if (containerRef.current) observer.unobserve(containerRef.current)
  }

}, [containerRef, options])

return (
  <div className="app">
    <div className="isVisible">{isVisible ? "IN VIEWPORT" : "NOT IN VIEWPORT"}</div>
    <div className="section"></div>
    <div className="box" ref={containerRef}>Observe me</div>
  </div>
)

1. パラメーター オプションを使用して useElementOnScreen という新しい関数を作成します
2. useRef、useState、useEffect 全体を新しいフック内に移動します。
3. フックに欠けているのは return ステートメントだけです。isVisible とcontainerRef を配列として渡します。
4. OK、もうすぐ完成です。コンポーネント内で呼び出して、機能するかどうかを確認するだけです。

<div className="box" ref={containerRef}>Observe me</div>

1- 新しく作成したフックをコンポーネントにインポートします。
2 - オプション オブジェクトを使用して初期化します。
3 - これで終了です。

おめでとうございます。交差点オブザーバー API が正常に使用され、そのフックも作成されました。

---

クレジット

React を使用した Intersection Observer、もともとプロダクトハッカーによって作成されました

この記事をお読みいただきありがとうございます。何か有益な情報を提供できれば幸いです。もしそうなら、この投稿を推薦して♥ボタンをクリックして、より多くの人に見てもらえるととても嬉しいです

以上がReact で Intersection Observer を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。