本文是深入淺出 ahooks 源碼系列文章的第十七篇，該系列已整理成文檔-地址。覺得還不錯，給個 star 支持一下哈，Thanks。 簡介 useInfiniteScroll 封裝了常見的無限滾動邏輯。 詳細可看官網 註意：這裡的無限滾動指的是常見的點擊載入更多或者說下拉載入更加功能，而不是虛擬滾 ...
本文是深入淺出 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 - 水平滾動條高度 (如果存在) 來計算。
本文已收錄到個人博客中，歡迎關註~
