可以附加很多事件偵聽器嗎？

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毫秒內未調用處理程序時才在處理程序中運行代碼

使用僅添加一個偵聽器來監視所有類似對象的高階組件可能是一種更好的方法，即使僅使用一個組件也可能需要一些限制