写一个react 上拉加载，下拉刷新的效果

好的，下面是一个简单的 react 下拉刷新和上拉加载的示例代码：

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

function App() {
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [pageNumber, setPageNumber] = useState(1);

  useEffect(() => {
    // 加载列表
    loadList();
  }, []);

  const loadList = async () => {
    if (hasMore && !loading) {
      setLoading(true);
      const response = await fetch(`https://api.example.com/list?page=${pageNumber}`);
      const data = await response.json();
      setLoading(false);
      setList(list => [...list, ...data]);
      setPageNumber(pageNumber => pageNumber + 1);
      setHasMore(data.length !== 0);
    }
  };

  const handleScroll = event => {
    const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;
    if (scrollHeight - (scrollTop + clientHeight) < 100 && hasMore) {
      loadList();
    }
  };

  const handleRefresh = async () => {
    setLoading(true);
    const response = await fetch(`https://api.example.com/list?page=1`);
    const data = await response.json();
    setLoading(false);
    setList(data);
    setPageNumber(2);
    setHasMore(data.length !== 0);
  };

  return (
    <div onScroll={handleScroll}>
      <button onClick={handleRefresh}>刷新</button>
      {list.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
      {loading && <div>加载中...</div>}
      {!loading && !hasMore && <div>没有更多数据</div>}
    </div>
  );
}

export default App;

这个示例代码演示了如何在 React 中实现下拉刷新和上拉加载。在这个示例中：

- `list` 用于存储加载的数据列表。
- `loading` 用于标记当前是否正在加载数据。
- `hasMore` 用于标记是否还有更多数据需要加载。
- `pageNumber` 用于记录当前加载的页数。

在页面加载完成后调用 `loadList` 函数加载第一页数据。`handleScroll` 函数用于处理滚动事件，当滚动到底部时，自动加载下一页数据。`handleRefresh` 函数用于处理下拉刷新事件，重新加载第一页数据。

当加载数据时，设置 `loading` 为 `true`，防止重复加载。加载完成后，将新数据添加到 `list` 列表中，更新页码和 `hasMore` 标记。如果没有更多数据可供加载，将 `hasMore` 设置为 `false`。

最后，将 `list` 显示为一系列列表项。如果正在加载数据，显示 `loading` 提示信息。如果没有更多数据可供加载，显示 `no more data` 提示信息。