脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → 原生+React实现懒加载列表

原生+React实现懒加载(无限滚动)列表方式

 更新时间：2023年03月24日 16:29:49   作者：小天才程序员  
这篇文章主要介绍了原生+React实现懒加载(无限滚动)列表方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

应用场景

懒加载列表或叫做无限滚动列表，也是一种性能优化的方式，其可疑不必一次性请求所有数据，可以看做是分页的另一种实现形式，较多适用于移动端提升用户体验，新闻、资讯浏览等。

效果预览

思路剖析

  • 设置临界元素，当临界元素进入可视范围时请求并追加新数据。
  • 根据可视窗口和滚动元素组建的关系确定数据加载时机。
container.clientHeight - wrapper.scrollTop <= wrapper.clientHeight

原生代码实现

index.html

<body>
  <div id="wrapper" onscroll="handleScroll()">
    <ul id="container"></ul>
  </div>
  <script type="text/javascript" src="./index.js"></script>
</body>

index.css

* {
  margin: 0;
  padding: 0;
}
#wrapper {
  margin: 100px auto;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(100, 100, 100, 0.2);
  overflow-y: scroll;
}

ul#container {
  list-style: none;
  padding: 0;
  width: 100%;
}
ul#container > li {
  height: 30px;
  width: 100%;
}
ul#container > li.green-item {
  background-color: #c5e3ff;
}
ul#container > li.red-item {
  background-color: #fff5d5;
}

index.js

// 模拟数据构造
const arr = [];
const nameArr = ['Alice', 'July', 'Roman', 'David', 'Sara', 'Lisa', 'Mike'];

let curPage = 1;
let noData = false;
const curPageSize = 20;
const getPageData = (page, pageSize) => {
  if (page > 5) return [];
  const arr = [];
  // const nameArr = ['Alice', 'July', 'Roman', 'David', 'Sara', 'Lisa', 'Mike'];
  for (let i = 0; i < pageSize; i++) {
    arr.push({
      number: i + (page - 1) * pageSize,
      name: `${nameArr[i % nameArr.length]}`,
    });
  }
  return arr;
};

const wrapper = document.getElementById('wrapper');
const container = document.getElementById('container');
let plainWrapper = null;

/**
 * @method handleScroll
 * @description: 滚动事件监听
 */
const handleScroll = () => {
  // 当临界元素进入可视范围时,加载下一页数据
  if (
    !noData &&
    container.clientHeight - wrapper.scrollTop <= wrapper.clientHeight
  ) {
    curPage++;
    console.log(curPage);
    const newData = getPageData(curPage, curPageSize);
    renderList(newData);
  }
};

/**
 * @description: 列表渲染
 * @param {Array} data
 */
const renderList = (data) => {
  // 没有更多数据时
  if (!data.length) {
    noData = true;
    plainWrapper.innerText = 'no more data...';
    return;
  }
  plainWrapper && container.removeChild(plainWrapper); //移除上一个临界元素
  const fragment = document.createDocumentFragment();
  data.forEach((item) => {
    const li = document.createElement('li');
    li.className = item.number % 2 === 0 ? 'green-item' : 'red-item'; //奇偶行元素不同色
    const text = document.createTextNode(
      `${`${item.number}`.padStart(7, '0')}-${item.name}`
    );
    li.appendChild(text);
    fragment.appendChild(li);
  });
  const plainNode = document.createElement('li');
  const text = document.createTextNode('scroll to load more...');
  plainNode.appendChild(text);
  plainWrapper = plainNode;
  fragment.appendChild(plainNode); //添加新的临界元素
  container.appendChild(fragment);
};

// 初始渲染
renderList(getPageData(curPage, curPageSize));

迁移到React

在 React 中实现时可以省去复杂的手动渲染逻辑部分，更关注数据。

store/data.ts

import { IDataItem } from '../interface';
const nameArr = ['Alice', 'July', 'Roman', 'David', 'Sara', 'Lisa', 'Mike'];

export const getPageData = (
  page: number = 1,
  pageSize: number = 10
): Array<IDataItem> => {
  if (page > 5) return [];
  const arr = [];
  // const nameArr = ['Alice', 'July', 'Roman', 'David', 'Sara', 'Lisa', 'Mike'];
  for (let i = 0; i < pageSize; i++) {
    arr.push({
      number: i + (page - 1) * pageSize,
      name: `${nameArr[i % nameArr.length]}`,
    });
  }
  return arr;
};

LazyList.tsx

/*
 * @Description: 懒加载列表(无限滚动列表)
 * @Date: 2021-12-20 15:12:15
 * @LastEditTime: 2021-12-20 16:04:18
 */
import React, { FC, useCallback, useEffect, useReducer, useRef } from 'react';
import { getPageData } from './store/data';
import { IDataItem } from './interface';

import styles from './index.module.css';

export interface IProps {
  curPageSize?: number;
}

export interface IState {
  curPage: number;
  noData: boolean;
  listData: Array<IDataItem>;
}
const LazyList: FC<IProps> = ({ curPageSize = 10 }: IProps) => {
  const clientRef: any = useRef(null);
  const scrollRef: any = useRef(null);

  const [state, dispatch] = useReducer(
    (state: IState, action: any): IState => {
      switch (action.type) {
        case 'APPEND':
          return {
            ...state,
            listData: [...state.listData, ...action.payload.listData],
          };
        default:
          return { ...state, ...action.payload };
      }
    },
    {
      curPage: 1,
      noData: false,
      listData: [],
    }
  );
  /**
   * @method handleScroll
   * @description: 滚动事件监听
   */
  const handleScroll = useCallback(() => {
    const { clientHeight: wrapperHeight } = scrollRef.current;
    const { scrollTop, clientHeight } = clientRef.current;

    // 当临界元素进入可视范围时,加载下一页数据
    if (!state.noData && wrapperHeight - scrollTop <= clientHeight) {
      console.log(state.curPage);
      const newData = getPageData(state.curPage, curPageSize);
      dispatch({
        type: 'APPEND',
        payload: { listData: newData },
      });
      dispatch({
        payload: {
          curPage: state.curPage + 1,
          noData: !(newData.length > 0),
        },
      });
    }
  }, [state.curPage, state.noData]);

  useEffect(() => {
    const newData = getPageData(1, curPageSize);
    dispatch({
      type: 'APPEND',
      payload: { listData: newData },
    });
    dispatch({
      payload: {
        curPage: 2,
        noData: !(newData.length > 0),
      },
    });
  }, []);

  return (
    <div className={styles[`wrapper`]} ref={clientRef} onScroll={handleScroll}>
      <ul className={styles[`container`]} ref={scrollRef}>
        {state.listData.map(({ number, name }) => (
          <li
            key={number}
            className={
              number % 2 === 0 ? styles[`green-item`] : styles[`red-item`]
            }
          >
            {number}-{name}
          </li>
        ))}
        {<li>{state.noData ? 'no more' : 'scroll'}</li>}
      </ul>
    </div>
  );
};
export default LazyList;

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践

    深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践

    这篇文章主要介绍了深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践，TypeScript 增加了代码的可读性和可维护性，拥有活跃的社区，,需要的朋友可以参考下
    2019-06-06
  • 使用React路由实现页面导航的示例代码

    使用React路由实现页面导航的示例代码

    在构建现代Web应用程序时,前端路由是一个不可或缺的部分,今天,我们将讨论如何在React中使用React Router来实现页面导航,在这篇博客中,我们将会探索路由的基本概念,设置React Router,并通过示例代码来展示如何实现复杂的页面导航,需要的朋友可以参考下
    2025-02-02
  • React Native使用百度Echarts显示图表的示例代码

    React Native使用百度Echarts显示图表的示例代码

    本篇文章主要介绍了React Native使用百度Echarts显示图表的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • react echarts刷新不显示问题的解决方法

    react echarts刷新不显示问题的解决方法

    最近在写项目的时候遇到了一个问题,当编辑完代码后echarts图正常展示 , 可再次刷新页面 , echarts会消失,所以本文给大家介绍了react echarts刷新不显示问题原因和解决方法,需要的朋友可以参考下
    2024-02-02
  • react拖拽react-beautiful-dnd一维数组二维数组拖拽功能

    react拖拽react-beautiful-dnd一维数组二维数组拖拽功能

    二维数组可以拖拽,但是不可以编辑+拖拽,如果想要实现编辑+拖拽,还是需要转换成一维数组,本文给大家介绍react拖拽react-beautiful-dnd的相关知识,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • React中useEffect原理的代码简单实现详解

    React中useEffect原理的代码简单实现详解

    React的useEffect钩子是React函数组件中处理副作用,本文将通过一个简单的例子解释如何用代码实现useEffect的基本原理,感兴趣的小伙伴可以了解下
    2023-12-12
  • 基于React实现表单数据的添加和删除详解

    基于React实现表单数据的添加和删除详解

    这篇文章主要给大家介绍了基于React实现表单数据的添加和删除的方法，文中给出了详细的示例供大家参考，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
    2017-03-03
  • React报错Element type is invalid解决案例

    React报错Element type is invalid解决案例

    这篇文章主要为大家介绍了React报错Element type is invalid解决案例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 详解React 的几种条件渲染以及选择

    详解React 的几种条件渲染以及选择

    这篇文章主要介绍了详解React 的几种条件渲染以及选择，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 在 React Native 中使用 CSS Modules的配置方法

    在 React Native 中使用 CSS Modules的配置方法

    有些前端工程师希望也能像开发 web 应用那样，使用 CSS Modules 来开发 React Native，本文将介绍如何在 React Native 中使用 CSS Modules，需要的朋友可以参考下
    2022-08-08

最新评论