react如何获取浏览器的高度

获取浏览器高度的方法

在React中获取浏览器窗口高度可以通过监听window对象的resize事件，并使用window.innerHeight属性实现。

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

function WindowHeightTracker() {
  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封装

可以将获取窗口高度的逻辑封装成自定义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;
}

// 使用示例
function App() {
  const height = useWindowHeight();
  return <div>窗口高度: {height}px</div>;
}

服务端渲染(SSR)兼容方案

在服务端渲染环境中，window对象不存在，需要添加条件判断防止报错。

function useWindowHeight() {
  const [height, setHeight] = useState(
    typeof window !== 'undefined' ? window.innerHeight : 0
  );

  useEffect(() => {
    if (typeof window === 'undefined') return;

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

  return height;
}

性能优化建议

频繁触发resize事件会影响性能，可以使用防抖(debounce)技术优化。

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

function useWindowHeight() {
  const [height, setHeight] = useState(
    typeof window !== 'undefined' ? window.innerHeight : 0
  );

  useEffect(() => {
    if (typeof window === 'undefined') return;

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

  const debouncedHeight = useDebounce(height, 100);
  return debouncedHeight;
}