Блог

Приведенный ниже мой код представляет собой простой компонент 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 кажется очень неэффективным способом запуска этого кода. Я не думаю, что регулирование также было бы хорошей идеей, поскольку может возникнуть задержка, когда пользователь прокручивает страницу вниз очень быстро.
Спасибо всем, кто может помочь!

Вам не нужно сохранять положение прокрутки в состоянии.

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

  

В перехватчике useEffect значение, переданное в последнем массиве, зависит от вызова метода визуализации. Всякий раз, когда значение в массиве изменяется, вызывайте useEffect и впоследствии вызывайте метод визуализации. Лучше удалить значение массива.

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

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