使用 React 的交叉口观察器

今天我们将探索如何在 React 中使用交叉观察者 API 并查看一些有用的示例，您可以在以下存储库中找到代码，让我们开始吧。

Mozilla 网络文档将交叉口观察器 API 描述为：

让代码注册一个回调函数，每当需要监控的元素进入或退出另一个元素（或视口），或者两者相交的量达到请求的量时，该函数就会执行。这样，网站不再需要在主线程上执行任何操作来监控此类元素相交，浏览器可以根据需要自由地优化相交管理。

用简单的英语来说，它允许我们检测某些元素何时在我们的视口中可见，这只有当元素满足所需的交叉比时才会发生。

如您所见，如果我们向下滚动页面，交集率将会上升，直到达到设计的阈值，此时回调函数就会被执行。

初始化

交叉口观察器对象构造函数需要两个参数：

1. 回调函数
2. 选项

就像这样，我们已经准备好看到一些动作，但首先我们需要知道每个选项的含义，选项参数是一个具有以下值的对象：

• root：用于检查目标可见性的视口元素。必须是目标的祖先元素。如果未指定或为 null，则默认为浏览器视口。
• rootMargin：这组值用于在计算交点之前增大或缩小根元素边界框的每一边，选项类似于 CSS 中的 margin 选项。
• 阈值：单个数字或数字数组，指示应在目标可见性的百分比下执行观察者的回调，范围从 0 到 1.0，其中 1.0 表示每个像素在视口中可见。

使用 React.js

动图

现在让我们看看使用 React 实现的交叉口观察者 API。

1. 从我们想要观察的元素的引用开始，使用 react hook useRef。
2. 创建一个状态变量isVisible，当我们的框位于视口中时，我们将使用它来显示一条消息。
3. 声明一个回调函数，该函数接收 IntersectionObserverEntries 数组作为参数，在这个函数中，我们获取第一个也是唯一的条目并检查是否与视口相交，如果是，则我们使用(true/false)setIsVisible的值进行调用entry.isIntersecting。
4. 创建具有与图像相同值的选项对象。
5. 添加反应钩子useEffect并使用回调函数和我们之前刚刚创建的选项创建一个观察者构造函数，在我们的例子中它是可选的，但你可以在组件卸载时返回一个清理函数来取消观察我们的目标。
6. 在我们想要观察的元素上设置useRef变量。
7. 让我们为 HTML 元素添加背景和一些属性
8. 完成了，简单又轻松！

请记住，这只是一个基本的实现，还有很多不同的方法可以实现它。

连接起来

动图

现在让我们实现之前提到的相同代码，但将所有逻辑分离到一个名为的新钩子中useElementOnScreen。

1. 创建一个名为“ optionsuseElementOnScreen ”的新函数
2. 将useRef、useState和整个useEffect移到我们新的闪亮钩子内。
3. 现在我们的钩子中唯一缺少的是返回语句，我们将isVisible它containerRef作为数组传递。
4. 好的，我们快完成了，我们只需要在我们的组件中调用它，看看它是否有效！

1. 将最近创建的钩子文件导入到我们的组件中。
2. 使用选项对象初始化它。
3. 就这样我们就完成了。

恭喜，我们已经成功使用了交叉口观察器 API，甚至还为它制作了一个钩子！

最后的话

感谢您阅读本文，希望它能帮助某人开始使用 React 的 IO API，注意安全❤️！

动图