附加许多事件侦听器可以吗

Question

假设我有一些组件，它表示某种智能映像(IUKWIM:D)。

export default class SmartImage extends React.Component {
state = {
visible: false
}
wrapper: HTMLDivElement
componentDidMount() {
window.addEventListener("scroll", this.handleScroll)
this.handleScroll()
}
componentWillUnmount() {
window.removeEventListener("scroll", this.handleScroll)
}
handleScroll = (event?: UIEvent) => {
var box = this.wrapper.getBoundingClientRect()
if (box.bottom < 0 || box.top > window.innerHeight) {
if (this.state.visible)
this.setState({ visible: false })
} else {
if (!this.state.visible)
this.setState({ visible: true })
}
}
render() {
return (
<div className="c-image-wrapper" ref={r => this.wrapper = r}>
{this.state.visible &&
<img src="someSource" className="u-fade-in" />
}
</div>
)
}
}

让我们来了解一下当图像没有被渲染时包装器高度的细节(假设我已经处理过了，这只是DOM性能优化的一个例子)。

因此，主要目标显然是制作某种图像的性能列表。你可能知道，当有很多图像时(尤其是如果它们没有优化——大图像、有很多透明像素的PNG等)，页面就会开始滞后。

因此，我们的想法是让每个渲染的SmartImage都知道，无论它是否在视口内。为此，我附加了window.onscroll的侦听器，并动态检测SmartImage的边界框是否在视口中，如有必要，切换图像的可见性。我知道，我可以在内联样式中使用条件呈现或{ display: "none" }，但这不是主要问题。

主要的问题是：如果我将有很多这样的SmartImage组件，那么最好只附加一个事件侦听器并注意SmartImage的列表的变化，还是可以为每个SmartImage组件附加很多单个侦听器？什么更具表演性？

AFAIK，addEventListener并没有为每个类似的事件添加一个额外的侦听器，而是创建处理程序列表并逐个执行。这是真的吗？

我想这个问题更形而上学，但如果有人经历过这种情况，请给我一些建议或解释，对我来说会很好。

感谢任何帮助或信息！提前谢谢！

Answer 1

对于大多数事件(如键盘或鼠标事件)来说，为每个项目添加一个侦听器通常不是什么大问题。

然而，像scroll和resize这样的事件在每一个像素变化时都会被触发，这使得它们根据的变化率每秒触发多次

因此，如果你有几百个项目在一秒钟内多次触发事件处理程序，那么它可能会陷入困境，影响用户体验。

提高性能的一种方法是使用被称为"节流">或(易于研究)的技术，这些技术只有在最后n毫秒内未调用时才在处理程序中运行代码

使用只添加一个侦听器来监视所有类似对象的高阶组件可能是一种更好的方法，即使只使用一个也可能需要一些限制