使用React打造高性能懒加载无限滚动组件

import { useRef,useEffect } from 'react';
// load more 通用组件
interface InfiniteScrollProps {
    hasMore: boolean; // 是否所以数据都加载了 分页
    isLoading?: boolean; // 滚动到底部加载更多 避免重复触发
    onLoadMore: () => void; // 更多加载的一个抽象 /api/posts?page=2&limit=10
    children: React.ReactNode; // InfiniteScroll 通用的滚动功能，滚动的具体内容接受定制
}
const InfiniteScroll:React.FC<InfiniteScrollProps> = ({
    hasMore,
    isLoading = false,
    onLoadMore,
    children,
}) => {
    // HTMLDivElement React 前端全局提供
    const sentinelRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        // dom, 组件挂载后
        if (!hasMore || isLoading) return; // 没有更多数据了 或者 加载中 不触发
        // IntersectionObserver 没有性能问题，不需要防抖节流
        const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) { // 是否进入视窗 viewport
                onLoadMore();
            }
        }, {
            threshold: 0, // 视窗进入 0% 就触发
        }
        );
        if(sentinelRef.current) {
            observer.observe(sentinelRef.current);
        }
        // 组件卸载时，断开观察(路由切换时，需要断开观察，否则会重复触发)
        return () => {
            if (sentinelRef.current) {
                observer.unobserve(sentinelRef.current);
            }
        }
    },[onLoadMore,hasMore,isLoading])
    // react 不建议直接访问dom，useRef
    return (
        <>
            {children}
            {/* Intersection Observer 哨兵元素 */}
        <div ref={sentinelRef} className="h-4" />
        {
            isLoading && (
                <div className='text-center py-4 text-sm text-muted-foreground'>
                    加载中...
                </div>
            )
        }
        </>
    )
}
export default InfiniteScroll;

const sentinelRef = useRef<HTMLDivElement>(null);

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    onLoadMore(); // 触发加载
  }
}, { threshold: 0 });

return (
  <>
    {children}
    <div ref={sentinelRef} className="h-4" />
    { isLoading && <div>加载中...</div> }
  </>
)