通过使用React和IntersectionObserver实现的三个强大的功能！

1 年 ago

科, 雅

2 minutes

有一个API叫IntersectionObserver，它可以监视一个要素是否在视口内。如果将它与React结合使用，可以显著提升用户体验。在本文中，我们将介绍如何充分发挥这种组合的力量！

IntersectionObserver是什么？

IntersectionObserver是一种用于监视特定元素进入或离开视口（显示区域）的API。通过这种方式，可以有效地控制元素的显示/隐藏，并触发特定的操作。

使用React基本方法使用IntersectionObserver

在使用React中的IntersectionObserver时，主要是将useRef和useEffect结合使用。通过useRef获取DOM元素，并在useEffect内设置一个观察器来监视该元素。

实践！三个特点

1. 惰性加载

懒加载是一种技术，它不是在页面加载时立即加载元素（尤其是图片和视频），而是在需要时（例如：滚动页面使元素接近视窗时）进行加载。

代码示例

import React, { useState, useEffect, useRef } from 'react';

function LazyImage({ src, alt, ...props }) {
  const [isLoaded, setIsLoaded] = useState(false);
  const imgRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        imgRef.current.src = src;
        imgRef.current.onload = () => setIsLoaded(true);
        observer.disconnect();
      }
    });

    observer.observe(imgRef.current);

    return () => observer.disconnect();
  }, [src]);

  return <img ref={imgRef} alt={alt} {...props} style={isLoaded ? {} : { opacity: 0 }} />;
}

解释 (jiě shì)

useStateで画像の読み込み状態を管理します。

useRefを使って画像要素への参照を保持します。

useEffect内で、要素がビューポート内に入ったかどうかを監視するオブザーバーを設定します。
画像がビューポート内に入ると、実際のsrcを設定し、画像を読み込みます。

2. 无限滚动

当滚动到页面底部时，会自动加载下一段内容的技术，这在社交媒体等平台上经常见到。

代码示例

import React, { useState, useEffect, useRef } from 'react';

function InfinityScroll({ fetchData }) {
  const [items, setItems] = useState([]);
  const loadingRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(async ([entry]) => {
      if (entry.isIntersecting) {
        const newItems = await fetchData();
        setItems(prevItems => [...prevItems, ...newItems]);
      }
    });

    if (loadingRef.current) {
      observer.observe(loadingRef.current);
    }

    return () => observer.disconnect();
  }, [fetchData]);

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
      <div ref={loadingRef}>Loading...</div>
    </div>
  );
}

说明

この要素がビューポート内に入ると、次のデータをフェッチし、既存のアイテムリストに追加します。

广告显示率测量

测量广告在视口中显示了多少时间。这在广告的计费标准等方面可能会被使用。

示例代码

import React, { useEffect, useRef } from 'react';

function AdComponent({ src }) {
  const adRef = useRef(null);
  const startTimeRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        startTimeRef.current = new Date();
      } else if (startTimeRef.current) {
        const duration = new Date() - startTimeRef.current;
        console.log(`Ad was visible for ${duration}ms`);
        startTimeRef.current = null;
      }
    });

    if (adRef.current) {
      observer.observe(adRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return <img ref={adRef} src={src} alt="Advertisement" />;
}

说明

広告がビューポートから出ると、表示された時間を計算し、それをログに出力します。

总结

只需结合React和IntersectionObserver，就可以轻松实现非常强大的功能。请参考上述示例并尝试将其应用到您的项目中！

目录

IntersectionObserver是什么？

使用React基本方法使用IntersectionObserver

实践！三个特点

1. 惰性加载

代码示例

解释 (jiě shì)

2. 无限滚动

代码示例

说明

广告显示率测量

示例代码

说明

总结