前端基于 IntersectionObserver 的流畅懒加载实现

一、什么是 IntersectionObserver？

IntersectionObserver 是浏览器原生提供的一个可观察元素可见性变化的 API。简单来说，它能帮我们'监听'某个元素是否出现在视口中。

当元素进入或离开视口时，回调函数会被触发。

核心优势：

• 不需要监听 scroll 事件；
• 浏览器原生支持，性能更好；
• 可配置 rootMargin（提前加载距离）；
• 异步执行，不阻塞主线程。

二、懒加载的常见应用场景

• 图片懒加载：只有当图片进入视口时才加载资源；
• 无限滚动列表：当滚动到底部时，自动加载下一页；
• 广告曝光监测：检测广告区域是否被用户看到。

本文聚焦第二种：滚动到底部自动加载更多数据。

三、功能目标

我们的目标是构建一个'廉政制度'页面，当用户滚动到列表底部时自动加载下一页数据。

主要功能包括：

1. 初次加载数据
2. 输入关键词搜索
3. 滚动到底部触发加载更多
4. 防止首次渲染误触发
5. 数据加载完成后关闭加载提示

四、核心实现代码

来看关键部分的实现逻辑（已省略部分业务代码）：

import { useEffect, useState, useRef, useCallback } from "react";
import { getEthicsRegulationList } from "../../api/backendApi";

function PolicyList() {
  const [regulations, setRegulations] = useState([]);
  const [page, setPage] = useState(0);
  const [hasMore, setHasMore] = useState(true);
  const observerRef = useRef(null);
  const firstLoadRef = useRef(true); // ✅ 初次加载保护标志

  
   fetchData = ( (reset = ) => {
     res =  ({ page, :  });
     (reset) {
      (res. || []);
    }  {
      ( [...prev, ...(res. || [])]);
    }
    (!res.);
  }, [page]);

  
  ( {
    ();
  }, []);

  
  ( {
     (!observerRef.) ;
     observer =  ( {
       entry = entries[];
      
       (entry. && hasMore && !firstLoadRef.) {
        ( prev + );
      }
    }, { :  }); 
    observer.(observerRef.);
      observer.();
  }, [hasMore]);

  
  ( {
     (page === ) ;
    ();
  }, [page]);

  
  ( {
     (regulations. > ) {
      firstLoadRef. = ;
    }
  }, [regulations]);

   (
    
  );
}

  ;