React 中的无限滚动

无限滚动是网页开发中使用的一种技术，用户向下滚动页面时会自动加载其他内容。这对于显示长数据列表特别有用，不会让用户被大量内容淹没。它提供了更无缝和动态的用户体验，允许用户在到达页面或列表底部时加载新内容。

在 React 中，可以通过状态管理和事件监听器的组合来实现无限滚动，事件监听器可以检测用户何时到达页面底部。

1.为什么要使用无限滚动？

2. 无限滚动的工作原理

无限滚动的一般概念包括：

3. React 中的基本实现

下面介绍了如何使用 `useState`、`useEffect` 和 `window.onscroll` 在 React 中实现无限滚动，以便在用户滚动时加载更多数据：

步骤 1：设置组件

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

const InfiniteScroll = () => {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  // Function to fetch data
  const fetchItems = async () => {
    if (loading) return; // Prevent multiple API calls at once

    setLoading(true);

    // Simulating an API call
    setTimeout(() => {
      const newItems = Array.from({ length: 10 }, (_, index) => `Item ${index + items.length + 1}`);
      setItems((prevItems) => [...prevItems, ...newItems]);

      // If there are no more items, set hasMore to false
      if (items.length + newItems.length >= 50) {
        setHasMore(false); // Example: max of 50 items
      }

      setLoading(false);
    }, 1500);
  };

  // Scroll event listener to detect when the user reaches the bottom
  const handleScroll = () => {
    if (loading || !hasMore) return;

    // Check if user has scrolled to the bottom
    const bottom = window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight;
    if (bottom) {
      fetchItems();
    }
  };

  // Attach event listener to window on component mount and unmount
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    // Cleanup the event listener on unmount
    return () => window.removeEventListener('scroll', handleScroll);
  }, [loading, hasMore]);

  // Initial fetch of data
  useEffect(() => {
    fetchItems();
  }, []);

  return (
    

      
Infinite Scrolling Example
      

        {items.map((item, index) => (
          
{item}
        ))}
      
      {loading && 
Loading...
}
      {!hasMore && 
No more items to load
}
    
  );
};

export default InfiniteScroll;

4. 代码解释

状态管理：

获取数据：

`fetchItems` 函数使用 `setTimeout` 模拟 API 调用，生成要添加到现有列表的新项目。在实际应用中，您可以将其替换为实际的 API 调用（例如 `fetch()` 或 Axios）。

滚动事件监听器：

使用效果：

5. 使用占位符或微调器增强用户体验

为了使加载体验更加流畅，您可以在获取新数据时显示加载旋转器或占位符文本。这已在上面的示例中使用“加载”状态实现。

6. 优化性能

如果不进行优化，无限滚动可能会导致性能问题，尤其是数据列表较长时。以下是一些优化措施：

7. 使用外部库实现无限滚动

如果您不想为无限滚动编写自定义逻辑，则可以使用以下库：

8. 使用 react-infinite-scroll-component 的示例

下面介绍了如何使用“react-infinite-scroll-component”库实现无限滚动。

npm install react-infinite-scroll-component

import React, { useState, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const InfiniteScrollWithLibrary = () => {
  const [posts, setPosts] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  const fetchPosts = async () => {
    const response = await fetch(API_URL);
    const newPosts = await response.json();
    setPosts((prevPosts) => [...prevPosts, ...newPosts]);

    // Example: Set hasMore to false after 50 posts
    if (posts.length >= 50) {
      setHasMore(false);
    }
  };

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

  return (
    

      
Infinite Scroll with react-infinite-scroll-component
      Loading...
}
        endMessage={
No more posts to load.
}
      >
        {posts.map((post) => (
          

            
{post.title}
            
{post.body}
          
        ))}