В современной веб-разработке создание адаптивных пользовательских интерфейсов имеет важное значение для обеспечения бесперебойной работы на различных устройствах и размерах экранов. React, одна из самых популярных библиотек JavaScript, предлагает различные хуки для обработки различных аспектов состояния компонента. В этой статье мы рассмотрим хук useWindowSize в React и обсудим несколько методов эффективного управления размером окна.

Понимание использования хука useWindowSize:

Хук useWindowSize — это специальный хук React, который позволяет нам отслеживать изменения размера окна и реагировать на них. Он предоставляет нам текущие размеры окна браузера в виде переменных состояния, которые мы можем использовать для динамической настройки наших компонентов пользовательского интерфейса. Давайте углубимся в некоторые практические методы эффективного использования этого крючка.

Метод 1. Изменение стилей CSS:

Один из самых простых способов реагирования на изменения размера окна — изменение стилей CSS в зависимости от размеров окна. Вот пример использования хука useWindowSize:

import React from 'react';
import useWindowSize from './useWindowSize';
function MyComponent() {
  const { width, height } = useWindowSize();
  return (
    <div
      style={{
        width: `${width}px`,
        height: `${height}px`,
        backgroundColor: 'lightblue',
      }}
    >
      Content here...
    </div>
  );
}

В этом примере ширина и высота, полученные с помощью хука useWindowSize, применяются к встроенному стилю компонента, динамически регулируя его размеры.

Метод 2: Условный рендеринг:

Еще один мощный метод — условный рендеринг, при котором мы выборочно отображаем или скрываем компоненты в зависимости от размера окна. Вот пример:

import React from 'react';
import useWindowSize from './useWindowSize';
function MyComponent() {
  const { width } = useWindowSize();
  return (
    <div>
      {width > 768 ? (
        <LargeComponent />
      ) : (
        <SmallComponent />
      )}
    </div>
  );
}

В этом случае хук useWindowSize используется для определения того, следует ли отображать LargeComponentили SmallComponentв зависимости от ширины окна.

Метод 3. Устранение событий изменения размера:

Изменение размера окна может вызвать несколько событий изменения размера, что может привести к ненужному повторному рендерингу и проблемам с производительностью. Чтобы смягчить это, мы можем отменить события изменения размера, используя такую ​​утилиту, как lodash.debounce. Вот пример:

import React, { useEffect } from 'react';
import useWindowSize from './useWindowSize';
import debounce from 'lodash.debounce';
function MyComponent() {
  const { width } = useWindowSize();
  useEffect(() => {
    const handleResize = debounce(() => {
      // Handle resize logic here...
    }, 250);
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  return <div>Content here...</div>;
}

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

В этой статье мы рассмотрели различные методы управления размером окна с помощью хука useWindowSize в React. Динамически настраивая стили CSS, условно отображая компоненты и устраняя события изменения размера, мы можем создавать адаптивные и эффективные пользовательские интерфейсы. Включение этих методов в ваши проекты React поможет вам обеспечить удобство взаимодействия с пользователем на различных устройствах и размерах экранов.