今天我們將透過一些範(fàn)例來探討如何在 React 中使用相交觀察器 API。

Mozilla Web 文件將交叉觀察器 API 描述為：

允許程式碼註冊一個(gè)回呼函數(shù)，每當(dāng)他們想要監(jiān)視的元素進(jìn)入或離開另一個(gè)元素（或視口）時(shí)，或者當(dāng)兩個(gè)元素相交的值改變所請求的量時(shí)，該函數(shù)就會(huì)運(yùn)行。這樣，網(wǎng)站不再需要在主執(zhí)行緒上執(zhí)行任何操作來觀察這種類型的元素交集，並且瀏覽器可以自由地優(yōu)化其認(rèn)為合適的交集管理。

簡而言之，它允許我們檢測某個(gè)元素何時(shí)在視口中可見，只有當(dāng)該元素滿足所需的交叉比例時(shí)才會(huì)發(fā)生這種情況。

如您所見，如果向下捲動(dòng)頁面，交叉比例將會(huì)增加，直到達(dá)到預(yù)計(jì)限制，此時(shí)會(huì)觸發(fā)執(zhí)行回呼的函數(shù)。

---

第一步

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

相交觀察者建構(gòu)函式物件需要兩個(gè)參數(shù)：

1. 回呼函數(shù)
2. 選項(xiàng)

就這樣，我們準(zhǔn)備好看到一些操作，但首先，我們需要知道每個(gè)選項(xiàng)的含義，選項(xiàng)參數(shù)是一個(gè)具有以下值的物件：

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

• root: 用作視口以檢查目標(biāo)可見性的元素。必須是目標(biāo)的祖先。如果未指定或?yàn)?null，則預(yù)設(shè)為瀏覽器視窗。
• rootMargin：這組值用於在計(jì)算交集之前增加或減少根元素邊界框的每一側(cè)，選項(xiàng)與 CSS 中的 margin 類似。
• 閾值： 單一數(shù)字或數(shù)字?jǐn)?shù)組，指示觀察者回調(diào)應(yīng)在目標(biāo)可見性的百分比下運(yùn)行，範(fàn)圍從 0 到 1.0，其中 1.0 表示每個(gè)像素在視口中可見。

---

在 React 中使用

現(xiàn)在我們將看到 React 中交叉觀察器 API 的實(shí)作。

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

1. 從我們想要觀察的元素的引用開始，使用react hook useRef。
2. 建立一個(gè)狀態(tài)變數(shù) isVisible，只要我們的盒子位於視窗中，我們就會(huì)用它來顯示一則訊息。
3. 宣告回呼函數(shù)，該函數(shù)會(huì)接收IntersectionObserverEntries 陣列作為參數(shù)，在該函數(shù)中，我們?nèi)〉玫谝粋€(gè)也是唯一一個(gè)條目，並檢查它是否與視窗相交，如果是，則使用條目的值呼叫setIsVisible .isIntersecting（真/假）。
4. 建立與影像具有相同值的選項(xiàng)物件。
5. 新增 useEffect React 鉤子，並使用我們先前建立的回呼函數(shù)和選項(xiàng)建立觀察者建構(gòu)函式。在我們的例子中它是可選的，但它可以傳回一個(gè)清理函數(shù)來在元件卸載時(shí)取消監(jiān)視我們的目標(biāo)。
6. 在我們想要觀察的元素上設(shè)定 useRef 變數(shù)。

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

1. 讓我們?yōu)檫@個(gè) html 添加一些樣式。

1. 這就是我們所需要的，簡單又簡單！

請記住，這只是一個(gè)基本實(shí)現(xiàn)，有多種方法可以做到這一點(diǎn)。

---

現(xiàn)在我們將實(shí)作與之前相同的程式碼，但將所有邏輯分開在名為 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. 使用參數(shù)選項(xiàng)建立一個(gè)名為 useElementOnScreen 的新函數(shù)
2. 將整個(gè) useRef、useState 和 useEffect 移到我們的新鉤子中。
3. 現(xiàn)在我們的鉤子中唯一缺少的是 return 語句，我們將 isVisible 和 containerRef 作為陣列傳遞。
4. 好的，我們快到了，我們只需要在我們的元件中呼叫它，看看它是否有效！

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

1- 將新建立的鉤子匯入到我們的元件中。
2 - 使用選項(xiàng)物件初始化它。
3 - 這就是我們的結(jié)束方式。

恭喜，我們已經(jīng)成功使用了路口觀察器 API，甚至為它創(chuàng)建了一個(gè)鉤子！

---

製作人員

使用 React 的 Intersection Observer，最初由 Producthackers 編寫

感謝您閱讀這篇文章。我希望能為您提供一些有用的信息。如果是這樣，如果您推薦這篇文章並點(diǎn)擊 ? 按鈕，以便更多人可以看到這篇文章，我將非常高興。

以上是如何在 React 中使用 Intersection Observer的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！