路口观察员丢失条目

Question

我正在尝试在我的 React 应用程序中使用 IntersectionObserver。我想用它来实现延迟加载。因此，我观察了几个元素，如果它们出现在屏幕上，我会在其中加载内容。

这是一个非常简化的代码：

class Table extends React.Component {  
    constructor() {
    super()
    this.state = {
      entries: 0
    }
  }

  componentWillUnmount() {
    console.log('componentWillUnmount')
    if (this.observer) this.observer.disconnect()
  }


    observe (c) {
    if (!this.observer) {
      this.observer = new IntersectionObserver(
        entries => {
            this.setState({entries: entries.length})
        },
        { threshold: [0, 0.25, 0.5, 0.75, 1] }
      )
    }
    if (!c) return
    this.observer.observe(c)
  }

  render() {
    const {entries} = this.state
    return (
      <div>
        <h1>Number of observer entries: {entries}</h1>
        <div
          ref={this.observe.bind(this)}
          style={{height: '1000px', display: 'block', width: '500px'}}
        />
        <div
          ref={this.observe.bind(this)}
          style={{height: '1000px', display: 'block', width: '500px'}}
        />
      </div>
    )
  }
}

ReactDOM.render(<Table />, document.querySelector("#app"))

安装组件时，它显示观察到两个元素，但当我向下滚动时，它立即变为只有一个元素。我不知道我错过了什么。

JSON fiddle - https://jsfiddle.net/w1zn49q6/12/

Answer 1

div一个接一个垂直堆叠。在初始渲染中，当它们被布置时，当它们一起进入视口时，交叉观察器被触发（第一个 div 进入，第二个 div 退出）。然而，一旦它们被渲染，它们将 enter/exit 在垂直滚动的正常过程中一次一个，因此条目将只包含一个 div，最近与 x 轴相交。

交集条目仅报告转换 to/from 0（不在视图中）from/to 1（完全在视图中）。因此，当一个 div 完全 exited/entered 视图时，它将不再出现在条目更新中。

但是您仍然可以获得 2 个条目:)。如果你设法滚动得非常快！使用加速的鼠标滚轮试试。所以基本上，在两次相交计算之间，如果两个div都移动得太远，都会引发相交事件，但如果它们移动缓慢，相交将是渐进的，因为它们是一个一个堆叠的。

如果将它们堆叠在同一行中，您将连续获得两个条目，因为它们将同时与 x 轴相交。

路口观察员丢失条目

Intersection Observer loses entries

reactjs

intersection-observer