# npm 安裝
npm install react-infinite-scroll-component --save
# yarn 安裝
yarn add react-infinite-scroll-component

import React, { useState, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
const BasicInfiniteScroll = () => {
  // 1. 狀態(tài)管理：列表數(shù)據(jù)、是否有更多數(shù)據(jù)
  const [list, setList] = useState<number[]>([]);
  const [hasMore, setHasMore] = useState<boolean>(true);
  const [page, setPage] = useState<number>(1); // 分頁參數(shù)
  // 2. 初始化加載第一頁數(shù)據(jù)
  useEffect(() => {
    fetchData(page);
  }, [page]);
  // 3. 模擬接口請求：獲取列表數(shù)據(jù)
  const fetchData = async (currentPage: number) => {
    try {
      // 模擬接口延遲（實際項目替換為真實接口請求）
      const response = await new Promise<number[]>((resolve) => {
        setTimeout(() => {
          // 生成 10 條模擬數(shù)據(jù)
          const newData = Array.from({ length: 10 }, (_, i) => (currentPage - 1) * 10 + i + 1);
          resolve(newData);
        }, 800);
      });
      // 更新列表數(shù)據(jù)
      setList(prev => [...prev, ...response]);
      // 控制是否還有更多數(shù)據(jù)（示例：最多加載 5 頁）
      if (currentPage >= 5) {
        setHasMore(false);
      }
    } catch (err) {
      console.error('數(shù)據(jù)加載失?。?, err);
    }
  };
  // 4. 加載更多回調(diào)：觸發(fā)下一頁數(shù)據(jù)請求
  const fetchMoreData = () => {
    setPage(prev => prev + 1); // 頁碼 +1，觸發(fā) useEffect 重新請求
  };
  return (
    <div style={{ padding: '20px' }}>
      <h2>基礎(chǔ)無限滾動示例</h2>
      {/* 5. 無限滾動組件 */}
      <InfiniteScroll
        dataLength={list.length} // 已加載數(shù)據(jù)的長度（用于判斷是否觸發(fā)加載）
        next={fetchMoreData} // 滾動到底部時觸發(fā)的“加載更多”回調(diào)
        hasMore={hasMore} // 是否還有更多數(shù)據(jù)（false 時停止觸發(fā) next）
        loader={<h4 style={{ textAlign: 'center', padding: '20px' }}>加載中...</h4>} // 加載中提示組件
        endMessage={
          <p style={{ textAlign: 'center', padding: '20px', color: '#666' }}>
            <b>已加載全部數(shù)據(jù)</b>
          </p>
        } // 無更多數(shù)據(jù)時的提示
      >
        {/* 6. 列表內(nèi)容 */}
        <ul style={{ listStyle: 'none', padding: 0 }}>
          {list.map((item) => (
            <li
              key={item}
              style={{
                padding: '15px',
                margin: '10px 0',
                border: '1px solid #eee',
                borderRadius: '4px',
              }}
            >
              列表項 {item}
            </li>
          ))}
        </ul>
      </InfiniteScroll>
    </div>
  );
};
export default BasicInfiniteScroll;

// 自定義滾動容器（固定高度 500px，超出滾動）
<div id="customScrollContainer" style={{ height: '500px', overflow: 'auto', border: '1px solid #eee' }}>
  <InfiniteScroll
    scrollableTarget="customScrollContainer" // 綁定自定義容器的 id
    dataLength={list.length}
    next={fetchMoreData}
    hasMore={hasMore}
    loader={<div style={{ textAlign: 'center', padding: '20px' }}>加載中...</div>}
    endMessage={<div style={{ textAlign: 'center', padding: '20px' }}>已加載全部</div>}
  >
    {/* 列表內(nèi)容 */}
    <ul>
      {list.map(item => (
        <li key={item} style={{ padding: '15px', borderBottom: '1px solid #eee' }}>
          自定義容器列表項 {item}
        </li>
      ))}
    </ul>
  </InfiniteScroll>
</div>

<InfiniteScroll
  dataLength={list.length}
  next={fetchMoreData}
  hasMore={hasMore}
  threshold={300} // 距離底部 300px 時觸發(fā)加載（適合大列表或慢網(wǎng)絡(luò)）
  loader={<div>加載中...</div>}
>
  {/* 列表內(nèi)容 */}
</InfiniteScroll>

import React, { useState, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
const ChatInfiniteScroll = () => {
  const [messages, setMessages] = useState<string[]>([]);
  const [hasMore, setHasMore] = useState<boolean>(true);
  const [page, setPage] = useState<number>(1);
  // 初始化加載最新消息（第 1 頁）
  useEffect(() => {
    fetchChatHistory(page);
  }, [page]);
  // 模擬加載聊天歷史記錄（頁號越小，消息越新）
  const fetchChatHistory = async (currentPage: number) => {
    await new Promise<void>((resolve) => {
      setTimeout(() => {
        const newMessages = Array.from({ length: 5 }, (_, i) => 
          `歷史消息 ${(currentPage - 1) * 5 + i + 1}（頁 ${currentPage}）`
        );
        setMessages(prev => [...newMessages, ...prev]); // 新消息添加到數(shù)組頭部（反向）
        // 最多加載 4 頁歷史消息
        if (currentPage >= 4) {
          setHasMore(false);
        }
        resolve();
      }, 800);
    });
  };
  // 滾動到頂部時加載更多歷史消息
  const fetchMoreHistory = () => {
    setPage(prev => prev + 1);
  };
  return (
    <div style={{ height: '600px', border: '1px solid #eee', borderRadius: '4px' }}>
      <h3 style={{ padding: '10px', borderBottom: '1px solid #eee' }}>聊天窗口</h3>
      {/* 反向滾動容器 */}
      <InfiniteScroll
        scrollableTarget="chatContainer" // 自定義滾動容器 id
        dataLength={messages.length}
        next={fetchMoreHistory}
        hasMore={hasMore}
        reverse={true} // 啟用反向滾動（頂部加載更多）
        loader={<div style={{ textAlign: 'center', padding: '10px' }}>加載更早的消息...</div>}
        endMessage={<div style={{ textAlign: 'center', padding: '10px', color: '#666' }}>已加載全部歷史消息</div>}
      >
        <div id="chatContainer" style={{ height: '540px', overflow: 'auto', padding: '10px' }}>
          {messages.map((msg, index) => (
            <div
              key={index}
              style={{
                margin: '8px 0',
                padding: '8px 12px',
                backgroundColor: '#f5f5f5',
                borderRadius: '8px',
                maxWidth: '80%',
              }}
            >
              {msg}
            </div>
          ))}
        </div>
      </InfiniteScroll>
    </div>
  );
};
export default ChatInfiniteScroll;

const PullRefreshAndInfinite = () => {
  const [list, setList] = useState<number[]>([]);
  const [hasMore, setHasMore] = useState<boolean>(true);
  const [page, setPage] = useState<number>(1);
  const [pullDownToRefresh, setPullDownToRefresh] = useState<boolean>(false); // 控制下拉刷新狀態(tài)
  // 初始化加載
  useEffect(() => {
    fetchData(page);
  }, [page]);
  // 加載列表數(shù)據(jù)
  const fetchData = async (currentPage: number) => {
    await new Promise<void>((resolve) => {
      setTimeout(() => {
        const newData = Array.from({ length: 10 }, (_, i) => (currentPage - 1) * 10 + i + 1);
        setList(prev => currentPage === 1 ? newData : [...prev, ...newData]); // 第一頁覆蓋，后續(xù)頁追加
        setHasMore(currentPage < 5);
        resolve();
      }, 800);
    });
  };
  // 加載更多（滾動到底部）
  const fetchMoreData = () => {
    setPage(prev => prev + 1);
  };
  // 下拉刷新（更新最新數(shù)據(jù)）
  const handlePullDownRefresh = async () => {
    setPullDownToRefresh(true); // 顯示“刷新中”狀態(tài)
    await fetchData(1); // 重新請求第一頁數(shù)據(jù)（最新數(shù)據(jù)）
    setPullDownToRefresh(false); // 結(jié)束刷新
  };
  return (
    <InfiniteScroll
      dataLength={list.length}
      next={fetchMoreData}
      hasMore={hasMore}
      loader={<div style={{ textAlign: 'center', padding: '20px' }}>加載中...</div>}
      endMessage={<div style={{ textAlign: 'center', padding: '20px' }}>已加載全部</div>}
      // 下拉刷新配置
      pullDownToRefresh={pullDownToRefresh}
      pullDownToRefreshContent={<div style={{ textAlign: 'center', padding: '20px' }}>下拉可刷新</div>}
      releaseToRefreshContent={<div style={{ textAlign: 'center', padding: '20px' }}>釋放即可刷新</div>}
      onPullDownRefresh={handlePullDownRefresh}
    >
      <ul style={{ listStyle: 'none', padding: '0 20px' }}>
        {list.map(item => (
          <li
            key={item}
            style={{ padding: '15px', margin: '10px 0', borderBottom: '1px solid #eee' }}
          >
            帶下拉刷新的列表項 {item}
          </li>
        ))}
      </ul>
    </InfiniteScroll>
  );
};
export default PullRefreshAndInfinite;

const RetryOnFail = () => {
  const [list, setList] = useState<number[]>([]);
  const [hasMore, setHasMore] = useState<boolean>(true);
  const [page, setPage] = useState<number>(1);
  const [isLoading, setIsLoading] = useState<boolean>(false); // 加載中狀態(tài)（防止重復(fù)請求）
  const [loadError, setLoadError] = useState<boolean>(false); // 加載失敗狀態(tài)
  // 初始化加載
  useEffect(() => {
    fetchData(page);
  }, [page]);
  // 數(shù)據(jù)請求邏輯（含失敗處理）
  const fetchData = async (currentPage: number) => {
    setIsLoading(true);
    setLoadError(false); // 重置失敗狀態(tài)
    try {
      const response = await new Promise<number[]>((resolve, reject) => {
        setTimeout(() => {
          // 模擬 30% 概率請求失敗
          if (Math.random() < 0.3) {
            reject(new Error('接口請求失敗'));
          } else {
            const newData = Array.from({ length: 10 }, (_, i) => (currentPage - 1) * 10 + i + 1);
            resolve(newData);
          }
        }, 800);
      });
      setList(prev => [...prev, ...response]);
      setHasMore(currentPage < 5);
    } catch (err) {
      console.error('加載失?。?, err);
      setLoadError(true); // 標(biāo)記加載失敗
    } finally {
      setIsLoading(false); // 結(jié)束加載狀態(tài)
    }
  };
  // 加載更多（僅當(dāng)非加載中、非失敗時觸發(fā)）
  const fetchMoreData = () => {
    if (!isLoading && !loadError) {
      setPage(prev => prev + 1);
    }
  };
  // 重試加載當(dāng)前頁
  const retryLoad = () => {
    fetchData(page);
  };
  return (
    <InfiniteScroll
      dataLength={list.length}
      next={fetchMoreData}
      hasMore={hasMore && !loadError} // 失敗時停止觸發(fā)自動加載
      disableScroll={isLoading || loadError} // 加載中/失敗時禁用滾動觸發(fā)
      // 加載中/失敗 UI 切換
      loader={isLoading ? <div style={{ textAlign: 'center', padding: '20px' }}>加載中...</div> : null}
      endMessage={
        hasMore ? null : (
          <div style={{ textAlign: 'center', padding: '20px', color: '#666' }}>已加載全部數(shù)據(jù)</div>
        )
      }
    >
      <ul style={{ listStyle: 'none', padding: '0 20px' }}>
        {list.map(item => (
          <li
            key={item}
            style={{ padding: '15px', margin: '10px 0', border: '1px solid #eee', borderRadius: '4px' }}
          >
            支持重試的列表項 {item}
          </li>
        ))}
        {/* 加載失敗提示與重試按鈕 */}
        {loadError && (
          <div style={{ textAlign: 'center', padding: '20px' }}>
            <p style={{ color: 'red' }}>加載失敗，請重試</p>
            <button
              onClick={retryLoad}
              style={{
                padding: '8px 16px',
                margin: '10px 0',
                border: 'none',
                backgroundColor: '#007bff',
                color: 'white',
                borderRadius: '4px',
                cursor: 'pointer',
              }}
            >
              重試加載
            </button>
          </div>
        )}
      </ul>
    </InfiniteScroll>
  );
};
export default RetryOnFail;

# 安裝 react-window
npm install react-window --save

import { FixedSizeList as List } from 'react-window';
import InfiniteScroll from 'react-infinite-scroll-component';
const VirtualizedInfiniteScroll = () => {
  const [list, setList] = useState<number[]>([]);
  const [hasMore, setHasMore] = useState<boolean>(true);
  const [page, setPage] = useState<number>(1);
  // 數(shù)據(jù)請求邏輯（同前）
  useEffect(() => {
    fetchData(page);
  }, [page]);
  const fetchData = async (currentPage: number) => {
    // 模擬數(shù)據(jù)請求...
    const newData = Array.from({ length: 20 }, (_, i) => (currentPage - 1) * 20 + i + 1);
    setList(prev => [...prev, ...newData]);
    setHasMore(currentPage < 10);
  };
  const fetchMoreData = () => {
    setPage(prev => prev + 1);
  };
  // 渲染單個列表項（react-window 要求）
  const renderListItem = ({ index, style }: { index: number; style: React.CSSProperties }) => {
    const item = list[index];
    return (
      <div style={{ ...style, padding: '15px', borderBottom: '1px solid #eee' }}>
        虛擬滾動列表項 {item}
      </div>
    );
  };
  return (
    <InfiniteScroll
      dataLength={list.length}
      next={fetchMoreData}
      hasMore={hasMore}
      loader={<div style={{ textAlign: 'center', padding: '20px' }}>加載中...</div>}
      endMessage={<div style={{ textAlign: 'center', padding: '20px' }}>已加載全部</div>}
    >
      {/* 虛擬滾動列表：僅渲染可視區(qū)域內(nèi)的項（高度 500px，每項高度 60px） */}
      <List
        height={500}
        width="100%"
        itemCount={list.length}
        itemSize={60} // 每項固定高度
      >
        {renderListItem}
      </List>
    </InfiniteScroll>
  );
};
export default VirtualizedInfiniteScroll;