体验 React Hook 的魅力：实现列表加载

前端

2024-01-19 04:30:47

在当今快速发展的技术格局中，React Hook 已成为开发人员提升代码可读性和可维护性的利器。在这篇文章中，我们将深入探讨如何利用 React Hook 来创建高效且响应式的列表加载组件。

React Hook 的引入改变了我们编写 React 组件的方式，它使我们能够在函数组件中使用状态和生命周期方法。为了实现列表加载，我们将利用以下几个 Hook：

useState ：用于管理组件的状态。
useEffect ：用于在组件生命周期中执行副作用。
useCallback ：用于创建不会随着组件渲染而变化的回调函数。

功能分析

我们的列表加载组件将提供以下功能：

空状态处理：当列表为空时显示一个占位符。
下拉刷新：允许用户下拉列表以刷新数据。
上拉加载：当用户滚动到列表底部时自动加载更多数据。
加载完成提示：当加载完成时显示一条消息。
加载截流：防止在用户快速滚动时出现过度加载。

实现方案

空状态组件

import React from "react";

const EmptyState = () => {
  return <p>列表为空</p>;
};

export default EmptyState;

自定义 Effect

import { useEffect } from "react";

const useLoadEffect = (isLoading, fetchFunc) => {
  useEffect(() => {
    if (!isLoading) {
      fetchFunc();
    }
  }, [isLoading, fetchFunc]);
};

export default useLoadEffect;

列表组件

import React, { useState, useEffect, useRef } from "react";

const List = ({ data, fetchFunc }) => {
  const [isLoading, setIsLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);
  const scrollRef = useRef();

  useEffect(() => {
    fetchFunc(page);
  }, [page, fetchFunc]);

  const handleScroll = () => {
    if (hasMore && !isLoading && scrollRef.current.scrollTop + scrollRef.current.clientHeight >= scrollRef.current.scrollHeight) {
      setIsLoading(true);
      setPage(page + 1);
    }
  };

  useEffect(() => {
    scrollRef.current.addEventListener("scroll", handleScroll);
    return () => scrollRef.current.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <div ref={scrollRef}>
      {data.map((item) => <p key={item.id}>{item.name}</p>)}
      {isLoading && <p>加载中...</p>}
      {hasMore && !isLoading && <p>加载完成</p>}
    </div>
  );
};

export default List;