90行代码15个元素实现无限滚动

　　无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。

　　当你使用滚动作为发现数据的主要方法时，它可能使你的用户在网页上停留更长时间并提升用户参与度。随着社交媒体的流行，大量的数据被用户消费。无线滚动提供了一个高效的方法让用户浏览海量信息，而不必等待页面的预加载。

　　如何构建一个体验良好的无限滚动，是每个前端无论是项目或面试都会碰到的一个课题。

　　敲重点：IntersectionObserver API是异步的，不随着目标元素的滚动同步触发，性能消耗极低。

　　callback函数被调用时，会传给它一个数组，这个数组里的每个对象就是当前进入可视区域或者离开可视区域的对象(IntersectionObserverEntry对象)

　　intersectionRatio: 相交区域和目标元素的比例值，进入可视区域，值大于0，否则等于0

　　调用IntersectionObserver时，除了传一个回调函数，还可以传入一个option对象，配置如下属性：

　　threshold: 决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数。用户可以自定义这个数组。比如，[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。

　　root: 用于观察的根元素，默认是浏览器的视口，也可以指定具体元素，指定元素的时候用于观察的元素必须是指定元素的子元素

　　众所周知，React 16.x后推出了useRef来替代原有的createRef，用于追踪DOM节点。那让我们开始吧：

　　实现一个组件，可以显示具有15个元素的固定窗口大小的n个项目的列表： 即在任何时候，无限滚动n元素上也仅存在15个DOM节点。

　　正常的无限向下滚动只需关注一个dom元素，但由于我们是固定15个dom元素渲染，需要判断向上或向下滚动。