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

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

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

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

ご覧のとおり、ページを下にスクロールすると交差比率が予想される制限に達(dá)するまで増加し、その時點(diǎn)でコールバックを?qū)g行する関數(shù)がトリガーされます。

---

最初のステップ

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

交差點(diǎn)オブザーバー コンストラクター オブジェクトには 2 つの引數(shù)が必要です:

1. コールバック関數(shù)
2. オプション

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

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

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

---

Reactでの使用

次に、React での交差點(diǎn)オブザーバー API の実裝を見ていきます。

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

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

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

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

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

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

---

ここで、以前と同じコードを?qū)g裝しますが、すべてのロジックを 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 という新しい関數(shù)を作成します
2. useRef、useState、useEffect 全體を新しいフック內(nèi)に移動します。
3. フックに欠けているのは return ステートメントだけです。isVisible とcontainerRef を配列として渡します。
4. OK、もうすぐ完成です。コンポーネント內(nèi)で呼び出して、機(jī)能するかどうかを確認(rèn)するだけです。

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

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

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

---

クレジット

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

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

以上がReact で Intersection Observer を使用する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。