Получение высоты окна в ReactJS: использование window.innerHeight

Быстрый ответ

Для того, чтобы определить высоту окна просмотра в React и подписаться на её изменения в реальном времени, можно создать пользовательский хук, как показано ниже:

import React, { useState, useEffect } from 'react';

function useViewportHeight() {
  const [height, setHeight] = useState(window.innerHeight);

  useEffect(() => {
    const updateHeight = () => setHeight(window.innerHeight);
    window.addEventListener('resize', updateHeight);
    return () => window.removeEventListener('resize', updateHeight);
  }, []);

  return height;
}

function ViewportHeightComponent() {
  const height = useViewportHeight();
  return <div>Высота окна просмотра: {height}px</div>;
}

В данном коде мы создаем хук useViewportHeight, который отслеживает высоту окна браузера и обновляет свое значение при её изменении.

Как избежать проблем с серверным рендерингом

При серверном отрисовке (SSR) в React объект window недоступен, поэтому необходимо проверять его наличие перед использованием:

function useViewportHeight() {
  const [height, setHeight] = useState(0);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setHeight(window.innerHeight);

      const updateHeight = () => setHeight(window.innerHeight);
      window.addEventListener('resize', updateHeight);
      return () => window.removeEventListener('resize', updateHeight);
    }
  }, []);

  return height;
}

Жизненный цикл классового компонента: цикличность жизни

Управление высотой окна в классовых компонентах может выглядеть так:

import React from 'react';

class ViewportHeightComponent extends React.Component {
  state = { height: window.innerHeight };

  updateDimensions = () => {
    this.setState({ height: window.innerHeight });
  };

  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }

  render() {
    return <div>Высота окна просмотра: {this.state.height}px</div>;
  }
}

Чтобы функция updateDimensions корректно работала с this, её следует привязать в конструкторе или использовать стрелочные функции.

Визуализация

Воспринимайте браузер как стеклянную панель небоскрёба:

const glassPaneHeight = window.innerHeight;

Реализовав это в React, получим:

import { useState, useEffect } from 'react';

function useWindowHeight() {
  const [height, setHeight] = useState(window.innerHeight);
  
  useEffect(() => {
    const handleResize = () => setHeight(window.innerHeight);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return height;
}

Теперь у нас есть небоскрёб, способный адаптироваться при изменении размеров стеклянной панели.

Оптимизация, Переиспользование и Лучшие практики

Пользовательские хуки: ваша магия

Пользовательские хуки, такие как useViewportHeight, упрощают чтение кода и делают его более модульным. Это позволяет переиспользовать логику между компонентами без использования компонентов высшего порядка или render-props.

Предотвращение утечек памяти: борьба за чистоту

После использования useEffect не забывайте удалять ненужные подписки на события. Это позволяет избежать утечек памяти и проблем с производительностью.

Слушатель событий: правильное название

При добавлении и удалении слушателей используйте одинаковые обработчики и названия событий, чтобы избежать путаницы и ненужных подписок.

Методы жизненного цикла: избегайте устаревших вариантов

Используйте актуальные методы жизненного цикла, такие как componentDidMount, вместо устаревших, например, componentWillMount.

Завершение с использованием адаптивного дизайна

Размер окна браузера может влиять на стилевое оформление и условный рендеринг компонентов. Используя propTypes и defaultProps в React, вы сможете обеспечить более предсказуемое поведение и повысить надежность компонентов.

Полезные материалы

1. State and Lifecycle – React — официальная документация React по методам жизненного цикла.
2. Window: innerHeight property – Web APIs | MDN — все об свойстве innerHeight окна на MDN.
3. javascript – Rerender view on browser resize with React – Stack Overflow — полезные советы по теме на Stack Overflow.
4. useWindowSize React Hook – useHooks — создание пользовательского хука для отслеживания размера окна.
5. Developing responsive layouts with React Hooks – LogRocket Blog — создание адаптивных макетов с помощью React Hooks.
6. react-use – npm — коллекция необходимых хуков для управления размером окна.
7. GitHub – rehooks/window-size: React hook for subscribing to window size — хук для подписки на изменение размера окна в React.