使用React Hooks实现无限滚动加载列表

React Hooks是一种新的编程方式，它可以让我们在函数组件中使用状态和其他React特性。在这篇文章中，我们将使用React Hooks来实现一个无限滚动加载列表的功能。

首先，我们需要在组件中声明一个state，来保存列表数据和是否正在加载的状态：

const [list, setList] = useState([]);
const [loading, setLoading] = useState(false);

然后，我们需要在组件挂载后调用一个函数，来获取第一页的数据：

useEffect(() => {
setLoading(true);
fetchList(1).then(res => {
setList(res);
setLoading(false);
  });
}, []);

在这个函数中，我们使用了React Hooks中的useEffect方法，它会在组件挂载后调用一次，我们在这个函数中调用fetchList函数来获取第一页的数据，获取到数据后，使用setList方法将数据保存在state中，并将loading状态设置为false。

接下来，我们需要监听滚动事件，并在滚动到底部时加载下一页的数据。我们可以使用useRef来保存一个DOM节点的引用，然后在useEffect函数中使用addEventListener方法来监听scroll事件：

constcontainerRef=useRef(null);
useEffect(() => {
consthandleScroll= () => {
constcontainer=containerRef.current;
constscrollHeight=container.scrollHeight;
constscrollTop=container.scrollTop;
constclientHeight=container.clientHeight;
if (scrollHeight-scrollTop===clientHeight) {
setLoading(true);
constpage=list.length/pageSize+1;
fetchList(page).then(res=> {
setList(list.concat(res));
setLoading(false);
      });
    }
  };
containerRef.current.addEventListener('scroll', handleScroll);
return () =>containerRef.current.removeEventListener('scroll', handleScroll);
}, [list]);

在这个函数中，我们使用了useRef来保存一个DOM节点的引用，并在useEffect函数中使用addEventListener方法来监听scroll事件。在scroll事件触发时，我们可以计算出当前滚动的位置，如果滚动到底部，则调用fetchList函数来获取下一页的数据，然后使用setList方法将数据保存在state中，并将loading状态设置为false。

最后，我们需要将列表渲染到页面上，并在loading状态时显示一个loading动画：

<divref={containerRef} style={{ height: '500px', overflowY: 'scroll' }}>
  {list.map(item => (
    <divkey={item.id}>{item.name}</div>
  ))}
  {loading && <div>Loading...</div>}
</div>