react hooks 触底反弹效果

### 使用 React Hooks 实现触底反弹效果 当页面滚动到底部时触发特定事件或加载更多数据的效果被称为触底反弹。通过 `useEffect` 和 `useState` 这两个核心 Hook 可以轻松实现这一功能。 下面展示一段基于此需求编写的代码： ```javascript import React, { useState, useEffect } from 'react'; function InfiniteScrollComponent() { const [dataList, setDataList] = useState([]); // 存储获取的数据列表 const [loading, setLoading] = useState(false); let observer; useEffect(() => { const lastElementObserver = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting && !loading) { fetchData(); } }); }); if (dataList.length > 0) { observer = lastElementObserver.observe(document.querySelector('.last-item')); } return () => { if (observer) { observer.disconnect(); // 清除观察者 } }; }, [dataList, loading]); async function fetchData() { try { setLoading(true); // 模拟异步请求 await new Promise(resolve => setTimeout(resolve, 1000)); // 假设这是从服务器接收到的新一批数据 const newData = Array.from({ length: 5 }).map((_, index) => ({ id: dataList.length + index + 1, content: "Item" }) ); setDataList(prevData => [...prevData, ...newData]); } catch (error) { console.error('Failed to fetch data', error); } finally { setLoading(false); } } return ( <div> {dataList.map(item => ( <div key={item.id} className={`${item.id === dataList[dataList.length - 1]?.id ? 'last-item' : ''}`}> {item.content} </div> ))} </div> ); } export default InfiniteScrollComponent; ``` 上述组件定义了一个无限滚动行为，在每次接近底部元素 `.last-item` 的时候自动发起新的数据请求并追加到现有列表之后[^1]。