import { useState, useEffect, useRef } from 'react';
function InfiniteScrollList() {
  const [data, setData] = useState([]); // 當(dāng)前數(shù)據(jù)
  const [page, setPage] = useState(1);  // 當(dāng)前頁碼
  const [loading, setLoading] = useState(false); // 加載狀態(tài)
  const [hasMore, setHasMore] = useState(true);  // 是否還有更多數(shù)據(jù)
  const sentinelRef = useRef(null); // 哨兵元素的 ref
  // 模擬異步加載數(shù)據(jù)
  const fetchData = async () => {
    if (loading || !hasMore) return;
    setLoading(true);
    // 模擬 API 請(qǐng)求（替換為實(shí)際接口）
    const mockData = Array.from({ length: 10 }, (_, i) => 
      `Item ${(page - 1) * 10 + i + 1}`
    );
    // 模擬延遲
    await new Promise(resolve => setTimeout(resolve, 1000));
    setData(prev => [...prev, ...mockData]);
    setPage(prev => prev + 1);
    setLoading(false);
    // 假設(shè)第 5 頁后無數(shù)據(jù)
    if (page >= 5) setHasMore(false);
  };
  // 初始化 IntersectionObserver
  useEffect(() => {
    if (!sentinelRef.current || !hasMore) return;
    const observer = new IntersectionObserver(
      (entries) => {
        const [entry] = entries;
        if (entry.isIntersecting) {
          fetchData(); // 觸底時(shí)加載數(shù)據(jù)
        }
      },
      { threshold: 1.0 } // 當(dāng)哨兵元素完全進(jìn)入視口時(shí)觸發(fā)
    );
    observer.observe(sentinelRef.current);
    return () => {
      if (sentinelRef.current) observer.unobserve(sentinelRef.current);
    };
  }, [page, hasMore, loading]); // 依賴項(xiàng)
  return (
    <div style={{ maxHeight: '400px', overflow: 'auto' }}>
      <h2>無限滾動(dòng)列表</h2>
      <ul>
        {data.map((item, index) => (
          <li key={index} style={{ padding: '10px', borderBottom: '1px solid #eee' }}>
            {item}
          </li>
        ))}
      </ul>
      {/* 哨兵元素：用于檢測(cè)觸底 */}
      <div ref={sentinelRef} style={{ height: '20px' }}>
        {loading && <p>加載中...</p>}
        {!hasMore && <p>沒有更多數(shù)據(jù)了</p>}
      </div>
    </div>
  );
}
export default InfiniteScrollList;

import { useEffect, useRef } from 'react'
const InfiniteScroll = (props) => {
  // children 可以設(shè)置觸底時(shí)顯示的提示文字，加載狀態(tài)等
  // loadMore 加載數(shù)據(jù)的接口方法
  // hasMore 檢查數(shù)據(jù)是否全部加載完畢，分頁加載之后還有下一頁數(shù)據(jù)保持 true 不變，確保后續(xù)不會(huì)再有數(shù)據(jù)則為 false
  // rootElement 瀏覽器可視窗口或者自定義滾動(dòng)視口
  const { children, loadMore, hasMore, rootElement = null } = props
  const sentinelRef = useRef(null)
  useEffect(() => {
    if (!sentinelRef.current || !hasMore) return;
    const observer = new window.IntersectionObserver(
      ([{isIntersecting}]) => {
        if (isIntersecting) {
          // 加載數(shù)據(jù)接口調(diào)用，當(dāng)該組件進(jìn)入瀏覽器視口時(shí)就會(huì)觸發(fā)
          loadMore()
        }
      },
      { threshold: 1.0, root: rootElement }
    );
    observer.observe(sentinelRef.current);
    return () => {
      if (sentinelRef.current) observer.unobserve(sentinelRef.current);
    };
  }, [hasMore])
  return (
  	// 哨兵容器，目標(biāo)元素，用來監(jiān)聽是否加載數(shù)據(jù)，目標(biāo)元素與視口交叉 isIntersecting 值就會(huì)變化
    <div ref={sentinelRef} style={{ minHeight: '2px', textAlign: 'center' }}>
      {children}
    </div>
  )
}
export default InfiniteScroll

const CustomComponent = () => {
  // 加載數(shù)據(jù)函數(shù)
  const loadMore = () => {
    // ...
  }
  return (
    <>
      // ...
      // 循環(huán)數(shù)據(jù)，將組件放置在循環(huán)數(shù)據(jù)的底部即可
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
        {hasMore && <Spin indicator={<LoadingOutlined spin />} size="large" />}
      </InfiniteScroll>
      // ...
    </>
  )
}