本文是深入淺出 ahooks 原始碼系列文章的第十七篇，該系列已整理成檔案-地址。覺得還不錯，給個 star 支援一下哈，Thanks。
useInfiniteScroll 封裝了常見的無限捲動邏輯。
詳細可看官網
注意：這裡的無限捲動指的是常見的點選載入更多或者說下拉載入更加功能，而不是虛擬捲動，虛擬捲動後面會講到。
實現原理：使用了 useRequest hook 負責進行請求後臺資料。其中 reloadAsync 對應 useRequest 的 runAsync，reload 對應 useRequest 的 run。前者返回 Promise，需要自行處理異常。後者內部已經做了例外處理。
另外假如傳入 target 和 isNoMore 引數，通過監聽 scroll 事件，判斷是否捲動到指定的位置（支援設定 threshold 值-距離底部距離閾值），進行自動發起載入更多請求，從而實現捲動自動載入效果。
大概說完原理，來看程式碼。
入參以及狀態定義，可以直接看註釋：
const useInfiniteScroll = <TData extends Data>(
// 請求服務
service: Service<TData>,
options: InfiniteScrollOptions<TData> = {},
) => {
const {
// 父級容器，如果存在，則在捲動到底部時，自動觸發 loadMore。需要配合 isNoMore 使用，以便知道什麼時候到最後一頁了。
target,
// 是否有最後一頁的判斷邏輯，入參為當前聚合後的 data
isNoMore,
// 下拉自動載入，距離底部距離閾值
threshold = 100,
// 變化後，會自動觸發 reload
reloadDeps = [],
// 預設 false。 即在初始化時自動執行 service。
// 如果設定為 true，則需要手動呼叫 reload 或 reloadAsync 觸發執行。
manual,
// service 執行前觸發
onBefore,
// 執行後
onSuccess,
// service reject 時觸發
onError,
// service 執行完成時觸發
onFinally,
} = options;
// 最終的資料
const [finalData, setFinalData] = useState<TData>();
// 是否loading more
const [loadingMore, setLoadingMore] = useState(false);
// 省略程式碼...
};
判斷是否有資料：isNoMore 的入參是當前聚合後的 data。
// 判斷是否還有資料
const noMore = useMemo(() => {
if (!isNoMore) return false;
return isNoMore(finalData);
}, [finalData]);
通過 useRequest 處理請求，可以看到 onBefore、onSuccess、onError、onFinally、manual 等引數都是直接傳到了 useRequest 中。
// 通過 useRequest 處理請求
const { loading, run, runAsync, cancel } = useRequest(
// 入參，將上次請求返回的資料整合到新的引數中
async (lastData?: TData) => {
const currentData = await service(lastData);
// 首次請求，則直接設定
if (!lastData) {
setFinalData(currentData);
} else {
setFinalData({
...currentData,
// service 返回的資料必須包含 list 陣列，型別為 { list: any[], ...rest }
// @ts-ignore
list: [...lastData.list, ...currentData.list],
});
}
return currentData;
},
{
// 是否手動控制
manual,
// 請求結束
onFinally: (_, d, e) => {
// 設定 loading 為 false
setLoadingMore(false);
onFinally?.(d, e);
},
// 請求前
onBefore: () => onBefore?.(),
// 請求成功之後
onSuccess: d => {
setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
scrollMethod();
});
onSuccess?.(d);
},
onError: e => onError?.(e),
},
);
loadMore/loadMoreAsync 和 reload/reloadAsync 分別對應呼叫的是 useRequest 的 run 和 runAsync 函數。
// 同步載入更多
const loadMore = () => {
// 假如沒有更多，直接返回
if (noMore) return;
setLoadingMore(true);
// 執行 useRequest
run(finalData);
};
// 非同步載入更多，返回的值是 Promise，需要自行處理異常
const loadMoreAsync = () => {
if (noMore) return Promise.reject();
setLoadingMore(true);
return runAsync(finalData);
};
const reload = () => run();
const reloadAsync = () => runAsync();
並且當 reloadDeps 依賴發生變化的時候，會觸發 reload，進行重置：
useUpdateEffect(() => {
run();
}, [...reloadDeps]);
最後就是捲動自動載入的邏輯，通過 scrollHeight - scrollTop <= clientHeight + threshold 結果判斷是否觸底。
// 捲動方法
const scrollMethod = () => {
const el = getTargetElement(target);
if (!el) {
return;
}
// Element.scrollTop 屬性可以獲取或設定一個元素的內容垂直捲動的畫素數。
const scrollTop = getScrollTop(el);
// Element.scrollHeight 這個唯讀屬性是一個元素內容高度的度量，包括由於溢位導致的檢視中不可見內容。
const scrollHeight = getScrollHeight(el);
// 這個屬性是唯讀屬性，對於沒有定義CSS或者內聯佈局盒子的元素為0，否則，它是元素內部的高度(單位畫素)，包含內邊距，但不包括水平卷軸、邊框和外邊距。
const clientHeight = getClientHeight(el);
// 根據上面三個值以及 threshold 判斷是否進行載入更多
if (scrollHeight - scrollTop <= clientHeight + threshold) {
loadMore();
}
};
// 監聽捲動事件
useEventListener(
'scroll',
() => {
if (loading || loadingMore) {
return;
}
scrollMethod();
},
{ target },
);
上面提到的三個重要的值 scrollTop，scrollHeight，clientHeight 對應的值分別為以下結果：
Element.scrollTop 屬性可以獲取或設定一個元素的內容垂直捲動的畫素數。一個元素的 scrollTop 值是這個元素的內容頂部（捲起來的）到它的視口可見內容（的頂部）的距離的度量。當一個元素的內容沒有產生垂直方向的卷軸，那麼它的 scrollTop 值為 0。
Element.scrollHeight 這個唯讀屬性是一個元素內容高度的度量，包括由於溢位導致的檢視中不可見內容。
這個屬性是唯讀屬性，對於沒有定義 CSS 或者內聯佈局盒子的元素為 0，否則，它是元素內部的高度 (單位畫素)，包含內邊距，但不包括水平卷軸、邊框和外邊距。clientHeight 可以通過 CSS height + CSS padding - 水平卷軸高度 (如果存在) 來計算。
本文已收錄到個人部落格中，歡迎關注~