在現(xiàn)代 Web 開(kāi)發(fā)中，性能優(yōu)化與用戶體驗(yàn)往往是一對(duì)矛盾的統(tǒng)一體。我們既希望一次性給用戶展示海量的數(shù)據(jù)（如社交媒體的動(dòng)態(tài)流），又不希望頁(yè)面因?yàn)榧虞d過(guò)重而卡頓。為了解決這一問(wèn)題，懶加載（Lazy Loading） 和 無(wú)限滾動(dòng)（Infinite Scroll） 應(yīng)運(yùn)而生。

今天，我們將深入剖析一個(gè)基于 React 構(gòu)建的高性能無(wú)限滾動(dòng)組件。它利用現(xiàn)代瀏覽器的 Intersection Observer API，巧妙地替代了傳統(tǒng)的滾動(dòng)監(jiān)聽(tīng)，實(shí)現(xiàn)了既優(yōu)雅又高效的“按需加載”。

組件內(nèi)容

import { useRef,useEffect } from 'react';
// load more 通用組件
interface InfiniteScrollProps {
    hasMore: boolean; // 是否所以數(shù)據(jù)都加載了 分頁(yè)
    isLoading?: boolean; // 滾動(dòng)到底部加載更多 避免重復(fù)觸發(fā)
    onLoadMore: () => void; // 更多加載的一個(gè)抽象 /api/posts?page=2&limit=10
    children: React.ReactNode; // InfiniteScroll 通用的滾動(dòng)功能，滾動(dòng)的具體內(nèi)容接受定制
}
const InfiniteScroll:React.FC<InfiniteScrollProps> = ({
    hasMore,
    isLoading = false,
    onLoadMore,
    children,
}) => {
    // HTMLDivElement React 前端全局提供
    const sentinelRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        // dom, 組件掛載后
        if (!hasMore || isLoading) return; // 沒(méi)有更多數(shù)據(jù)了 或者 加載中 不觸發(fā)
        // IntersectionObserver 沒(méi)有性能問(wèn)題，不需要防抖節(jié)流
        const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) { // 是否進(jìn)入視窗 viewport
                onLoadMore();
            }
        }, {
            threshold: 0, // 視窗進(jìn)入 0% 就觸發(fā)
        }
        );
        if(sentinelRef.current) {
            observer.observe(sentinelRef.current);
        }
        // 組件卸載時(shí)，斷開(kāi)觀察(路由切換時(shí)，需要斷開(kāi)觀察，否則會(huì)重復(fù)觸發(fā))
        return () => {
            if (sentinelRef.current) {
                observer.unobserve(sentinelRef.current);
            }
        }
    },[onLoadMore,hasMore,isLoading])
    // react 不建議直接訪問(wèn)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;

核心概念：什么是 Intersection Observer？

在深入代碼之前，我們需要理解一個(gè)關(guān)鍵概念：Intersection Observer（交叉觀察器） 。

傳統(tǒng)的無(wú)限滾動(dòng)通常通過(guò)監(jiān)聽(tīng) window 的 scroll 事件實(shí)現(xiàn)。但這種做法存在性能隱患，因?yàn)闈L動(dòng)事件觸發(fā)頻率極高，頻繁的 DOM 查詢（getBoundingClientRect）會(huì)導(dǎo)致頁(yè)面卡頓（俗稱“掉幀”）。

Intersection Observer 是現(xiàn)代瀏覽器提供的原生 API，它允許我們異步監(jiān)聽(tīng)目標(biāo)元素是否進(jìn)入視口，且完全不阻塞主線程，無(wú)需手動(dòng)防抖（Debounce）。

核心角色：

1. 目標(biāo)元素（Target）： 我們要觀察的 DOM 節(jié)點(diǎn)。
2. 根元素（Root）： 觀察的容器（通常是視口）。
3. 閾值（Threshold）： 目標(biāo)元素與根元素相交的比例（0-1），達(dá)到該比例時(shí)觸發(fā)回調(diào)。

代碼深度解析

這段代碼實(shí)現(xiàn)了一個(gè)通用的 React 函數(shù)組件，利用 TypeScript 定義了清晰的接口，封裝了無(wú)限滾動(dòng)的邏輯。

1. 接口定義：明確的契約

代碼首先定義了 InfiniteScrollProps 接口，這是組件與外部交互的“契約”：

• hasMore: boolean：數(shù)據(jù)開(kāi)關(guān)。指示是否還有更多數(shù)據(jù)可供加載。如果為 false，則停止一切觀察行為。
• isLoading?: boolean：加載鎖。標(biāo)記當(dāng)前是否正在加載數(shù)據(jù)。這能有效防止用戶在快速滾動(dòng)時(shí)觸發(fā)重復(fù)的請(qǐng)求。
• onLoadMore: () => void：加載回調(diào)。當(dāng)用戶滾動(dòng)到底部時(shí)，組件會(huì)調(diào)用此函數(shù)（通常用于發(fā)起 API 請(qǐng)求，如 /api/posts?page=2&limit=10）。
• children: React.ReactNode：內(nèi)容占位。這是組件最靈活的部分，允許父組件傳入任何需要展示的列表內(nèi)容。

2. 核心邏輯：哨兵模式

組件內(nèi)部使用了經(jīng)典的“哨兵（Sentinel）”模式：

引用創(chuàng)建 (useRef)：

const sentinelRef = useRef<HTMLDivElement>(null);

這里創(chuàng)建了一個(gè)對(duì) DOM 元素的引用，用于后續(xù)的觀察。

副作用管理 (useEffect)：這是組件的“大腦”，負(fù)責(zé)觀察器的生命周期管理：

守門(mén)人邏輯： if (!hasMore || isLoading) return;

如果數(shù)據(jù)已加載完或正在加載中，直接返回，避免無(wú)效的觀察器創(chuàng)建。

觀察器實(shí)例化：

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    onLoadMore(); // 觸發(fā)加載
  }
}, { threshold: 0 });

這里創(chuàng)建了一個(gè)觀察器實(shí)例。threshold: 0 意味著只要哨兵元素有 1 像素進(jìn)入視口，就會(huì)觸發(fā)回調(diào)。

觀察與清理：組件掛載時(shí)開(kāi)始觀察哨兵元素，組件卸載時(shí)（return 函數(shù)）必須調(diào)用 observer.unobserve()。這是為了防止內(nèi)存泄漏和路由切換后的重復(fù)觸發(fā)。

3. JSX 結(jié)構(gòu)：視圖層

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

• {children} ：渲染傳入的列表內(nèi)容。
• 哨兵元素：一個(gè)高度為 4px 的空 div，作為觀察的目標(biāo)。
• 加載反饋：當(dāng) isLoading 為真時(shí)，展示“加載中...”的 UI，給用戶明確的視覺(jué)反饋。

傳統(tǒng)方案 vs. 本方案對(duì)比

為了更直觀地理解這種實(shí)現(xiàn)的優(yōu)勢(shì)，我們可以通過(guò)下表進(jìn)行對(duì)比：

總結(jié)

這個(gè)組件是一個(gè)典型的現(xiàn)代前端開(kāi)發(fā)范例。它通過(guò) TypeScript 提供了類型安全，利用 React Hooks 管理狀態(tài)和副作用，并結(jié)合 Intersection Observer API 解決了性能痛點(diǎn)。

它不僅解決了長(zhǎng)列表的性能瓶頸，還通過(guò)簡(jiǎn)潔的 API 設(shè)計(jì)（hasMore, isLoading, onLoadMore），讓開(kāi)發(fā)者可以輕松地將其集成到博客文章列表、電商商品流等各種場(chǎng)景中。這種“哨兵模式”是目前實(shí)現(xiàn)無(wú)限滾動(dòng)的最佳實(shí)踐之一。

到此這篇關(guān)于使用React打造高性能懶加載無(wú)限滾動(dòng)組件的文章就介紹到這了,更多相關(guān)React懶加載無(wú)限滾動(dòng)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論