Question

我下面的代码是一个简单的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);
        }
    };

一切都按预期进行，但我只是想知道是否有一种更便宜的方法来做到这一点。每次Y滚动更改都会重新呈现页面，这似乎是运行此代码的一种非常低效的方式。我也不认为节流不是一个好主意，因为当用户快速向下滚动时可能会有延迟。感谢任何可以提供帮助的人！

Answer 1

您无需将滚动位置保存为状态。

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);
    }
};

Answer 2

在useEffect Hook中，最后一个数组中传递的值取决于对render方法的调用。每当数组中的值更改时，useEffect调用就会随之调用render方法。最好删除数组值。

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

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

Y滚动事件侦听器useEffect

2 个答案: