Reactjs 交叉口观察员丢失条目

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

下面是一个非常简化的代码：

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"))

类表扩展了React.Component{
构造函数（）{
超级（）
此.state={
参赛作品：0
}
}
组件将卸载（）{
console.log（'componentWillUnmount'）
如果（this.observer）this.observer.disconnect（）
}
观察（c）{
如果（！this.observer）{
this.observer=新的IntersectionObserver(
条目=>{
this.setState（{entries:entries.length}）
},
{阈值：[0,0.25,0.5,0.75,1]}
)
}
如果（！c）返回
本观察者观察（c）
}
render（）{
const{entries}=this.state
返回(
观察者条目数：{entries}
)
}
}
ReactDOM.render（，document.querySelector（“#app”））

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

---

JSON fiddle-

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

交叉点条目仅报告从0（不在视图中）到1（完全在视图中）的转换。因此，当一个div完全退出/进入视图时，它将不再出现在条目更新中

但是，您仍然可以获得2个条目：）。如果你能快速滚动的话！尝试使用加速鼠标滚轮。因此，基本上，在两个交叉点计算之间，如果两个div移动得太远，都会引发交叉点事件，但是如果它们移动缓慢，交叉点将是逐渐的，因为它们一个接一个地堆叠在一起

---

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

该行为似乎是正确的。检查一下你的小提琴。我不这么认为。如果要计算几个元素的可见性，该怎么办？我想知道哪个元素在屏幕上最显眼。这就是十字路口观察器的用途，不是吗？如果可见性发生变化，我可以检查所有观察到的元素并选择最可见的元素。我的意思是，存储多个引用或存储父引用是可行的，但这会使问题更加复杂…要检查可见性，您可能只需要跟踪2个点：0和1。当一个元素通过其中一个点时，交点观察者会通知您，即您可以知道哪些元素变为可见，哪些元素变为不可见。