IntersectionObserver 实现流加载

asynchronously 也可以说是异步监控器，我们只需要通过

const observer = new IntersectionObserver(fn, options)

就可以创建一个监控器 fn：触发监控的回调函数 ，options就是一些触发的条件 我们这里只说如何实现流加载 就不去着重介绍 IntersectionObserver。如果大家不懂可以先看看developer.mozilla.org/en-US/docs/… API然后回来再学习实现方法。

react 和 vue 实现方法都是一样的 我这里使用的是react实现

const TodoProduction = () => {
    const observerRef = useRef(null); 
    
    const observerCallback = useCallback(node => {
        // 如果当前 ref 正在监控数据 则断开监控 防止满足监控的条件后一直触发请求
        if (observerRef.current) observerRef.current.disconnect();
        // 创建新的监控器 此时还不知道监控什么 
        // 相当于 const observer = new IntersectionObserver(fn, options)
        // 只有我们调用 observer.observe() 才会开始监控
        observerRef.current = new IntersectionObserver(entries => {
        // 这里参数entries 是个数组如果我们要监控dom节点出现在视口是否与浏览器窗口产生交叉，entries会显示出发后这个节点的一些位置信息
            if (entries[0].isIntersecting) { // 如果产生交叉
                takeService() // 请求下一页数据
            }
        });
        // 判断dom元素是否已经被加载，如果加载则开启监控 监控绑定的改 node节点
        if (node) observerRef.current.observe(node);
    }, []);
    
    return (
        <div ref={observerCallback}> 滑动加载更多 </div>
    )
}

这样 我们就通过以上的代码实现了流加载 当我们看见 滑动加载更多 页面就会自动去请求下一页数据不需要我们以前想实现流加载需要那么多的计算。