与共享的 React 自定义挂钩和 window.onscroll 属性冲突

Question

我有一个 React 自定义挂钩，shows/hidden 一个按钮根据 window.pageYOffset 值：

const useHandlerOnScroll = height => {

    const [buttonVisible, showUpButton] = useState(false);
    useEffect ( () => {
        window.onscroll = () => {
            window.pageYOffset >= height ? showUpButton(true) : showUpButton(false)
        }
    })  

    return { buttonVisible }
}

每当我需要使用它时，我只需在我的组件中解构我的钩子并获取 buttonVisible 值：

export default () => {

    const { buttonVisible } = useHandlerOnScroll(450)

    const goTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })

    return buttonVisible 
      ? <BottoneTop onClick={() => }> <FaChevronCircleUp /> </BottoneTop> 
        : null
}

只要我只将它用于一个组件，这个程序就可以工作，如果我导出我的 useHandlerOnScroll 钩子并在另一个按钮上使用它，那么只会显示一个按钮。

我不明白为什么，因为我认为导入挂钩的每个组件都会创建该挂钩的新实例。

我也试过 useReducer 但结果是一样的：我不能对一个以上的组件使用 hook。

PS：我的猜测是 window.oncroll 属性在这样调用时会引起一些冲突（由于性能原因，我仍然不希望使用 addEventListener）。

Answer 1

刚刚发现.onscroll方法一次只能赋值一个对象，所以这就是冲突的根源：

Only one onscroll handler can be assigned to an object at a time. For greater flexibility, you can pass a scroll event to the EventTarget.addEventListener() method instead.

来自：MDN Web docs - GlobalEventHandlers.onscroll

我用 window.addEventListener("scroll", callbackFunction ) 解决了我的问题。

与共享的 React 自定义挂钩和 window.onscroll 属性冲突

Conflic with shared React custom hook and window.onscroll property

window

reactjs

react-hooks

与共享的 React 自定义挂钩和 window.onscroll 属性 冲突

Conflic with shared React custom hook and window.onscroll property

window

reactjs

react-hooks

与共享的 React 自定义挂钩和 window.onscroll 属性冲突