Событие прокрутки окна, чтобы проверить, достигнута ли нижняя часть страницы

#javascript #reactjs #dom

Вопрос:

Я внедряю бесконечную прокрутку в своем приложении React, и для этого я следую инструкциям из этого замечательного поста в блоге: https://upmostly.com/tutorials/build-an-infinite-scroll-component-in-react-using-react-hooks

Однако есть одна часть, которую я нахожу неясной.

Следующий фрагмент кода проверяет, достигнут ли нижний конец страницы.

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

  function handleScroll() {
    if (window.innerHeight   document.documentElement.scrollTop !== document.documentElement.offsetHeight) return;
    console.log('Fetch more list items!');
  }

Зачем внутри useEffect() и window.addEventListener('scroll', handleScroll) то и другое и return () => window.removeEventListener('scroll', handleScroll) нужно? Событие добавляется, а затем удаляется?

1. Крюк useEffect построен таким образом, что если мы вернем функцию в методе, эта функция будет выполняться, когда компонент будет разъединен. Это очень полезно, потому что мы можем использовать его для устранения ненужного поведения или предотвращения проблем с утечкой памяти.

2. Понял! Спасибо!

Ответ №1:

Возвращаемое значение a useEffect должно быть функцией, которая будет использоваться при отключении компонента.

Вы не хотите, чтобы этот обработчик событий оставался подключенным, когда компонент больше не отображается на экране!

Не волнуйтесь, возвращаемая функция со стрелкой не будет выполнена сразу — только когда компонент будет размонтирован 👍

вот это в документах

Ответ №2:

Это потому, что useEffect

 return () => window.removeEventListener('scroll', handleScroll);

использование return означает componentWillUnMount компонент на основе класса или с отслеживанием состояния.

window.addEventListener('scroll', handleScroll); использование внутри useEffect означает, что компонент был смонтирован, а затем мы добавляем ScrollEvent.