監(jiān)聽滾動事件并檢測何時加載更多內(nèi)容，通過判斷用戶是否接近頁面或容器底部來觸發(fā)加載；2. 可選地將滾動監(jiān)聽綁定到特定容器而非窗口；3. 使用節(jié)流或Intersection Observer優(yōu)化性能，推薦使用Intersection Observer以提高效率；4. 處理多次加載、錯誤及可訪問性等邊界情況；最終實現(xiàn)流暢且高效的無限滾動功能，提升用戶體驗。

Implementing infinite scrolling in React is a great way to improve user experience by loading content dynamically as the user scrolls, instead of requiring pagination. Here’s how to do it effectively and efficiently.

1. Listen to Scroll Events and Detect When to Load More

The core idea behind infinite scrolling is to detect when the user has scrolled near the bottom of the page (or container), then trigger a function to load more data.

You can achieve this by:

• Listening to the scroll event on the window or a scrollable container.
• Checking if the user is close to the bottom using scroll and client heights.

import { useEffect, useState } from 'react';

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

  const loadMoreItems = async () => {
    if (loading || !hasMore) return;
    setLoading(true);

    // Simulate API call
    setTimeout(() => {
      const newItems = Array.from({ length: 10 }, (_, i) => `Item ${items.length   i   1}`);
      setItems(prev => [...prev, ...newItems]);
      if (items.length >= 50) setHasMore(false); // Stop after 50 items
      setLoading(false);
    }, 500);
  };

  useEffect(() => {
    const handleScroll = () => {
      if (
        window.innerHeight   document.documentElement.scrollTop
        >= document.documentElement.offsetHeight - 500 // Trigger 500px before bottom
      ) {
        loadMoreItems();
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [loading, hasMore]);

  useEffect(() => {
    loadMoreItems(); // Load initial items
  }, []);

  return (
    <div>
      {items.map((item, index) => (
        <div key={index} style={{ padding: '20px', borderBottom: '1px solid #eee' }}>
          {item}
        </div>
      ))}
      {loading && <p style={{ textAlign: 'center' }}>Loading more...</p>}
      {!hasMore && <p style={{ textAlign: 'center' }}>No more items to load.</p>}
    </div>
  );
}

export default InfiniteScroll;

? Note: The threshold (500px in this case) ensures content loads before the user hits the very bottom — this prevents a jarring wait.

2. Use a Scrollable Container (Optional)

If your app doesn’t scroll the whole page (e.g., a chat window or sidebar), attach the scroll listener to a specific container instead of window.

const containerRef = useRef();

useEffect(() => {
  const container = containerRef.current;
  const handleScroll = () => {
    if (
      container.scrollTop   container.clientHeight >= container.scrollHeight - 100
    ) {
      loadMoreItems();
    }
  };

  container.addEventListener('scroll', handleScroll);
  return () => container.removeEventListener('scroll', handleScroll);
}, []);

And in your JSX:

<div ref={containerRef} style={{ height: '500px', overflowY: 'scroll' }}>
  {/* List items */}
</div>

3. Optimize Performance with Throttling or Intersection Observer

Listening to every scroll event can cause performance issues. Two better approaches:

? Option A: Throttle Scroll Events

Use a debounce/throttle utility (e.g., Lodash or custom):

const throttle = (func, delay) => {
  let inThrottle;
  return () => {
    if (!inThrottle) {
      func();
      inThrottle = true;
      setTimeout(() => (inThrottle = false), delay);
    }
  };
};

// Then use: throttle(handleScroll, 100)

? Option B: Use IntersectionObserver (Recommended)

This is more efficient and modern. Create a sentinel (invisible) element at the end of the list and observe it.

const observer = useRef();

useEffect(() => {
  observer.current = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting && hasMore && !loading) {
      loadMoreItems();
    }
  });

  if (observer.current && sentinelRef.current) {
    observer.current.observe(sentinelRef.current);
  }

  return () => {
    if (sentinelRef.current) observer.current.unobserve(sentinelRef.current);
  };
}, [hasMore, loading]);

const sentinelRef = useRef();

// In your JSX:
<div ref={sentinelRef} style={{ height: '10px' }} />

This method is performant and clean, as it avoids scroll event listeners altogether.

4. Handle Edge Cases

• Avoid multiple simultaneous loads: Use loading state to prevent duplicate API calls.
• Error handling: Add a retry mechanism or error UI.
• Accessibility: Announce new content to screen readers using ARIA live regions.
• Server-side support: Your backend should support offset/limit or cursor-based pagination.

Summary

To implement infinite scrolling in React:

• Track scroll position or use IntersectionObserver.
• Load more data when near the bottom.
• Prevent duplicate loads with loading and hasMore states.
• Optimize with IntersectionObserver for better performance.

Using the IntersectionObserver approach is generally preferred in modern apps — it's efficient, clean, and scalable.

Basically, infinite scrolling isn’t hard to set up, but doing it right means paying attention to UX and performance.

以上是如何在React中實施無限滾動的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！