IntersectionObserver實現加載更多組件demo

更新時間：2023年07月12日 09:17:06 作者：Best_白水

這篇文章主要為大家介紹了IntersectionObserver實現加載更多組件demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

實例

import { useEffect, useRef } from 'react';
import { Spin } from 'antd';
import type { FsFC } from './types';
import './index.less';
type LoadMoreProps = {
  root?: Element | null; // 跟哪個元素重疊不傳默認則是 整個瀏覽器窗口,一般是父元素
  isLoading: boolean; // 用來判斷如果 沒有在請求列表才回執(zhí)行
  more: () => void;
};
const LoadMore: FsFC<LoadMoreProps> = ({ root = null, isLoading, more }) => {
  const loadMoreRef = useRef(null);
  /** 建立加載更多觀察者 */
  const loadMoreOb = () => {
    if (!loadMoreRef.current) {
      return;
    }
    const ob = new IntersectionObserver(
      (entries) => {
        const [entry] = entries;
        // 有重疊，并且沒有在請求
        if (entry.isIntersecting && !isLoading) {
          more();
        }
      },
      {
        root,
        threshold: 1,
      },
    );
    ob.observe(loadMoreRef.current);
  };
  useEffect(() => {
    loadMoreOb();
  }, []);
  return (
    <div className="load-more" ref={loadMoreRef}>
      <Spin />
    </div>
  );
};
export default LoadMore;

文中注釋已對代碼進行詳解說明，以上就是IntersectionObserver實現加載更多組件demo的詳細內容，更多關于IntersectionObserver加載組件的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

詳解React中父子組件數據傳遞和修改的方式及原理
這篇文章主要為大家詳細介紹了React中父子組件數據傳遞和修改的方式及原理,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2024-04-04
React Zustand狀態(tài)管理庫的使用詳解
Zustand是一個為React和瀏覽器環(huán)境設計的輕量級狀態(tài)管理庫,由Vercel開發(fā),它特點包括輕量級、易用性、靈活性、可組合性和性能優(yōu)化,支持多種狀態(tài)管理模式和中間件,適合中小型項目,Zustand還支持TypeScript,提供類型安全的支持
2024-09-09
淺談React-router v6 實現登錄驗證流程
本文主要介紹了React-router v6 實現登錄驗證流程，主要介紹了公共頁面、受保護頁面和登錄頁面，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-05-05
解決React在安裝antd之后出現的Can''t resolve ''./locale''問題(推薦)
這篇文章主要介紹了解決React在安裝antd之后出現的Can't resolve './locale'問題,本文給大家分享解決方案，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-05-05
React如何避免子組件無效刷新
這篇文章主要介紹了React幾種避免子組件無效刷新的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
React+高德地圖實時獲取經緯度,定位地址
思路其實沒有那么復雜，把地圖想成一個盒子容器，地圖中心點想成盒子中心點；扎點在【地圖中心點】不會動，當移動地圖時，去獲取【地圖中心點】經緯度，設置某個位置的時候，將經緯度設置為【地圖中心點】即可
2021-06-06
React為什么需要Scheduler調度器原理詳解
這篇文章主要為大家介紹了React為什么需要Scheduler調度器原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
React跨路由組件動畫實現
在 React 中路由之前的切換動畫可以使用 react-transition-group 來實現,但對于不同路由上的組件如何做到動畫過渡是個很大的難題,目前社區(qū)中也沒有一個成熟的方案,本文給大家分享React跨路由組件動畫實現,感興趣的朋友一起看看吧
2023-10-10
Ant?Design?組件庫之步驟條實現
這篇文章主要為大家介紹了Ant?Design組件庫之步驟條實現，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
React 數據獲取與性能優(yōu)化詳解
這篇文章主要為大家介紹了React 數據獲取與性能優(yōu)化方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10