当前位置：首页 > React

react如何获取浏览器的高度widow

2026-01-26 08:31:53React

获取浏览器窗口高度的方法

在React中获取浏览器窗口的高度可以通过监听window对象的resize事件或直接访问window.innerHeight属性。以下是几种实现方式：

直接获取窗口高度

const windowHeight = window.innerHeight;

这种方式适合在组件挂载时一次性获取高度，但不会响应窗口大小变化。

使用useEffect监听窗口变化

import { useState, useEffect } from 'react';

function App() {
  const [windowHeight, setWindowHeight] = useState(window.innerHeight);

  useEffect(() => {
    const handleResize = () => {
      setWindowHeight(window.innerHeight);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return <div>当前窗口高度: {windowHeight}px</div>;
}

这种方法会在窗口大小变化时动态更新高度值。

自定义Hook封装

import { useState, useEffect } from 'react';

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

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

  return height;
}

// 使用示例
function Component() {
  const height = useWindowHeight();
  return <div>Height: {height}</div>;
}

自定义Hook可以复用窗口高度逻辑，使代码更简洁。

注意事项

window.innerHeight包含滚动条高度
在SSR环境下需要先判断window对象是否存在
移除事件监听器防止内存泄漏
频繁的resize事件可能需要防抖处理

兼容SSR的解决方案

对于服务端渲染场景，需要先检查window对象是否存在：

const [windowHeight, setWindowHeight] = useState(
  typeof window !== 'undefined' ? window.innerHeight : 0
);

性能优化

对于高频触发的事件，可以添加防抖函数：

function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

// 在useEffect中使用
const handleResize = debounce(() => {
  setWindowHeight(window.innerHeight);
}, 100);

这些方法提供了在React应用中获取和响应浏览器窗口高度变化的完整解决方案。

react如何获取浏览器的高度widow