通過React實現頁面的無限滾動效果

更新時間：2025年09月23日 10:39:48 作者：bug_kada

今天我們來聊聊無限滾動這個現代Web開發(fā)中不可或缺的技術,無論你是刷微博、逛知乎還是看腳本,無限滾動都已經滲透到我們日常的瀏覽體驗中,那么,如何優(yōu)雅地實現它呢？讓我們一起來探索吧,感興趣的小伙伴跟著小編一起來看看吧

1. 早期的解決方案

在IntersectionObserver出現之前，實現無限滾動主要依靠監(jiān)聽滾動事件。我們來回顧一下那段“艱苦”的歲月：

window.addEventListener('scroll', function() {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    // 觸發(fā)加載更多
    loadMoreData();
  }
});

這種方式雖然簡單，但存在明顯的性能問題：滾動事件觸發(fā)過于頻繁，容易導致頁面卡頓。而且我們需要手動計算各種高度，代碼既繁瑣又容易出錯。

2. 交叉觀察者：IntersectionObserver

IntersectionObserver是現代瀏覽器提供的一個強大API，它就像是在頁面上安插了一個"偵察兵"，可以精準地觀察元素是否進入可視區(qū)域。

2.1 IntersectionObserverEntry對象

當被觀察的元素與視口發(fā)生交叉時，你會收到一個IntersectionObserverEntry對象，它包含了許多有用信息：

{
  time: 3893.92,           // 發(fā)生交叉的時間戳
  rootBounds: DOMRectReadOnly, // 根元素的矩形區(qū)域信息
  boundingClientRect: DOMRectReadOnly, // 目標元素的矩形區(qū)域信息
  intersectionRect: DOMRectReadOnly,   // 交叉區(qū)域信息
  isIntersecting: true,     // 是否正在交叉
  intersectionRatio: 0.54,  // 交叉比例
  target: element          // 被觀察的目標元素
}

2.2 options配置項

創(chuàng)建觀察者時，我們可以進行精細化的配置：

const options = {
  root: null,        // 根元素，null表示視口
  rootMargin: '0px', // 根元素的外邊距
  threshold: 0.1     // 閾值，可以是數組[0, 0.25, 0.5, 0.75, 1]
};

2.3 observer觀察者實例

創(chuàng)建觀察者實例非常簡單：

const observer = new IntersectionObserver(callback, options);

3. 在React Hook中的實戰(zhàn)應用

現在讓我們看看如何在React函數組件中優(yōu)雅地實現無限滾動。

useState聲明狀態(tài)變量

useState的簡單理解:

useState就像是給組件添加的"記憶功能"，它讓函數組件能夠記住自己的狀態(tài)。

const [data, setData] = useState([]);        // 數據列表
const [loading, setLoading] = useState(false); // 加載狀態(tài)
const [hasMore, setHasMore] = useState(true);  // 是否還有更多數據

變量解析

data: 存儲已加載的數據
loading: 防止重復請求的"開關"
hasMore: 告訴組件是否還有數據可加載

useRef定義追蹤的DOM元素

useRef就像是給DOM元素貼上的"便利貼"，讓我們可以在組件重新渲染后仍然能找到它：

const loaderRef = useRef(null);

內部操作方法和useEffect

這里是核心邏輯所在：

useEffect(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting && hasMore && !loading) {
        loadMoreData();
      }
    },
    { threshold: 0.1 }
  );

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

  return () => {
    if (loaderRef.current) {
      observer.unobserve(loaderRef.current);
    }
  };
}, [loading, hasMore]);

加載數據的函數：

const loadMoreData = async () => {
  setLoading(true);
  try {
    const newData = await fetchData(); // 你的API調用
    setData(prev => [...prev, ...newData]);
    setHasMore(newData.length > 0);
  } catch (error) {
    console.error('加載失敗:', error);
  } finally {
    setLoading(false);
  }
};

渲染界面

最后，我們來完成組件的渲染部分：

return (
  <div className="infinite-scroll-container">
    {data.map(item => (
      <div key={item.id} className="item">
        {/* 你的項目內容 */}
      </div>
    ))}
    
    <div ref={loaderRef} className="loader">
      {loading && <div>加載中...</div>}
      {!hasMore && <div>沒有更多內容了</div>}
    </div>
  </div>
);