React中如何使用单个IntersectionObserver监听多个子元素？

首先明确答案：完全可以使用单个IntersectionObserver实例监听多个子元素，这种方式比为每个元素单独创建观察者性能更好，也是生产环境的常用实现方式。

实现逻辑对齐原生代码 #

你提供的原生JS逻辑完全可以平移到React中，只需要适配React的DOM生命周期，避免直接操作DOM选择节点、做好组件卸载时的内存清理即可。

第一步：编写渐显样式 #

和原生实现的CSS逻辑完全一致：

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.5s ease-out;
}

.fade-in.appear {
  opacity: 1;
  transform: translateY(0);
}

第二步：React组件实现 #

不要用document.querySelectorAll获取元素，React中推荐用ref收集需要监听的DOM节点，避免条件渲染、动态列表下拿到失效的DOM引用：

import { useEffect, useRef } from 'react';

export default function ScrollFadeContainer() {
  // 存Observer实例，保证全组件只创建一个
  const observer = useRef(null);
  // 存所有需要渐显的DOM节点
  const fadeNodes = useRef([]);

  useEffect(() => {
    // 配置项和你原生代码保持一致
    const observerConfig = {
      threshold: 1,
      // 如需提前触发可调整rootMargin，比如 rootMargin: '0px 0px -80px 0px' 代表元素距离视口底部还有80px时就触发
    };

    // 初始化单个观察者实例
    observer.current = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        // 进入视口添加显示类名
        entry.target.classList.add('appear');
        // 触发后取消观察，避免重复执行
        observer.current.unobserve(entry.target);
      });
    }, observerConfig);

    // 批量注册所有需要监听的节点
    fadeNodes.current.forEach(node => {
      node && observer.current.observe(node);
    });

    // 组件卸载时断开所有监听，清理内存
    return () => observer.current?.disconnect();
  }, []);

  // 回调ref，自动收集所有绑定的渐显节点
  const collectFadeNode = (node) => {
    if (node && !fadeNodes.current.includes(node)) {
      fadeNodes.current.push(node);
    }
  };

  return (
    <div className="page-content">
      {/* 任意数量的元素只要绑定collectFadeNode，就会被同一个Observer监听 */}
      <div ref={collectFadeNode} className="fade-in">内容块1</div>
      <div ref={collectFadeNode} className="fade-in">内容块2</div>
      <div ref={collectFadeNode} className="fade-in">内容块3</div>
      {/* 循环渲染的列表也可以直接绑定 */}
      {
        [4,5,6].map(item => (
          <div key={item} ref={collectFadeNode} className="fade-in">内容块{item}</div>
        ))
      }
    </div>
  );
}

关键注意点 #

• 单个IntersectionObserver实例可以同时监听上千个元素，性能远好于多实例方案，不需要为每个元素单独创建观察者。
• 不要在组件每次重渲染时都新建Observer实例，用useRef存储实例可以保证整个组件生命周期内只初始化一次观察者。
• 如果是动态加载的列表（比如下拉加载更多），只需要给新加载的项绑定collectFadeNode即可，新节点会自动被注册到现有观察者上，不需要重新初始化Observer。

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