初学React，做一个简易的滚动加载

想做一个简单的滚动鼠标加载更多商品的功能，虽然有相关插件更方便，不过想手写一个简易版的。

我把这个板块放在最下方，再下面就是一个小小的底部导航了，所以就判断滚动到页面底部就行。

判断滚动到底部需要知道3个值： 滚动的高度、可视区域的高度、滚动条内容的总高度；

如果（滚动的高度 + 可视区域的高度 ）>= 滚动条内容的总高度========就说明到底部了。

先初始化几个值：

const [currentPage, setPage] = useState(1);//currentPage表示目前是第几页，初始第1页

const [noData, setNoData] = useState(false);//noData表示没有数据时，初始false就是有数据，因为不能无限加载，总会有尽头的时候

const [listData, setListData] = useState([]);//listData表示商品列表，初始空数组

const currentPageRef=useRef(null);//需要把最新的currentPage值保存起来

const noDataRef=useRef(null);//需要把最新的noData值保存起来

因为 useState函数会异步执行，无法及时获得最新的第几页，直接获取就一直是第1页不变，但是加载更多商品又需要第几页做参数，所以通过useRef()一个变量来保存更新后的currentPage（第几页）

在函数组件中useEffect()可以代替componentDidMount和com