它是确定附加了很多事件侦听器？

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组件，将是更好附上只有一个事件侦听器，并观看了SmartImages名单的变化，或者它是确定附加很多单身的听众每一个的SmartImage组件？什么是更好的性能？

据我所知，addEventListener不添加额外的听众的每一项类似的事件，而造成处理程序的列表，而不是并执行一个接一个。是真的吗？

现在的问题是比较形而上的，我想，但如果有人有这种情况的经验，请，这将是对我很好，如果你能给我一些建议或解释。

感谢任何帮助或信息！先感谢您！

Answer 1

对于大多数事件，比如键盘或鼠标事件将每个项目一个监听器通常不是一个大问题。

像scroll和resize活动但被触发的每一个像素的变化，这使得它们触发多次第二取决于变化率

所以，如果你有几百个项目都在一个触发事件处理程序多次第二快速移动它都不可能拖垮足以影响用户体验。

提高性能的一种方法是使用一种称为“节流”或“反跳”（很容易调查），只有当它尚未被称为最后n毫秒内处理程序中运行代码技术

使用高阶组件，只增加了一个侦听器，以监控所有类似的对象可能是一个更好的办法，甚至只用一个可能需要一些节流