当前位置：首页 > React

react如何监听下拉

2026-01-24 03:06:05React

监听下拉事件的实现方法

在React中监听下拉事件通常涉及监听滚动事件，判断用户是否滚动到页面底部。以下是几种常见实现方式：

使用原生滚动事件监听

通过window.addEventListener监听滚动事件，计算是否到达页面底部：

react如何监听下拉

useEffect(() => {
  const handleScroll = () => {
    const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
    if (scrollTop + clientHeight >= scrollHeight - 10) {
      console.log('Reached bottom');
    }
  };

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

使用Intersection Observer API

更现代的API，性能更好：

useEffect(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting) {
        console.log('Bottom element visible');
      }
    },
    { threshold: 1.0 }
  );

  const bottomElement = document.querySelector('#bottom-element');
  if (bottomElement) observer.observe(bottomElement);

  return () => {
    if (bottomElement) observer.unobserve(bottomElement);
  };
}, []);

第三方库实现

使用react-infinite-scroll-component等库简化实现：

react如何监听下拉

import InfiniteScroll from 'react-infinite-scroll-component';

function MyComponent() {
  const [items, setItems] = useState(Array.from({ length: 20 }));

  const fetchMoreData = () => {
    setTimeout(() => {
      setItems(items.concat(Array.from({ length: 20 })));
    }, 500);
  };

  return (
    <InfiniteScroll
      dataLength={items.length}
      next={fetchMoreData}
      hasMore={true}
      loader={<h4>Loading...</h4>}
    >
      {items.map((_, index) => (
        <div key={index}>Item {index}</div>
      ))}
    </InfiniteScroll>
  );
}

自定义Hook封装

创建可复用的自定义Hook：

function useInfiniteScroll(callback) {
  useEffect(() => {
    const handleScroll = () => {
      if (
        window.innerHeight + document.documentElement.scrollTop >=
        document.documentElement.offsetHeight - 100
      ) {
        callback();
      }
    };

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

// 使用示例
function MyComponent() {
  useInfiniteScroll(() => {
    console.log('Load more data');
  });
  return <div>Content</div>;
}

性能优化建议

避免在滚动事件中进行复杂计算，使用防抖技术减少事件触发频率：

function useDebouncedScroll(callback, delay = 100) {
  useEffect(() => {
    let timeoutId;
    const handleScroll = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        if (
          window.innerHeight + window.scrollY >=
          document.body.offsetHeight - 200
        ) {
          callback();
        }
      }, delay);
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      clearTimeout(timeoutId);
      window.removeEventListener('scroll', handleScroll);
    };
  }, [callback, delay]);
}

标签: react