import { useState, useEffect } from "react"; const App = () => { const [list, setList] = useState>([ { background: "rgb(233,32,38)" } ]); const [loading, setLoading] = useState(false); const [count, setCount] = useState(0); // 模拟后端数据返回 const getList = (num: number): Promise> => { return new Promise((resolve) => { setTimeout(() => { const newList = Array.from({ length: num }, () => ({ background: `rgb(${Math.floor(Math.random() * 256)},${Math.floor( Math.random() * 256 )},${Math.floor(Math.random() * 256)})` })); resolve(newList); }, Math.random() * 5000); }); }; //模拟请求 const fetchData = async () => { if (count >= 50 || loading) return;//超过50条不再发起且如果之前的请求还未完成就不发起下一个 setLoading(true); const newList = await getList(10); setList((prevList) => [...prevList, ...newList]);//处理返回的数据 setCount((prevCount) => prevCount + 10); setLoading(false); }; //第一次渲染触发请求只触发一次 useEffect(() => { fetchData(); }, []); // 监听count,loading useEffect(() => { const handleScroll = () => { // 滚动超过一半且列表长度小于50触发且没有上一个请求请求 if ( window.innerHeight + window.scrollY >= document.body.scrollHeight / 2 && count < 50&& !loading ) { fetchData(); } }; window.addEventListener("scroll", handleScroll);//监听滚动事件 //移除之前添加的滚动事件监听器，防止内存泄漏和多次事件处理 return () => window.removeEventListener("scroll", handleScroll); }, [count,loading]); return (

{list.map((item, index) => (

{index}

))} {loading &&

}

); }; export default App;

作品预览「react虚拟滚动」