react如何获取窗口高度

获取窗口高度的方法

在React中获取窗口高度可以通过监听window对象的resize事件并结合useState和useEffect钩子实现。以下是具体实现方式：

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

const WindowHeight = () => {
  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>;
};

export default WindowHeight;

自定义Hook封装

为了复用逻辑，可以将获取窗口高度的功能封装成自定义Hook：

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;
}

export default useWindowHeight;

使用时直接在组件中调用：

const height = useWindowHeight();

注意事项

window.innerHeight返回的是视口高度（包含滚动条但不包含浏览器工具栏）。如果需要获取文档总高度，可以使用document.documentElement.scrollHeight。

在服务器端渲染（SSR）场景下，直接访问window对象会导致错误，需通过typeof window !== 'undefined'进行判断：

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