如何在用户滚动页面时判断React组件是否可见

嘿，这个需求我之前做过类似的，用Intersection Observer API来实现是最优解，比监听scroll事件性能好太多，不会造成频繁的重绘或计算。下面给你一步步拆解实现方式：

我们会封装一个可复用的React自定义Hook，然后在遍历JSON渲染的组件中使用它来追踪可见性状态。

1. 封装监听可见性的自定义Hook #

这个Hook会帮我们处理Intersection Observer的初始化、监听和清理逻辑，直接在组件里调用就行：

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

const useIntersectionObserver = (options = {}) => {
  const [isVisible, setIsVisible] = useState(false);
  const elementRef = useRef(null);

  useEffect(() => {
    // 初始化观察者，监听元素可见性变化
    const observer = new IntersectionObserver(([entry]) => {
      setIsVisible(entry.isIntersecting);
    }, options);

    const currentElement = elementRef.current;
    if (currentElement) {
      observer.observe(currentElement);
    }

    // 组件卸载时停止监听，避免内存泄漏
    return () => {
      if (currentElement) {
        observer.unobserve(currentElement);
      }
    };
  }, [options]);

  return [elementRef, isVisible];
};

2. 在遍历渲染的组件中使用Hook #

假设你从接口拿到的JSON是一个数组，每个项对应一个要渲染的组件，我们在子组件里引入上面的Hook，就能实时拿到可见状态：

// 单个列表项组件
const ListItem = ({ item }) => {
  // 自定义监听选项：元素50%可见时触发状态更新
  const [itemRef, isVisible] = useIntersectionObserver({
    threshold: 0.5,
    rootMargin: '0px' // 可以设置正负边距，提前/延后触发监听
  });

  // 监听可见状态变化，做你需要的追踪操作
  useEffect(() => {
    if (isVisible) {
      console.log(`组件ID: ${item.id} 已进入视野`);
      // 这里可以加入你的业务逻辑：比如上报统计、加载额外数据等
    } else {
      console.log(`组件ID: ${item.id} 已离开视野`);
    }
  }, [isVisible, item.id]);

  return (
    <div ref={itemRef} className="list-item">
      <h4>{item.title}</h4>
      <p>{item.content}</p>
    </div>
  );
};

// 父组件：遍历JSON数据渲染列表
const ItemList = ({ jsonResponse }) => {
  return (
    <div className="item-container">
      {jsonResponse.map(item => (
        <ListItem key={item.id} item={item} />
      ))}
    </div>
  );
};

3. 自定义监听参数说明 #

你可以根据需求调整useIntersectionObserver的选项：

• root：指定监听的根容器（默认是浏览器视口），比如如果组件在一个滚动容器里，就传这个容器的ref
• rootMargin：给根容器添加边距，比如"-50px"表示元素进入视口前50px就触发可见状态，"50px"表示元素进入视口后50px才触发
• threshold：触发状态变化的可见比例，0=只要有像素可见就触发，1=完全可见才触发，0.3=30%可见时触发

一些注意事项 #

• 一定要给列表项加唯一的key，这是React列表渲染的基本要求，避免不必要的组件重渲染
• 如果需要追踪第一次可见的状态，可以在Hook里加一个hasBeenVisible状态，避免重复上报
• Intersection Observer是浏览器原生API，兼容性很好，不需要额外polyfill（除非要兼容IE11及更早版本）

内容的提问来源于stack exchange，提问作者Praveen Kumar