import { useCallback, useEffect, useRef, useState, useMemo, memo } from "react"; type ListType = { background: string; id: number; // 添加唯一ID }; const listStyle = { width: "100%", height: "500px", display: "flex", justifyContent: "center", alignItems: "center", fontSize: "50px", }; const getRandomInt = (max: number): number => { return Math.floor(Math.random() * (max + 1)); }; const getRandomRgbColor = (): string => { const r = getRandomInt(255); const g = getRandomInt(255); const b = getRandomInt(255); return `rgb(${r}, ${g}, ${b})`; }; // 使用React.memo包装列表项组件，避免不必要的重渲染 const ListItem = memo(({ item, index }: { item: ListType; index: number }) => { return (

{index}

); }); ListItem.displayName = 'ListItem'; const List = () => { const [data, setData] = useState([]); const [loading, setLoading] = useState(false); const [hasMore, setHasMore] = useState(true); const scrollRef = useRef(null); const observer = useRef(); const loadingRef = useRef(null); // 使用useMemo缓存数据列表的计算结果 const dataList = useMemo(() => { return data.map((item, index) => ( )); }, [data]); const getList = useCallback(() => { if (loading || !hasMore) return; setLoading(true); const items: ListType[] = []; for (let i = 0; i < 10; i++) { items.push({ background: getRandomRgbColor(), id: Date.now() + i // 生成唯一ID }); } setTimeout(() => { setData((prevData) => [...prevData, ...items]); setLoading(false); // 模拟数据加载完毕的情况 if (data.length > 40) { setHasMore(false); } }, 1000); }, [loading, hasMore, data.length]); // 使用Intersection Observer API替代scroll事件 useEffect(() => { if (loading || !hasMore) return; const option = { root: scrollRef.current, rootMargin: '0px', threshold: 0.1 }; observer.current = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { getList(); } }, option); if (loadingRef.current) { observer.current.observe(loadingRef.current); } return () => { if (observer.current) { observer.current.disconnect(); } }; }, [getList, loading, hasMore]); useEffect(() => { // 初始化数据 if (data.length === 0) { setData([{ background: "rgb(233, 32, 38)", id: Date.now() }]); getList(); } }, [data.length, getList]); return (

优化后的无限滚动列表

性能优化：使用React.memo、useMemo、Intersection Observer API

已加载项目数: {data.length}

{dataList}

{loading && (

加载中...

)} {!hasMore && (

已加载全部数据

)}

); }; export default List

作品「React 构建滚动列表」预览