无限滚动中的react闭包陷阱

99 阅读1分钟

IntersectionObserver监听"加载更多"盒子实现无限滚动

  • 事件的监听需要用useRef解决闭包陷阱(useEffect每次事件都重新绑定代价有点大)
  • 底部盒子的状态变化['加载更多','Spin','到底了~']要用state
  • loadingRef+loadingState touchBottomRef+touchBottomState???数据冗余 有没有其他好方法呢?找到再补充吧
  
useEffect(() => {
    if (list.length) addLoadMoreListener()
  }, [list])
  const addLoadMoreListener = () => {
    let observer = new IntersectionObserver(
      (entries) => {
        const entry = entries[0]
        if (entry.intersectionRatio > 0 && !touchBottom.current && !loading.current) loadMore()
      },
      {
        threshold: 0
      }
    )
    observer.observe(loadMoreTrigger.current!)
  }