react如何获取窗口高度

获取窗口高度的方法

在React中获取窗口高度可以通过以下几种方式实现：

使用window.innerHeight

直接访问window.innerHeight属性可以获取当前窗口的视口高度（不包含工具栏和滚动条）。

const windowHeight = window.innerHeight;

使用useEffect和useState结合

在函数组件中，可以使用React的useEffect和useState钩子来动态获取和更新窗口高度。

import React, { 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>Window height: {windowHeight}px</div>;
}

自定义Hook封装

可以将获取窗口高度的逻辑封装成一个自定义Hook，方便复用。

import { useState, useEffect } from 'react';

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

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

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

  return windowHeight;
}

function App() {
  const height = useWindowHeight();
  return <div>Window height: {height}px</div>;
}

注意事项

• 在服务器端渲染（SSR）时，window对象不存在，需要确保代码在客户端执行。
• 监听resize事件可能会影响性能，建议在组件卸载时移除事件监听。
• 如果需要获取包含工具栏和滚动条的完整窗口高度，可以使用window.outerHeight。