ReactJS中的无限滚动加载实现

import React, { useState, useEffect } from 'react';

const InfiniteScroll = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = () => {
    setLoading(true);
    // 模拟异步请求数据
    setTimeout(() => {
      const newData = [...data];
      for (let i = 0; i< 10; i++) {
        newData.push(`Item ${newData.length + i + 1}`);
      }
      setData(newData);
      setLoading(false);
      setPage(page + 1);
    }, 1000);
  };

  const handleScroll = (event) => {
    const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;

    if (scrollHeight - scrollTop === clientHeight && !loading) {
      fetchData();
    }
  };

  return (

      {data.map((item, index) => (
{item}
      ))}
      {loading &&
Loading...
}
  );
};

export default InfiniteScroll;

在ReactJS中，实现无限滚动加载是一项常见的需求。本文将介绍一种简单的实现方式，无需借助第三方库。

我们首先创建一个名为InfiniteScroll的无状态组件。通过useState Hook来管理数据、当前页数和加载状态。

const [data, setData] = useState([]);
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(true);

在组件渲染完成后，调用useEffect Hook来触发数据的初始化请求，并将页面初始化为第一页。

useEffect(() => {
  fetchData();
}, []);

fetchData函数模拟异步请求数据，在请求成功后更新data、loading状态，并递增页面数。

const fetchData = () => {
  setLoading(true);
  setTimeout(() => {
    const newData = [...data];
    for (let i = 0; i < 10; i++) {
      newData.push(`Item ${newData.length + i + 1}`);
    }
    setData(newData);
    setLoading(false);
    setPage(page + 1);
  }, 1000);
};

handleScroll函数监听滚动事件，当滚动到底部且加载状态为false时，触发数据加载。

const handleScroll = (event) => {
  const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;

  if (scrollHeight - scrollTop === clientHeight && !loading) {
    fetchData();
  }
};

在组件的render函数中，渲染滚动容器并遍历显示数据。当数据加载时，显示"Loading..."提示。

return (
  <div style={{ height: '400px', overflow: 'auto' }} onScroll={handleScroll}>
    {data.map((item, index) => (
      <div key={index}>{item}
    ))}
    {loading && <div style={{ textAlign: 'center' }}>Loading...}
  </div>
);

以上为ReactJS中实现无限滚动加载的简单示例。你可以根据具体情况进行定制和扩展，实现更复杂的无限滚动效果。