谈谈React实战之拉动刷新组件的编写

2023-12-08 15:38:42

在React项目实战中，我们经常会遇到需要实现拉动刷新功能的需求，本篇文章将详细讲解如何编写一个拉动刷新组件，以满足向下拉动和向上滑动这两种拉动刷新方式。

分析

首先，我们需要明确拉动刷新组件的功能需求。对于向下拉动，我们需要实现当用户下拉页面时，触发页面内容的刷新；对于向上滑动，我们需要实现当用户向上滑动页面时，触发页面内容的加载更多。

其次，我们需要考虑组件的实现细节。由于offsetHeight是一个DOM属性，有时被称为一个元素的物理/图形的尺寸，或是一个元素的边界框，因此我们需要考虑如何利用这个属性来实现拉动刷新功能。

PullDownRefresh组件编写

定义组件接口

interface PullDownRefreshProps {
  onRefresh: () => void;
  children: React.ReactNode;
}

组件实现

const PullDownRefresh: React.FC<PullDownRefreshProps> = (props) => {
  const { onRefresh, children } = props;

  const [isRefreshing, setIsRefreshing] = useState(false);

  const handleRefresh = () => {
    setIsRefreshing(true);
    onRefresh().then(() => {
      setIsRefreshing(false);
    });
  };

  useEffect(() => {
    const element = document.getElementById('pull-down-refresh');

    const observer = new IntersectionObserver((entries) => {
      const [entry] = entries;
      if (entry.intersectionRatio > 0 && isRefreshing) {
        handleRefresh();
      }
    }, { threshold: 1 });

    observer.observe(element);

    return () => {
      observer.disconnect();
    };
  }, [isRefreshing]);

  return (
    <div id="pull-down-refresh">
      {children}
    </div>
  );
};

export default PullDownRefresh;

PullUpRefresh组件编写

定义组件接口

interface PullUpRefreshProps {
  onLoadMore: () => void;
  children: React.ReactNode;
}

组件实现

const PullUpRefresh: React.FC<PullUpRefreshProps> = (props) => {
  const { onLoadMore, children } = props;

  const [isLoadingMore, setIsLoadingMore] = useState(false);

  const handleLoadMore = () => {
    setIsLoadingMore(true);
    onLoadMore().then(() => {
      setIsLoadingMore(false);
    });
  };

  useEffect(() => {
    const element = document.getElementById('pull-up-refresh');

    const observer = new IntersectionObserver((entries) => {
      const [entry] = entries;
      if (entry.intersectionRatio > 0 && !isLoadingMore) {
        handleLoadMore();
      }
    }, { threshold: 1 });

    observer.observe(element);

    return () => {
      observer.disconnect();
    };
  }, [isLoadingMore]);

  return (
    <div id="pull-up-refresh">
      {children}
    </div>
  );
};

export default PullUpRefresh;