如何在 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中文网其他相关文章！