Javascript 如何检测React中的隐藏组件

简言之

我有一个无限的滚动列表，为每个项目5 PureComponent渲染

我的想法是，仅在项目可见时渲染PureComponent

问题是,

如何检测项目组件对用户是否可见

最简单的解决方案：

将

scrollPosition

和

containerSize

添加到

this.state

创建

ref

到

render（）中的容器

{this.scrollContainer=cont；}}/>

在
componentDidMount（）
订阅
滚动
事件

this.scrollContainer.addEventListener（'scroll'，this.handleScroll）

在
组件中，将卸载（）
取消订阅

this.scrollContainer.removeEventListener（'scroll'，this.handleScroll）

你的
handleScroll
应该看起来像

handleScroll (e) {
    const { target: { scrollTop, clientHeight } } = e;
    this.setState(state => ({...state, scrollPosition: scrollTop, containerSize: clientHeight}))
}

然后在渲染函数中，只需检查应该显示哪个元素，并渲染正确的元素
numOfElementsToRender=state.containerSize/elementSize
和
firstElementIndex=state.scrollPosition/elementSize-1

当您拥有所有这些时，只需呈现元素列表，并根据元素的
索引应用过滤器，或者按照您想要的方式对它们进行排序

Ofc您需要处理所有边缘情况，并添加bufor以实现平滑滚动（高度的20%应该可以）
最简单的解决方案：

将
scrollPosition
和
containerSize
添加到
this.state

创建
ref
到
render（）中的容器

{this.scrollContainer=cont；}}/>

在
componentDidMount（）
订阅
滚动
事件

this.scrollContainer.addEventListener（'scroll'，this.handleScroll）

在
组件中，将卸载（）
取消订阅

this.scrollContainer.removeEventListener（'scroll'，this.handleScroll）

你的
handleScroll
应该看起来像

handleScroll (e) {
    const { target: { scrollTop, clientHeight } } = e;
    this.setState(state => ({...state, scrollPosition: scrollTop, containerSize: clientHeight}))
}

然后在渲染函数中，只需检查应该显示哪个元素，并渲染正确的元素
numOfElementsToRender=state.containerSize/elementSize
和
firstElementIndex=state.scrollPosition/elementSize-1

当您拥有所有这些时，只需呈现元素列表，并根据元素的
索引应用过滤器，或者按照您想要的方式对它们进行排序

Ofc您需要处理所有边缘情况，并添加bufor以实现平滑滚动（20%的高度应该可以）
您可以将与polyfill一起使用（它是chrome 61+）。在新的浏览器中，寻找交叉点是一种更有效的方法，在其他情况下，它会回到piro的答案。它们还允许您指定交点变为真的阈值。看看这个：


从“React”导入React；
导入“交叉点观察者”；//可选多填料
从'@researchgate/react intersection Observer'导入观察者；
类ExampleComponent扩展了React.Component{
handleIntersection（事件）{
console.log（event.isIntersecting）；//如果它被切断，则为true
}
render（）{
常量选项={
onChange:this.handleIntersection，
root:#滚动容器“，
根边际：“0%0%-25%
};
返回(
我是目标元素
);
}
}
您可以将与polyfill（chrome 61+）配合使用。在新的浏览器中，寻找交叉点是一种更有效的方法，在其他情况下，它会回到piro的答案。它们还允许您指定交点变为真的阈值。看看这个：


从“React”导入React；
导入“交叉点观察者”；//可选多填料
从'@researchgate/react intersection Observer'导入观察者；
类ExampleComponent扩展了React.Component{
handleIntersection（事件）{
console.log（event.isIntersecting）；//如果它被切断，则为true
}
render（）{
常量选项={
onChange:this.handleIntersection，
root:#滚动容器“，
根边际：“0%0%-25%
};
返回(
我是目标元素
);
}
}
您的意思是在视口中不可见的组件将不会成为DOM的一部分吗？项目组件仍然在这里，但不是其中包含的其他5个PureComponent。您的意思是在视口中不可见的组件将不会成为DOM的一部分吗？项目组件仍然在这里，但不是它包含的其他5个PureComponent。