Javascript Y滚动事件侦听器Useffect

我下面的代码是一个简单的React组件，它在向下滚动页面时设置一个新状态。如果Y滚动超过某个位置，它会将另一个状态设置为true

    const [ scrollPosition, setScrollPosition ] = useState(0);
    const [ confetti, setConfetti ] = useState(false);

    useEffect(
        () => {
            window.addEventListener('scroll', handleScroll, { passive: true });
            check();

            return () => {
                window.removeEventListener('scroll', handleScroll);
            };
        },
        [ scrollPosition ]
    );
    const handleScroll = () => {
        const position = window.pageYOffset;
        setScrollPosition(position);
    };
    
    const check = () => {
        if (scrollPosition > 400) {
            setConfetti(true);
        }
        if (scrollPosition < 401) {
            setConfetti(false);
        }
    };

const[scrollPosition，setScrollPosition]=useState（0）；
常量[五彩纸屑，设置五彩纸屑]=使用状态（假）；
使用效果(
() => {
addEventListener（'scroll'，handleScroll，{passive:true}）；
检查（）；
return（）=>{
window.removeEventListener（'scroll'，handleScroll）；
};
},
[滚动位置]
);
常量handleScroll=（）=>{
常量位置=window.pageYOffset；
设置CrollPosition（位置）；
};
常量检查=（）=>{
如果（滚动位置>400）{
五彩纸屑（真）；
}
如果（滚动位置<401）{
彩色纸屑（假）；
}
};

一切都像预期的那样顺利，但我只是想知道是否有一种更便宜的方法来做到这一点。每次Y scroll更改时重新呈现页面似乎是运行此代码的一种非常低效的方法。我认为节流也不是一个好主意，因为当用户快速向下滚动时可能会有延迟。

---

感谢所有能帮忙的人

您不需要在状态中保存滚动位置

useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });

    return () => {
        window.removeEventListener("scroll", handleScroll);
    };
}, [scrollPosition]);
const handleScroll = () => {
    const position = window.pageYOffset;
    if (position > 400) {
        setConfetti(true);
    }
    if (position < 401) {
        setConfetti(false);
    }
};

useffect（（）=>{
addEventListener（“滚动”，handleScroll，{passive:true}）；
return（）=>{
window.removeEventListener（“滚动”，handleScroll）；
};
}，[滚动位置]；
常量handleScroll=（）=>{
常量位置=window.pageYOffset；
如果（位置>400）{
五彩纸屑（真）；
}
如果（位置<401）{
彩色纸屑（假）；
}
};

在useEffect钩子中，最后一个数组中传递的值取决于对render方法的调用。 只要数组中的值发生更改，就会调用useEffect并随后调用render方法。 最好删除数组值

 useEffect(
    () => {
        window.addEventListener('scroll', handleScroll, { passive: true });
        check();

        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    },
    []
);