React-хук useOnWindowResize

Введение

В этом практическом занятии мы научимся создавать пользовательский React-хук под названием useOnWindowResize, который будет выполнять обратный вызов при любом изменении размеров окна. Мы будем использовать хуки useRef() и useEffect() для прослушивания события 'resize' глобального объекта Window и очистки ресурсов при размонтировании компонента. Этот хук может быть полезен для создания отзывчивых веб-приложений, которые должны адаптироваться к различным размерам экрана.

React-хук useOnWindowResize

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно добавить код только в script.js и style.css.

Этот код выполняет функцию обратного вызова каждый раз при изменении размеров окна. Чтобы реализовать это, вы должны следовать шагам:

1. Создайте переменную под названием listener с использованием хука useRef(). Эта переменная будет хранить ссылку на слушателя.

2. Используйте хук useEffect() и EventTarget.addEventListener() для прослушивания события 'resize' глобального объекта Window. Когда событие срабатывает, вызовите функцию callback.

3. Очистите ресурсы, удалив любых существующих слушателей с помощью EventTarget.removeEventListener(), когда компонент размонтируется.

Вот код:

const useOnWindowResize = (callback) => {
  const listener = React.useRef(null);

  React.useEffect(() => {
    if (listener.current) {
      window.removeEventListener("resize", listener.current);
    }
    listener.current = callback;
    window.addEventListener("resize", callback);
    return () => {
      window.removeEventListener("resize", callback);
    };
  }, [callback]);
};

const App = () => {
  useOnWindowResize(() =>
    console.log(`Размер окна: (${window.innerWidth}, ${window.innerHeight})`)
  );
  return <p>Измените размер окна и проверьте консоль.</p>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по React-хуку useOnWindowResize. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.