如何在 React 中使用 Intersection Observer

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

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

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

簡而言之，它允許我們檢測某個元素何時在視口中可見，只有當該元素滿足所需的交叉比例時才會發生這種情況。

如您所見，如果向下捲動頁面，交叉比例將會增加，直到達到預計限制，此時會觸發執行回呼的函數。

---

第一步

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

相交觀察者建構函式物件需要兩個參數：

1. 回呼函數
2. 選項

就這樣，我們準備好看到一些操作，但首先，我們需要知道每個選項的含義，選項參數是一個具有以下值的物件：

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

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

---

在 React 中使用

現在我們將看到 React 中交叉觀察器 API 的實作。

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

1. 從我們想要觀察的元素的引用開始，使用react hook useRef。
2. 建立一個狀態變數 isVisible，只要我們的盒子位於視窗中，我們就會用它來顯示一則訊息。
3. 宣告回呼函數，該函數會接收IntersectionObserverEntries 陣列作為參數，在該函數中，我們取得第一個也是唯一一個條目，並檢查它是否與視窗相交，如果是，則使用條目的值呼叫setIsVisible .isIntersecting（真/假）。
4. 建立與影像具有相同值的選項物件。
5. 新增 useEffect React 鉤子，並使用我們先前建立的回呼函數和選項建立觀察者建構函式。在我們的例子中它是可選的，但它可以傳回一個清理函數來在元件卸載時取消監視我們的目標。
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. 好的，我們快到了，我們只需要在我們的元件中呼叫它，看看它是否有效！

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

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

恭喜，我們已經成功使用了路口觀察器 API，甚至為它創建了一個鉤子！

---

製作人員

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

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

以上是如何在 React 中使用 Intersection Observer的詳細內容。更多資訊請關注PHP中文網其他相關文章！