可以附加很多事件侦听器吗？

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像素变化都会触发scroll和resize事件，这使它们每秒每秒触发多次，具体取决于变化率

因此，如果您有几百个项目全部以每秒一次的速度多次触发事件处理程序，那么它可能会陷入停顿而影响用户体验。

一种提高性能的方法是使用称为“限制”或“反跳” （易于研究）的技术，该技术仅在最近n毫秒内未调用处理程序时才在处理程序中运行代码

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