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