首页 > web前端 > js教程 > 如何在 React 中使用 Intersection Observer

如何在 React 中使用 Intersection Observer

Mary-Kate Olsen
发布: 2024-10-25 06:39:02
原创
868 人浏览过

今天我们将通过一些示例来探讨如何在 React 中使用相交观察器 API。

Mozilla Web 文档将交叉观察器 API 描述为:

允许代码注册一个回调函数,每当他们想要监视的元素进入或离开另一个元素(或视口)时,或者当两个元素相交的值改变所请求的量时,该函数就会运行。这样,站点不再需要在主线程上执行任何操作来观察这种类型的元素交集,并且浏览器可以自由地优化其认为合适的交集管理。

简而言之,它允许我们检测某个元素何时在视口中可见,只有当该元素满足所需的交叉比例时才会发生这种情况。

Como utilizar o Intersection Observer no React

如您所见,如果向下滚动页面,交叉比例将会增加,直到达到预计限制,此时会触发执行回调的函数。


第一步

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 中使用

Como utilizar o Intersection Observer no 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 添加一些样式。

Como utilizar o Intersection Observer no React

  1. 这就是我们所需要的,简单又容易!

请记住,这只是一个基本实现,有多种方法可以做到这一点。

Como utilizar o Intersection Observer no React


现在我们将实现与之前相同的代码,但将所有逻辑分离在名为 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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板